📚 Smart Study Planner & Analytics Dashboard
A full-stack JavaScript application that allows users to log study sessions, persist data on a backend server, and visualize productivity using interactive charts.
🖼️ Demo & Screenshots
Dashboard UI + Study Analytics Chart
✨ Features
-
Log study sessions by subject and duration
-
Persistent backend storage using Node.js & Express
-
RESTful API for session management
-
Dynamic data visualization using Chart.js
-
Modern, responsive dark-themed UI
-
Asynchronous frontend-backend communication
-
Modular, scalable project architecture
architecture
🛠️ Tech Stack
Frontend
-
HTML5
-
CSS3 (custom dark UI)
-
Vanilla JavaScript (ES6+)
-
Chart.js (data visualization)
-
Backend
-
Node.js
-
Express.js
-
Data Storage
-
JSON file-based persistence
-
Tools
-
VS Code
-
npm
-
Git & GitHub
🧱 Project Architecture
smart-study-planner/ ├── server/ │ ├── server.js # Express server entry point │ ├── routes.js # REST API routes │ ├── utils/ │ │ └── fileHandler.js │ └── data/ │ └── sessions.json │ ├── client/ │ ├── index.html # UI layout │ ├── styles.css # Modern dark UI styling │ └── app.js # Frontend logic & Chart.js │ ├── screenshots/ ├── package.json └── README.md
🔄 How It Works
-
User enters a subject and study duration.
-
Frontend sends data to the backend using a POST request.
-
Express server stores the session in a JSON file.
-
Frontend fetches updated data asynchronously.
-
Chart.js aggregates and visualizes study time by subject.
-
UI updates dynamically without page reloads.
Prerequisites
-
Node.js (LTS recommended)
-
npm
Setup Instructions cd smart-study-planner npm install npm start
Then open your browser at:
🔌 API Endpoints Method Endpoint Description GET /api/sessions Retrieve all study sessions POST /api/sessions Add a new study session
📊 Data Visualization
Bar chart showing total study time per subject
Automatically updates when new sessions are added
Uses Chart.js with dynamic data aggregation