HackDay Frontend

React + TypeScript frontend for HackDay Hackathon Management Platform.

Tech Stack

• React 18
• TypeScript
• React Router v6
• Axios for API calls
• Tailwind CSS for styling

Setup Instructions

1. Install Dependencies

npm install

2. Environment Configuration

Copy .env.example to .env:

cp .env.example .env

Update the API URL:

REACT_APP_API_URL=http://localhost:5000/api

For production, set this to your deployed backend URL.

3. Run Development Server

npm start

The app will open at http://localhost:3000

Project Structure

src/
├── components/       # Reusable components
│   ├── Layout.tsx
│   └── ProtectedRoute.tsx
├── context/          # React Context (Auth)
│   └── AuthContext.tsx
├── pages/            # Page components
│   ├── Login.tsx
│   ├── admin/
│   │   ├── Dashboard.tsx
│   │   └── Users.tsx
│   ├── team/
│   │   ├── Dashboard.tsx
│   │   └── Submit.tsx
│   └── judge/
│       └── Dashboard.tsx
├── services/         # API service layer
│   └── api.ts
├── types/            # TypeScript types
│   └── index.ts
├── App.tsx           # Main app component with routing
├── index.tsx         # React entry point
└── index.css         # Global styles (Tailwind)

Available Routes

Public

• /login - Login page

Admin (Role: ADMIN)

• /admin/dashboard - Admin dashboard with system controls
• /admin/users - User management (create teams & judges)
• /admin/problems - Problem statements CRUD
• /admin/teams - View all teams and progress
• /admin/leaderboard - Master leaderboard

Team (Role: TEAM)

• /team/dashboard - Team dashboard with track selection
• /team/project - View project details
• /team/submit - Submit project
• /team/leaderboard - Public leaderboard (if visible)

Judge (Role: JUDGE)

• /judge/dashboard - Judge dashboard with team queue
• /judge/teams - View teams and projects
• /judge/my-scores - View submitted scores

Features

Authentication

• JWT-based auth with HTTP-only cookies and localStorage fallback
• Role-based access control (RBAC)
• Auto-redirect based on user role

Admin Features

• Create team and judge accounts
• Manage problem statements for Agentic AI track
• Toggle submissions open/closed
• Toggle leaderboard visibility
• View all teams and their progress
• Master leaderboard with full scores

Team Features

• Track selection onboarding (Agentic AI vs Open Innovation)
• Custom tech stack and tags for Open Innovation
• Project submission with GitHub, demo, PPT, and video links
• View own rank and score breakdown
• Access to public leaderboard (when enabled)

Judge Features

• View all submitted teams
• Access detailed project pages
• Score teams based on criteria
• Update scores with feedback
• View personal scoring history

Styling

The app uses a "hackathon-dark" aesthetic with:

• Dark background (#0f172a)
• Primary color: Cyan/Blue (#0ea5e9)
• Card-based UI with subtle borders
• Smooth transitions and hover effects
• Responsive design for mobile and desktop

Deployment to Vercel

Option 1: GitHub Integration (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Set environment variable: REACT_APP_API_URL
4. Deploy!

Option 2: Vercel CLI

npm install -g vercel
vercel login
vercel

Important: Environment Variables

Set in Vercel dashboard or .env.production:

REACT_APP_API_URL=https://your-backend.railway.app/api

Build for Production

npm run build

Creates optimized production build in build/ directory.

Troubleshooting

CORS Errors

Ensure backend FRONTEND_URL matches your deployed frontend URL.

404 on Refresh

For Vercel, the vercel.json config handles SPA routing. For other hosts, configure redirects to /index.html.

API Connection Failed

Check that REACT_APP_API_URL is correct and backend is running.