Made with Kleap
Final Year Project · 2025

Track your study. Own your progress.

A full-stack student productivity platform with subjects, study sessions, tasks, attendance, and analytics — designed for clean code, easy vivas, and real-world use.

Explore Architecture → View Features
11
Pages
15+
API Routes
5
Collections
JWT
Auth
Dashboard Preview
Welcome back, Student
Total Hours
47.5h
↑ 12% this week
Daily Streak
14 days
Keep going!
Tasks Done
28/35
Attendance
92%
Weekly Study Hours +8.2%
Core Features

Everything a student needs.

Built with beginner-friendly code that's easy to explain, demo, and extend.

User Authentication

JWT auth with bcrypt password hashing. Protected routes, secure sessions, and profile management.

Smart Dashboard

Real-time stats: study hours, daily streak, tasks completed, attendance rate — all in one view.

Subject Management

Create subjects with color tags, track total hours and progress percentage per subject.

Study Session Tracker

Start, pause, and stop sessions. Save notes, view history, and measure productivity.

Tasks & Goals

Set priorities, due dates, and filters. Mark complete and stay on top of deadlines.

Attendance Tracker

Log classes, mark attendance, and monitor your attendance percentage per subject.

App Pages

11 routes, fully routed.

Public, protected, and authenticated flows — all wired with React Router.

Landing Public
Login Public
Signup Public
Dashboard Protected
Subjects Protected
Study Sessions Protected
Tasks Protected
Attendance Protected
Analytics Protected
Profile Protected
Settings Protected
Project Architecture

Clean folder structure.

MVC pattern on the backend. Component-based React on the frontend. Easy to navigate and explain.

frontend/

src/
├── components/
│   ├── Navbar/  Sidebar/  Cards/
│   ├── Charts/  Forms/  Loader/
├── pages/
│   ├── Landing/  Login/  Signup/
│   ├── Dashboard/  Subjects/
│   ├── Sessions/  Tasks/  Attendance/
│   ├── Analytics/  Profile/  Settings/
├── context/  services/  routes/
├── hooks/  utils/  App.jsx  main.jsx

backend/

├── controllers/   # Business logic
├── models/        # Mongoose schemas
├── routes/        # Express routes
├── middleware/    # JWT + validation
├── config/        # DB connection
├── utils/         # Helpers
└── server.js      # Entry point

MongoDB Collections

Users
name, email, password, profileImage, createdAt
Subjects
userId, subjectName, description, color, totalHours, progress
StudySessions
userId, subjectId, duration, notes, sessionDate
Tasks
userId, title, description, priority, dueDate, completed
Attendance
userId, subjectId, totalClasses, attendedClasses
+ index.js
Express + Mongoose bootstrap
REST API

15 endpoints, fully tested.

JWT-protected routes, validation, and proper error handling on every endpoint.

Method
Endpoint
Description
POST
/api/auth/register
Register new user
POST
/api/auth/login
Login + JWT token
GET
/api/auth/me
Current user
GET
/api/subjects
List subjects
POST
/api/subjects
Create subject
PUT
/api/subjects/:id
Update subject
DELETE
/api/subjects/:id
Delete subject
GET
/api/sessions
List sessions
POST
/api/sessions
Create session
GET
/api/tasks
List tasks
POST
/api/tasks
Create task
PUT
/api/tasks/:id
Update task
DELETE
/api/tasks/:id
Delete task
GET
/api/attendance
List attendance
POST
/api/attendance
Mark attendance
Documentation

Run it on Replit in 3 minutes.

Step-by-step setup for your final year submission.

1 Replit Setup

  1. ›Create a new Repl → Node.js template
  2. ›Add frontend + backend folders in the root
  3. ›Add a .replit config to run both servers
  4. ›Set the run command to node backend/server.js

2 MongoDB Atlas

  1. ›Sign up at mongodb.com/atlas (free tier)
  2. ›Create a cluster + database user
  3. ›Whitelist IP: 0.0.0.0/0 (for Replit)
  4. ›Copy connection string → paste in MONGO_URI

3 Environment Variables 

PORT=5000
MONGO_URI=mongodb+srv://...
JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173

4 Viva Talking Points

  • ●JWT + bcrypt for security
  • ●MVC architecture pattern
  • ●Recharts for data visualization
  • ●localStorage for dark mode persistence

Ready to ship your project.

A complete MERN-stack study tracker with clean code, full features, and viva-ready architecture.

View Project ↑ Read the Docs
React + Vite
Node + Express
MongoDB Atlas
Tailwind CSS
Recharts