Hackord is a high-performance, modern web application crafted for hackathon participants and builders. It provides an intuitive platform to discover hackathons, assemble developer teams, manage dedicated project "Rooms", track live deadlines, and collaborate seamlessly.
Built with a futuristic glassmorphic UI, responsive navigation, dark/light theme options, and real-time state synchronization.
- 🎯 Hackathon Countdown & Dashboard: Real-time deadline clock, event cards, and live project activity feeds.
- 🚪 Team Collaboration Rooms: Dedicated room spaces featuring role management, quick links, and GitHub repository integration.
- 🔍 User Discovery & Invitations: Search builder profiles, filter by skills, and send interactive team invitations.
- 🔔 Interactive Notification Hub: Real-time updates for room invites, role promotions, and activity alerts.
- 📝 Scratchpad & Quick Notes: Built-in team note-taking and pitch deck brainstorming tools.
- 🎨 Glassmorphism Aesthetic: Fluid micro-animations, clean dark/light UI, custom icons, and Three.js 3D subtle interactions.
| Technology | Purpose |
|---|---|
| React 19 | Core UI Framework |
| Vite | Next-gen Frontend Tooling & Dev Server |
| TanStack Router | Type-safe Client-side Routing |
| TanStack Query | Async State & API Data Fetching |
| Tailwind CSS v4 | Modern Utility-First Styling System |
| Radix UI | Accessible Unstyled UI Primitives |
| Lucide React | Icon Set |
| Recharts & Three.js | Analytics & 3D Interactive Elements |
Hackord-Frontend/
├── src/
│ ├── components/ # Reusable UI components & layouts (AppShell, SpotlightCard, etc.)
│ ├── routes/ # File-based TanStack Router pages (__root, rooms, settings, etc.)
│ ├── lib/ # API clients, helpers, demo mock state, and utility functions
│ ├── hooks/ # Custom React hooks (theme context, auth hooks)
│ ├── main.tsx # Application entry point
│ └── index.css # Global CSS & Tailwind design tokens
├── public/ # Static assets & icons
└── vite.config.ts # Vite & plugin configurations
- Node.js >= 18.0.0
- npm >= 9.0.0
-
Clone the repository:
git clone https://github.com/SAFAL-TIWARI/Hackord.git cd Hackord-Frontend -
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.envfile in the root directory (optional for local API endpoint customization):VITE_API_URL=http://localhost:3000/api
-
Start Development Server:
npm run dev
Open http://localhost:5173 in your browser.
npm run dev— Launches local development server with HMR.npm run build— Builds production-ready static assets.npm run preview— Locally previews the built production output.npm run lint— Runs ESLint checks.
Built with ❤️ for hackers & builders everywhere.