📚 Exam Planner – Study Tracker with Syllabus Breakdown & Countdown Timer

A simple and effective exam preparation planner built with Next.js, designed to help me track syllabus completion, practice cycles, topic difficulty, and stay aware of upcoming exams through a live countdown timer. The goal of this project is to create a clean, minimal, and practical tool that supports focused and disciplined study habits.

---

🚀 Features

✅ 1. Real-Time Exam Countdown

A prominent countdown widget (Days · Hours · Minutes · Seconds) that keeps the exam date visible at all times, helping maintain urgency and planning discipline.

✅ 2. Subject → Module → Topic Structure

Fully structured syllabus breakdown:

• Each Subject contains multiple Modules
• Each Module contains several Topics
• Clean UI for drilling down into details

✅ 3. Topic-Level Tracking

Each topic includes:

• ✔️ Completion checkbox
• 🎯 Difficulty tag (easy / normal / hard)
• 🔁 Practice counter (+ / –)
  This allows fine-grained progress tracking beyond just “done / not done.”

✅ 4. Module Priority

Mark modules as:

• Low
• Medium
• High
  This helps organize what to study first.

✅ 5. Cloud Sync with Firebase Firestore

All syllabus progress, priorities, practice counts, and exam date are stored securely in Firestore so your data persists across devices.

✅ 6. Clean, Dark-Mode UI

Uses Tailwind CSS + custom components for a focused and clutter-free studying experience. The black theme helps reduce eye strain.

✅ 7. Simple Access Lock

A basic password gate prevents accidental edits or unauthorized access to your planner.

---

🛠️ Tech Stack

Frontend

• Next.js (App Router)
• React
• Tailwind CSS

Backend / Cloud

• Firebase Firestore
• Firebase SDK
• Environment-based config (.env.local)

Other

• Custom hooks and utilities for syllabus transforms
• Modular component-based architecture
• Stateless UI + server-side Firestore sync

---

📸 Screenshots

---

🗂️ Project Structure (Simplified)

/app
/exam-planner
page.jsx
/components
ModuleCard.jsx
SubjectCard.jsx
TopicRow.jsx
/firebase
api.js
config.js
/utils
transformSyllabusData.js
public/
styles/

---

⚙️ Getting Started

1. Clone the repository

git clone https://github.com/your-username/exam-planner.git
cd exam-planner

2. Install dependencies

npm install

3. Configure Firebase

Create a .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY=xxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxx
NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxxx
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxxx
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxx
NEXT_PUBLIC_FIREBASE_APP_ID=xxxx

4. Run the development server

npm run dev

Open the project at:

http://localhost:3000

Use the configured password to access the planner.

---

🎯 Purpose of the Project

I built this project mainly for myself—to track my syllabus in a simple way and stay consistent during exams. None of the existing apps fit how I study, so I created my own tool. While it started as a personal productivity project, it also became a good way to practice real development using Next.js and Firestore.

---

📌 Future Improvements

• Multiple exam profiles
• Export progress as PDF
• Email reminders
• Light mode toggle
• Drag-and-drop topic reordering