fleshing out the frontend

[adarshm11]

Frontend Scaffold + Assessment Management Pages

The frontend has a basic Home.tsx and Assessment.tsx with manual page state switching in App.tsx. It lacks routing, data fetching, styling framework, and all recruiter-facing pages.

---

Already done

• Vite + React + TypeScript project initialized in frontend/
• Home.tsx — basic landing page with name input
• Assessment.tsx — placeholder two-column layout with textarea for code
• App.css — basic responsive styles
• Dockerfiles for dev and prod

Remaining work

Scaffold

• Install dependencies: react-router-dom, tailwindcss (+ postcss/autoprefixer), @tanstack/react-query
• Set up Tailwind config and base styles (replace or augment App.css)
• Set up React Router in main.tsx with route definitions (replace the manual page state in App.tsx)
• Create a layout component with sidebar for recruiter pages
• Create API client (src/api/client.ts) — thin fetch wrapper pointed at VITE_API_URL (defaults to http://localhost:6767/api)
• Set up React Query provider in main.tsx

Assessment list page (/assessments)

• Fetch assessments from GET /api/assessments via React Query
• Display title, duration, created date per assessment
• "Create Assessment" button navigating to /assessments/new
• Empty state and loading state

Assessment editor page (/assessments/new and /assessments/:id)

• Form for title, description, duration_minutes
• Save button -> POST /api/assessments (create) or update
• After creation, redirect to /assessments/:id
• Display list of questions for this assessment

Question creation form

• "Add Question" button on assessment editor
• Type selector: MCQ Single, MCQ Multi, Short Answer, Code
• MCQ: prompt, dynamic options list (add/remove), correct answer selector, score
• Short answer: prompt, correct answer, score
• Code: prompt, language selector, score
• Submit -> POST /api/assessments/:id/questions

Test case management (code questions)

• UI to add test cases: input, expected output, is_hidden toggle, score
• Submit -> POST /api/assessments/:id/questions/:qid/test-cases
• Display existing test cases

Note: this can be implemented, but not fully tested until #19 is completed.