Interview Preparation App

An AI-powered interview preparation platform that helps users practice technical interviews through personalized question generation, real-time feedback, and concept explanations.

Features

User Management

• Secure Authentication: JWT-based user authentication with password hashing
• Profile Management: Upload profile pictures and manage user information
• Session Tracking: Keep track of interview preparation sessions

AI-Powered Interview Practice

• Customized Question Generation: Generate interview questions based on:
  • Job role (e.g., Frontend Developer, Backend Engineer)
  • Years of experience
  • Specific topics to focus on
• Detailed Answers: Each question comes with comprehensive, beginner-friendly answers
• Concept Explanations: Get in-depth explanations for any interview question
• Code Examples: Answers include relevant code snippets where applicable

Session Management

• Create Interview Sessions: Set up practice sessions with specific parameters
• Question Pinning: Mark important questions for later review
• Notes: Add personal notes to questions
• Progress Tracking: Monitor your interview preparation progress

User Interface

• Responsive Design: Works seamlessly on desktop and mobile devices
• Modern UI: Clean, intuitive interface built with React
• Real-time Notifications: Toast notifications for user actions
• Markdown Support: Rich text rendering for answers and explanations

Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JSON Web Tokens (JWT) with bcrypt password hashing
• AI Integration: Google Generative AI
• File Uploads: Multer for profile image handling
• CORS: Cross-origin resource sharing support

Frontend

• Framework: React 19
• Build Tool: Vite
• Routing: React Router DOM
• HTTP Client: Axios
• Styling: Custom CSS with Framer Motion animations
• Markdown Rendering: React Markdown with syntax highlighting
• Notifications: React Hot Toast
• Date Handling: Moment.js

Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v16 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn package manager

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd interview-app

2. Backend Setup

   cd backend
   npm install

3. Frontend Setup

   cd ../frontend/interview-prep-app
   npm install

Environment Configuration

Backend Environment Variables

Create a .env file in the backend directory with the following variables:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/interview-app
JWT_SECRET=your-super-secret-jwt-key
GOOGLE_API_KEY=your-google-generative-ai-api-key

Frontend Environment Variables

Create a .env file in the frontend/interview-prep-app directory:

VITE_API_BASE_URL=http://localhost:5000/api

Running the Application

1. Start MongoDB Make sure MongoDB is running on your system.

2. Start the Backend Server

   cd backend
   npm run dev

   The server will start on http://localhost:5000

3. Start the Frontend Development Server

   cd frontend/interview-prep-app
   npm run dev

   The app will be available at http://localhost:5173

Usage

1. Sign Up/Login: Create an account or log in to your existing account
2. Dashboard: View your interview preparation sessions
3. Create Session: Set up a new practice session by specifying:
   • Job role
   • Years of experience
   • Topics to focus on
4. Generate Questions: Use AI to generate personalized interview questions
5. Practice: Answer questions and review provided answers
6. Get Explanations: Request detailed explanations for complex concepts
7. Track Progress: Pin important questions and add notes for review

🏗️ Project Structure

interview-app/
├── backend/
│   ├── config/
│   │   └── db.js                 # Database connection
│   ├── controllers/
│   │   ├── aiController.js       # AI question/explanation generation
│   │   ├── authController.js     # Authentication logic
│   │   ├── questionController.js # Question management
│   │   └── sessionController.js  # Session management
│   ├── middlewares/
│   │   ├── authMiddleware.js     # JWT authentication middleware
│   │   └── uploadMiddleware.js   # File upload handling
│   ├── models/
│   │   ├── Question.js           # Question schema
│   │   ├── Session.js            # Session schema
│   │   └── User.js               # User schema
│   ├── routes/
│   │   ├── authRoutes.js         # Authentication routes
│   │   ├── questionRoutes.js     # Question CRUD routes
│   │   └── sessionRoutes.js      # Session CRUD routes
│   ├── uploads/                  # User uploaded files
│   ├── utils/
│   │   └── prompts.js            # AI prompt templates
│   ├── package.json
│   └── server.js                 # Main server file
└── frontend/
    └── interview-prep-app/
        ├── public/
        ├── src/
        │   ├── components/        # Reusable UI components
        │   ├── context/           # React context providers
        │   ├── pages/             # Page components
        │   ├── utils/             # Utility functions
        │   ├── App.jsx            # Main app component
        │   └── main.jsx           # App entry point
        ├── package.json
        └── vite.config.js

🔌 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login

Sessions

• GET /api/sessions - Get user's sessions
• POST /api/sessions - Create new session
• PUT /api/sessions/:id - Update session
• DELETE /api/sessions/:id - Delete session

Questions

• GET /api/questions/:sessionId - Get questions for a session
• POST /api/questions - Create new question
• PUT /api/questions/:id - Update question
• DELETE /api/questions/:id - Delete question

AI Features

• POST /api/ai/generate-questions - Generate interview questions
• POST /api/ai/generate-explanation - Generate concept explanation