StudyTrack Pro is a modern, full-stack web application designed to help students and professionals track their study hours, analyze their productivity, and stay motivated through gamification.
(See screenshots/screenshot_eng.png for the preview!)
- Visual Analytics: Interactive bar and pie charts to visualize study trends.
- Enhanced Chart UI: Responsive charts with a split-view Subject Distribution list for better readability.
- Stats Overview: Quick summary of total hours, tasks completed, and current streak.
- Activity History: Detailed log of all study sessions with filtering options.
- Dynamic Backgrounds: The application atmosphere adapts to real-time weather conditions (Sunny ☀️, Rainy 🌧️, Snowy ❄️).
- Live Widget: Dashboard displays current weather, temperature, and location.
- Built-in Timer: A dedicated focus timer to track live study sessions.
- Real-time Logging: Automatically creates a record when the timer stops.
- Leaderboard: Compete with other users based on study time (XP).
- Ranking System: Earn ranks and badges as you study more.
- Dynamic Scoring: 1 minute of study = 10 XP.
- Personalized Profile: View your level, join date, and stats.
- Custom Avatar: Upload your own profile picture (supports crop & resize).
- Edit Details: Easily update your name, email, and password.
- Multi-language Support: Fully localized in English and Japanese.
- Integrated Toggle: Seamlessly switch languages from the Login/Register screens.
- Persistent Choice: Remembers your language preference automatically.
- Premium Aesthetic: A warm, prestigious Golden/Amber theme with a soft cream background.
- Animated Experience: Login & Register pages feature a dynamic, moving gradient with floating geometric particles.
- Modern Interactions: Buttons feature a stylish Blue-Purple gradient for high contrast and modern feel.
- Daily Inspiration: Displays a new motivational quote on the Dashboard.
- Hybrid System: Fetches from a live API (English) or uses a curated offline library (Japanese).
- Frontend: React.js (Vite), Tailwind CSS v4, Framer Motion (Animations), Recharts (Charts), Lucide React (Icons).
- Internationalization: i18next, react-i18next, i18next-browser-languagedetector.
- Backend: Node.js, Express.js.
- Database: MySQL.
- Authentication: JWT (JSON Web Tokens), BCrypt (Password Hashing).
- File Handling: Multer (Image Uploads).
Follow these steps to run the project locally.
- Node.js installed.
- MySQL installed and running (e.g., via XAMPP).
- Open your MySQL client (e.g., phpMyAdmin).
- Create a new database named
studytrack_db. - Import the
database/schema.sqlfile to create the tables.
cd backend
npm install
# Create a .env file with your DB credentials & JWT_SECRET
node server.jscd frontend
npm install
npm run devThe app should now be running at http://localhost:5173.
studytrack-pro/
├── backend/ # Express API & Database Logic
│ ├── controllers/ # API Controllers
│ ├── routes/ # API Routes
│ └── uploads/ # User uploaded images
├── frontend/ # React Application
│ ├── src/
│ │ ├── components/ # Reusable UI Components
│ │ ├── pages/ # Main Application Pages
│ │ └── api/ # API Integration
│ └── index.css # Tailwind Imports
├── database/ # SQL Schema
├── design/ # Architecture & Planning Docs
└── screenshots/ # Project Images
- Passwords are hashed using bcrypt.
- API endpoints are protected using JWT.
- File uploads are validated and renamed for security.
Feel free to fork this repository and submit pull requests. Any improvements are welcome!
Happy Studying! 📚