Techathons is a high-performance, aesthetically pleasing resource management platform designed for developers and tech enthusiasts. It serves as a centralized hub for organizing techathons, hackathons, AI tools, code snippets, and essential web resources. Built with a focus on speed, modern design, and intelligent interactions.
- Categorized Hub: Organize resources into tabs like "Websites", "Components", "AI Tools", "Snippets", and "Tutorials".
- Real-time Search: Instantaneous search across all resources with a dedicated backdrop-blur modal.
- Dynamic Grid: A responsive grid layout that adapts to different screen sizes, featuring "Recently Used" tracking.
- CRUD Operations: Fully functional backend for creating, reading, updating, and deleting resource cards.
- Rich Previews: Every card supports high-quality images, external links, and detailed markdown-ready descriptions.
- Integrated Chat: A dedicated AI box powered by Groq (Llama 3.1 8B) for quick queries and brainstorming.
- Context-Aware: The AI is tuned to provide concise, friendly, and structured advice for developers.
- Seamless UI: Transparent backdrop-blur chat interface that doesn't break the user's flow.
- Auto-expanding Input: Intelligent input box that grows with your text, providing a natural chat experience.
- Collab Box: A real-time (database-backed) chat system for users to share ideas and discuss resources.
- Message History: Persistent chat threads that allow users to catch up on recent developer discussions.
- Recent Activity: Keeps track of the most recently visited cards for quick access, synced across sessions.
- Gatekeeper Screen: A sleek password-protected entry screen ensures that the platform remains private or restricted to authorized users.
- Environment Driven: Sensitive configurations like API keys and database URLs are managed via robust
.envconfigurations. - CORS Restricted: Backend is configured to only allow requests from the official frontend origin.
- Paper Texture UI: A unique, high-fidelity design system utilizing paper-like textures and sleek borders.
- Smooth Animations: Leverages Tailwind CSS 4 for state-of-the-art transitions and micro-interactions.
- Dark/Glassmorphism: A modern aesthetic featuring deep blacks, subtle blurs, and vibrant accents.
- Custom Scrollbars: Minimalist, non-intrusive scrollbars for a premium feel.
- Framework: React 19 (Fiber architecture, concurrent rendering)
- Styling: Tailwind CSS v4 (Pure CSS variables, blazing-fast compile times, zero-runtime)
- State Management: React Context API
AuthContext: Authentication lifecycle.CardsContext: Resource data fetching and synchronization.ModalContext: UI state for overlays and dialogs.TabsContext: Filtering and view logic.
- Icons: Lucide React (Tree-shakeable SVG icons)
- Notifications: React Hot Toast (Lightweight and accessible toast notifications)
- Networking: Axios (With interceptors and base configurations)
- Build Tool: Vite (Lightning-fast HMR)
- Runtime: Node.js (Version 18.x+)
- Framework: Express.js (Version 5.1 Alpha/Stable)
- Database: Neon (Serverless Postgres with autoscaling storage)
- AI Engine: Groq SDK (Powered by Llama 3.1 8B Instant)
- ORM/Query: Raw SQL with tagged templates for maximum control and security against SQL injection.
- Development: Nodemon (Auto-restart on file changes)
techathons/
├── backend/ # Express.js Server
│ ├── config/ # Database & global configurations
│ │ └── db.js # Neon client init & table creation
│ ├── controllers/ # Request handlers & logic
│ │ ├── aiController.js # AI Chat logic
│ │ ├── cardController # CRUD for resources
│ │ └── chatController # Collab chat logic
│ ├── routes/ # API Endpoints definition
│ ├── services/ # Core business logic
│ │ ├── aiService.js # Groq integration
│ │ ├── cardServices/ # Card logic + In-memory cache
│ │ └── chatService.js # Persistence for collab chat
│ ├── utils/ # Helper functions & data seeders
│ └── server.js # Entry point and middleware setup
├── frontend/ # React Application
│ ├── src/
│ │ ├── components/ # UI Components
│ │ │ ├── ui/ # Base UI primitives (modals, grids)
│ │ │ ├── Card.jsx # Individual resource item
│ │ │ ├── AiBox.jsx # AI overlay
│ │ │ └── Tabs.jsx # Category navigation
│ │ ├── context/ # React Providers
│ │ ├── page/ # Main Application Pages
│ │ │ ├── Dashboard.jsx
│ │ │ └── PasswordScreen.jsx
│ │ ├── store/ # Local persistence utilities
│ │ └── App.jsx # Root component
│ └── index.html # HTML Entry
└── README.md # Extensive documentation
- Node.js: v18.x or higher
- Postgres: A Neon DB account (or any standard Postgres instance)
- Groq API Key: Obtain from Groq Console
-
Clone the repository:
git clone https://github.com/yashthorat7/Techathons.git cd techathons -
Setup Backend:
cd backend npm installCreate a
.envfile in thebackend/directory:PORT=3000 DATABASE_URL=postgres://USER:PASSWORD@HOST/DB?sslmode=require GROQ_API_KEY=gsk_your_key_here ALLOWED_ORIGIN=http://localhost:5173
-
Setup Frontend:
cd ../frontend npm installCreate a
.envfile in thefrontend/directory:VITE_BACKEND_URL=http://localhost:3000 VITE_AUTH_PASSWORD=your_secure_password
-
Start the Backend:
cd backend npm run dev -
Start the Frontend:
cd frontend npm run dev -
Access the app at
http://localhost:5173. Use yourVITE_AUTH_PASSWORDto unlock the dashboard.
The AI Assistant is not just a wrapper. It uses a specialized system prompt that instructs the model to act as a CASUAL developer friend. It avoids verbose intros/outros and focuses on:
- Code clarity.
- Concise one-liners.
- Technical accuracy.
- Context-retention by sending the last 10 messages of history.
The PasswordScreen.jsx acts as a full-page barrier. The app uses AuthContext to track the isAuthenticated state. Even if a user manages to bipass the UI, the backend checks for environment-level authorization (where applicable) and enforces CORS to prevent unauthorized cross-origin requests.
In-memory caching is implemented in cardCacheService.js. When getAllCards is called, the server first checks the local volatile memory. This results in sub-10ms response times for repeat requests. The cache is automatically purged when any mutation (POST/PUT/DELETE) occurs, ensuring data consistency.
- Navbar: Sticky header with logo and primary actions.
- Tabs: Dynamically generated based on available resource tags.
- Grid: Uses CSS Grid for responsive layout, handling variable card sizes.
- Card: The main data entry, featuring:
- Conditional Rendering: Handles links, images, and descriptions dynamically.
- Tooltips: For long descriptions.
- Edit/Delete Actions: Quick management buttons.
- SearchModal: Global shortcut (
Ctrl+Klogic ready) for finding resources. - CardModal: Full-screen view with markdown support for descriptions.
- CardForm: Validated form for submitting new resources to the database.
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/cards |
Fetch all resources (cached) |
| GET | /api/cards/:id |
Fetch detailed card data |
| POST | /api/cards |
Add new resource |
| PUT | /api/cards/:id |
Update existing resource |
| DELETE | /api/cards/:id |
Permanent removal |
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/ai |
Interact with Llama 3.1 |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/chats |
Retrieve global collab history |
| POST | /api/chats |
Broadcast a new message |
This project is Proprietary and Confidential. All rights reserved. Unauthorized copying, distribution, or use of this codebase is strictly prohibited. For access or inquiries, please contact the repository owner.
Feel free to suggest improvements, or report issues!
⭐ Don't forget to star this repository if you find it useful!