Feature/question panel

[piyushaa20]

Added question panel with DB + form support

• Load questions from MongoDB
• Create questions via admin panel
• Use in solo and peer interview modes
• Real-time sync between users

Summary by CodeRabbit

• New Features

  • Added question management system with filtering by difficulty and tags; users can select or randomize questions.
  • Introduced admin panel for creating, viewing, and managing questions.
  • Integrated question panel into solo and peer interview modes.
  • Added real-time question synchronization in collaborative sessions.
  • Implemented automatic logout on session expiration.

• Chores

  • Updated Tailwind CSS dependencies and configuration.
  • Enhanced socket connection logging and error handling.
  • Extended CORS support for additional HTTP methods.

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: a5b2ac97-a882-4554-82fd-2a62dbcbde9e

📥 Commits

Reviewing files that changed from the base of the PR and between 34cc262 and 90dfc97.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• backend/index.js
• frontend/package.json

🚧 Files skipped from review as they are similar to previous changes (2)

• backend/index.js
• frontend/package.json

---

📝 Walkthrough

Walkthrough

This PR introduces a question management system with CRUD operations, backend seeding, and real-time synchronization. Changes include new Express routes for questions, a database seeding script, a reusable QuestionPanel component for question selection, an admin panel for creating questions, socket enhancements for question synchronization, and Tailwind CSS configuration updates.

Changes

Cohort / File(s)	Summary
Backend Routes & Initialization backend/index.js, backend/routes/question.js	Updated CORS configuration to permit PUT and DELETE methods; added new question routes module with POST /run (code execution), POST / (create), GET / (list with optional difficulty/tag filters), GET /random (random selection), GET /:id (fetch by id), and DELETE /:id (delete) endpoints. All routes include error handling returning HTTP 500 with { error: err.message }.
Database Seeding backend/seed/questions.seed.js	Added seed script that connects to MongoDB, imports the Question model, deletes existing questions, and bulk-inserts a comprehensive set of questions across easy/medium/hard difficulty tiers with tags and starter code for multiple languages.
Socket & Real-time Sync backend/socket/socketHandler.js	Enhanced socket handler with lifecycle and connection logging; updated getUsername to extract display name from email (pre-@ segment); refactored room creation with local variable assignment; added message validation to ignore empty/whitespace content; introduced new question-change event listener to broadcast question updates to room participants; improved error logging in code execution handler.
Frontend Package & Build Config frontend/package.json, frontend/postcss.config.js	Moved tailwindcss to devDependencies and added @tailwindcss/postcss, postcss, and autoprefixer; updated PostCSS config to use @tailwindcss/postcss plugin instead of tailwindcss.
Frontend Auth & Routing frontend/src/App.jsx, frontend/src/main.jsx	Added Axios 401 interceptor to handle auth token expiration (removes token, disconnects socket, redirects to login); introduced handleLogout function for centralized logout logic; wrapped existing protected routes with PrivateRoute component; added new /dashboard (protected) and /admin (unprotected) routes; updated import/export formatting.
Frontend Question Selection Component frontend/src/components/InterviewRoom/QuestionPanel.jsx	Added new QuestionPanel component that loads and displays a question bank in a two-column layout with question list and details panel. Tracks selected question, active detail tab, and programming language. In peer mode, emits question-change socket event on host selection and listens for remote updates; parent callback updates both local and remote selections.
Frontend Admin Panel frontend/src/pages/AdminPanel.jsx	Added new admin page for question management with form inputs for title, description, difficulty, and tags (comma-separated). On submit, constructs payload with examples/starter code (empty) and test cases, calls createQuestion, then reloads list. Includes delete functionality for each question with list refresh.
Frontend Page Updates frontend/src/pages/Interview.jsx, frontend/src/pages/SoloInterview.jsx	Refactored both pages to integrate new QuestionPanel component; added question state and setQuestion callback; updated CodeEditor to receive question prop; rewrote UI layout from inline styles to Tailwind flexbox-based structure with top bar and two-column panels; improved socket listener registration/unregistration in Interview; adjusted timer formatting to correctly handle 0 value.
Frontend Services frontend/src/services/questionAPI.js, frontend/src/services/socket.js	Added new questionAPI module exporting async functions for question CRUD operations (getQuestionById, getAllQuestions, getRandomQuestion, createQuestion, deleteQuestion) and code execution (runCode); updated socket client config to use websocket transport only, added isConnecting flag to prevent duplicate connection attempts, and refactored auth token assignment to socket.auth object with connection/error logging.

Sequence Diagram(s)

sequenceDiagram
actor User
participant QPanel as QuestionPanel
participant Socket as Socket.io
participant Server as Backend
participant DB as MongoDB
User->>QPanel: Load peer interview room
QPanel->>DB: getAllQuestions()
DB-->>QPanel: [questions array]
QPanel->>User: Render question list
alt User is host
User->>QPanel: Select question
QPanel->>QPanel: Update local selection
QPanel->>Socket: emit("question-change", {roomId, question})
Socket->>Server: Receive question-change
Server->>Socket: Broadcast to room participants
Socket-->>QPanel: Receive question-change
QPanel->>QPanel: Update selection state
QPanel->>User: Re-render with selected question
else User is guest
Socket-->>QPanel: Receive question-change
QPanel->>QPanel: Update selection state
QPanel->>User: Re-render with selected question
end

Loading

sequenceDiagram
actor Admin
participant Panel as AdminPanel
participant Form as Form Handler
participant API as questionAPI
participant Server as Backend
participant DB as MongoDB
Admin->>Panel: Load admin panel
Panel->>API: getAllQuestions()
API->>Server: GET /api/questions
Server->>DB: Query questions
DB-->>Server: Return questions
Server-->>API: Return data
API-->>Panel: Display question list
Admin->>Form: Fill question form
Admin->>Form: Submit form
Form->>API: createQuestion(payload)
API->>Server: POST /api/questions
Server->>DB: Insert question
DB-->>Server: Return saved document
Server-->>API: Return created question
API-->>Panel: Success
Panel->>Form: Reset form
Panel->>API: Reload getAllQuestions()
API-->>Panel: Update list with new question

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 Hop, skip, jump—the questions now bloom,
Real-time syncing clears the room!
Admin panels, panels galore,
Peer-to-peer interviews soar, soar, soar! 🚀✨

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}