GitHub - monika0712/interview-preparation-portal: A modern MERN Stack Interview Preparation Portal featuring MCQs, coding questions, mock tests, bookmarks, progress tracking, and an admin dashboard.

🚀 Try the Live Demo

📊 At a Glance

🌐 Live URL
Netlify

📦 Questions

1,151

📚 Subjects

12

🏢 Companies Tagged

10

⚙️ Grading
Server-side only

📖 Table of Contents

🧭 Getting to know it

📌 Overview · 📸 Screenshots · ✨ Features · 🔄 How It Works

🛠️ Building it

🧰 Tech Stack · 📁 Project Structure · 🚀 Getting Started · 📡 API Reference

🌍 Beyond the code

☁️ Deployment · 🛠 Skills Demonstrated · 🗺️ Roadmap · 🤝 Contributing · 📬 Contact

📌 Overview

Prep Portal helps developers prepare for technical interviews without juggling five different tools.

Instead of scattered notes, random PDFs, and untracked practice, it brings everything — a 1,151-question bank, mock exams, bookmarks, and progress tracking — into one clean dashboard.

Built solo as a full-stack MERN project, covering the entire flow from JWT authentication and REST API design to a server-authoritative grading engine and a responsive React frontend.

⬆ back to top

📸 Screenshots

🏠 Landing Page

🔐 Login & Register

_Login

_Register

Sign in with an existing account, or register a new one in seconds — no email verification needed.

📊 Dashboard

_{Overview — live totals & completion ring}

_{Progress & Activity — per-subject chart, difficulty split, recent activity}

Live totals, per-subject progress, difficulty breakdown, and recent activity — all on one screen, no clicking required.

📚 Subjects & 📝 Question Bank

_{Subjects — 12 subjects, 1,151 questions total}

_{Question Bank — search, filter & bookmark}

🎯 Filter by difficulty — Easy · Medium · Hard

_{🟢 Easy}

_{🟡 Medium}

_{🔴 Hard}

🧪 Mock Test — Setup → Live Exam → Server-Graded Result

_Setup

_{Live Exam}

_{Result & Paper Review}

🔖 Bookmarks

👤 Profile

Bio, skills, institute, and experience — all editable inline, no separate settings page.

🛡️ Admin Panel

_{Manage Users — promote, demote & remove accounts}

_{Manage Questions — moderate the 1,151-question bank}

⬆ back to top

✨ Features

🔐 Authentication & Accounts

✅ JWT-based register / login / logout

✅ Forgot-password via a security question — no email service needed

✅ Role-based access (user / admin)

📊 Dashboard

✅ Live totals: 1,151 questions, reviewed count, bookmarks, 12 subjects

✅ Progress-by-subject chart and an overall completion ring

✅ Difficulty spread and a recent-activity feed

📚 Question Bank

✅ Search, filter by subject / difficulty / company

✅ Bookmark tricky questions, mark them reviewed

✅ 12 subjects · 10 tagged companies

📝 Mock Tests

✅ Pick subject, question count & duration

✅ Real MCQ exam, graded server-side

✅ Full paper review: your answer vs. correct answer, per question

✅ Complete test history with score, subject, and duration logged

👤 Profile & Admin

✅ Personal profile: bio, skills, institute, experience

✅ Admin panel: manage users (promote / demote / remove) and moderate questions

⚡ Built for Zero Cost

✅ No paid APIs, no email service, no license fees

✅ Runs entirely on free tiers

🏢 Companies tagged on questions

📚 Question distribution across all 12 subjects — 1,151 total

Subject	Questions	Subject	Questions	Subject	Questions
🌐 HTML	154	☕ Java	141	📜 JavaScript	132
🎨 CSS	123	🅱️ Bootstrap	115	🚂 Express.js	98
🍃 MongoDB	97	🟢 Node.js	86	🅰️ Angular	71
⚛️ React	57	🗄️ SQL	52	🍃 Spring Boot	25

🎯 Difficulty spread

Level	Distribution	Count
🟢 Easy	`████████████████████████░░░░░░░░░░░░░░░░` 59%	676
🟡 Medium	`███████████████░░░░░░░░░░░░░░░░░░░░░░░░░` 36%	417
🔴 Hard	`██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░` 5%	58

⬆ back to top

🔄 How It Works

User journey, end to end:

flowchart LR
    A([Visitor]) --> B[Register / Login]
    B --> C[Dashboard]
    C --> D[Browse Question Bank]
    C --> E[Start Mock Test]
    D --> F[Bookmark / Mark Reviewed]
    E --> G[Server Grades Answers]
    G --> H[Full Paper Review]
    F --> C
    H --> C
    C --> I{Is Admin?}
    I -- Yes --> J[Manage Users & Questions]
    I -- No --> K[Edit Own Profile]

Mock test grading — why the server is always the source of truth:

sequenceDiagram
    participant U as User (Browser)
    participant F as React Frontend
    participant A as Express API
    participant DB as MongoDB

    U->>F: Pick subject, count, duration
    F->>A: GET /api/mocktest/start
    A->>DB: Fetch random MCQ-ready questions
    DB-->>A: Questions (options only, no answers sent)
    A-->>F: Question set
    U->>F: Answer questions, submit
    F->>A: POST /api/mocktest/submit (answers)
    A->>DB: Compare answers to stored correct options
    DB-->>A: Correct answers
    A-->>F: Score + full paper review
    F-->>U: Result screen with every Q&A

⬆ back to top

🧰 Tech Stack

Layer	Technologies
🎨 Frontend	React (Vite), React Router, Redux Toolkit, Axios, Formik, Yup, CSS Modules, React Icons
⚙️ Backend	Node.js, Express.js, JWT, bcryptjs
🗄️ Database	MongoDB + Mongoose (local or MongoDB Atlas free tier)
☁️ Deployment	Frontend → Netlify · Backend → Render · Database → MongoDB Atlas

⬆ back to top

📁 Project Structure

interview-prep-portal/
├── backend/
│   ├── config/db.js
│   ├── data/               # 12 question banks (React, Node, Java, SQL, Spring Boot, ...)
│   ├── models/             # User, Question, Subject, Bookmark, Result
│   ├── middleware/         # auth (JWT), admin
│   ├── controllers/
│   ├── routes/
│   ├── utils/              # generateToken, seedData
│   └── server.js
├── frontend/
│   └── src/
│       ├── app/store.js
│       ├── api/axiosInstance.js
│       ├── features/       # auth, dashboard, questions, subjects, bookmarks, mocktest, profile, admin
│       └── components/     # Navbar, Sidebar, Layout, ProtectedRoute
└── screenshots/            # README preview images

⬆ back to top

🚀 Getting Started

✅ Prerequisites

Node.js 18+
MongoDB running locally, or a free MongoDB Atlas cluster

1️⃣ Clone the repo

git clone https://github.com/monika0712/interview-preparation-portal.git
cd interview-preparation-portal

2️⃣ Backend setup

cd backend
npm install
cp .env.example .env

Edit .env with your own values:

PORT=5000
MONGO_URI=mongodb://localhost:27017/interview_prep
JWT_SECRET=change_this_to_a_long_random_secret
JWT_EXPIRE=7d
CLIENT_URL=http://localhost:5173

Seed the database with 12 subjects, 1,151 interview questions, and a demo admin account:

npm run seed
npm run dev

The API runs at http://localhost:5000/api.

3️⃣ Frontend setup

In a new terminal:

cd frontend
npm install
cp .env.example .env
npm run dev

The app runs at http://localhost:5173.

4️⃣ Log in

Account	Email	Password
Demo admin	`demo@interviewprep.com`	`demo1234`

Or register your own account at /register — you'll still see all seeded questions, but your personal reviewed/bookmark counts start at zero.

🔧 Promote your own account to admin (optional)

Run in mongosh:

use interview_prep
db.users.updateOne({ email: "you@example.com" }, { $set: { role: "admin" } })

Log out and back in — you'll see the Admin link in the sidebar.

⬆ back to top

📡 API Reference

🔐 Auth

Method	Endpoint	Description
	`/api/auth/register`	Create account
	`/api/auth/login`	Log in, returns JWT
	`/api/auth/forgot-password/question`	Get security question
	`/api/auth/forgot-password/reset`	Reset password

📚 Questions & Bookmarks

Method	Endpoint	Description
	`/api/questions`	List / search / filter questions
	`/api/questions`	Create question
	`/api/questions/:id`	Update question
	`/api/questions/:id`	Delete question
	`/api/questions/:id/solve`	Toggle reviewed
	`/api/bookmarks`	List / toggle bookmarks
	`/api/subjects`	List subjects

📝 Mock Test & Dashboard

Method	Endpoint	Description
	`/api/mocktest/start`	Get random questions for a test
	`/api/mocktest/submit`	Submit test result (server-graded)
	`/api/dashboard`	Dashboard stats

👤 Profile & Admin

Method	Endpoint	Description
	`/api/profile`	View / update profile
	`/api/admin/users`	List all users
	`/api/admin/users/:id/role`	Promote / demote a user
	`/api/admin/users/:id`	Remove a user
	`/api/admin/questions/:id`	Remove a question

⬆ back to top

☁️ Deployment (all free tiers)

Service	Where	Notes
🎨 Frontend	Netlify	Build command: `npm run build`, publish dir: `dist`
⚙️ Backend	Render	Root: `backend`, build: `npm install`, start: `npm start`
🗄️ Database	MongoDB Atlas	Free M0 cluster

⬆ back to top

🛠 Skills Demonstrated

🎨 Frontend

Component-driven React + Vite
Redux Toolkit for global state
Formik + Yup form validation
Protected, role-based routing

⚙️ Backend

RESTful API design in Express
JWT auth & middleware
Server-authoritative grading logic
Mongoose schema design across 12 question banks

🏗️ Engineering

Secrets kept out of Git via .env
Zero-cost deployment pipeline
Clean, incremental Git history

⬆ back to top

🗺️ Roadmap

Item	Status
Pagination for the 1,151-question list
Recharts-powered analytics on the progress tracker
Profile photo upload (Cloudinary free tier)
Per-question discussion threads

⬆ back to top

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Step	Action
1️⃣	Fork the project
2️⃣	Create your feature branch — `git checkout -b feature/amazing-feature`
3️⃣	Commit your changes — `git commit -m 'Add amazing feature'`
4️⃣	Push to the branch — `git push origin feature/amazing-feature`
5️⃣	Open a Pull Request

⬆ back to top

📬 Contact

Monika Patil

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github/workflows		.github/workflows
backend		backend
frontend		frontend
screenshots		screenshots
.gitignore		.gitignore
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

🚀 Try the Live Demo

📊 At a Glance

1,151

12

10

📖 Table of Contents

📌 Overview

📸 Screenshots

🏠 Landing Page

🔐 Login & Register

📊 Dashboard

📚 Subjects & 📝 Question Bank

🧪 Mock Test — Setup → Live Exam → Server-Graded Result

🔖 Bookmarks

👤 Profile

🛡️ Admin Panel

✨ Features

🔐 Authentication & Accounts

📊 Dashboard

📚 Question Bank

📝 Mock Tests

👤 Profile & Admin

⚡ Built for Zero Cost

🔄 How It Works

🧰 Tech Stack

📁 Project Structure

🚀 Getting Started

✅ Prerequisites

1️⃣ Clone the repo

2️⃣ Backend setup

3️⃣ Frontend setup

4️⃣ Log in

🔧 Promote your own account to admin (optional)

📡 API Reference

🔐 Auth

📚 Questions & Bookmarks

📝 Mock Test & Dashboard

👤 Profile & Admin

☁️ Deployment (all free tiers)

🛠 Skills Demonstrated

🗺️ Roadmap

🤝 Contributing

📬 Contact

⭐ If this project helped you, consider giving it a star — it really helps!

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages