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.}