StudyTracker is a full-stack web application designed to help students monitor their study habits, track time across different subjects, and gain insights through interactive data visualizations. The application serves as a comprehensive study analytics platform that enables users to:
- Track Study Sessions: Record detailed study sessions with timing, subjects, methods, and personal ratings
- Visualize Progress: View interactive charts and graphs of study patterns and trends
- Set and Monitor Goals: Establish daily and weekly study targets with progress tracking
- Analyze Performance: Identify peak productivity times, effective study methods, and subject focus areas
- Manage Academic Subjects: Organize studies by courses with custom colors and individual goal setting
This project demonstrates modern full-stack web development practices while providing a practical tool for academic success. Built with React, Node.js, Express, MongoDB, and D3.js, it showcases comprehensive implementation of contemporary web technologies.
- User Authentication: Secure registration and login with JWT tokens
- Study Session Tracking: Real-time session timing with detailed metadata
- Subject Management: Organize studies by academic subjects with custom colors and goals
- Analytics Dashboard: Interactive visualizations and progress tracking
- Goal Setting: Personal daily/weekly study time targets with progress monitoring
Main dashboard showing study progress, goals, and today's sessions
- Interactive D3.js Visualizations: Time series charts, pie charts, and analytics graphs
- Responsive Design: Mobile-first design with Material-UI components
- Real-time Session Timer: Start/stop study sessions with automatic logging
- Comprehensive Analytics: Study patterns, effectiveness metrics, and insights
- Data Export: Session summaries and progress reports
Advanced analytics page with D3.js visualizations and study pattern analysis
Session management interface with real-time timer and detailed logging
Subject management with progress tracking and color-coded organization
- Framework: React 18 with functional components and hooks
- UI Library: Material-UI (MUI) for consistent, accessible components
- Routing: React Router v6 for client-side navigation
- State Management: Context API with useReducer for complex state
- Data Visualization: D3.js for interactive charts and graphs
- Forms: React Hook Form for efficient form handling
- HTTP Client: Axios for API communication
- Framework: Express.js with RESTful API design
- Database: MongoDB with Mongoose ODM
- Authentication: JWT tokens with bcrypt password hashing
- Validation: Express-validator for input sanitization
- Security: CORS protection and input validation
- API Documentation: Comprehensive endpoint documentation
- React 18.2.0 - Modern JavaScript framework with hooks and functional components
- Material-UI (MUI) 5.14.0 - Comprehensive React component library for consistent UI design
- D3.js 7.8.0 - Data visualization library for interactive charts and graphs
- React Router DOM 6.8.1 - Client-side routing for single-page application navigation
- React Hook Form 7.45.0 - Performant form library with minimal re-renders
- Node.js with Express 4.18.2 - JavaScript runtime and web framework for RESTful API
- CORS 2.8.5 - Cross-origin resource sharing configuration
- Mock Data System - Simulated backend responses for demonstration purposes
- Nodemon - Automatic server restart during development
- ESLint - JavaScript code quality and consistency checking
- Create React App - Build toolchain and development server
This project comprehensively demonstrates all required CS3744 course topics:
- Component Hierarchy: Clear separation between presentational and container components
- Data Flow: Unidirectional data flow with props and state management
- Component Design: Reusable components (StatCard, LoadingSpinner, D3Charts)
- Form Submissions: Login, registration, session creation with validation
- User Interactions: Button clicks, form inputs, modal dialogs
- Advanced Events: D3.js chart interactions, hover effects, tooltips
- useState: Local component state for UI interactions
- useReducer: Complex state management for sessions and subjects
- Context API: Global authentication state with AuthContext
- Custom Hooks: useApi, useLocalStorage for reusable logic
- Container/Presenter: Separation of logic and presentation
- Higher-Order Components: Authentication wrapper patterns
- Compound Components: Dialog components with multiple parts
- Render Props: Flexible component composition
- Routing Setup: BrowserRouter with nested routes
- Protected Routes: Authentication-based route protection
- Navigation: Programmatic navigation with useNavigate
- Route Parameters: Dynamic routing for sessions and subjects
- API Integration: Custom hooks for data fetching
- Loading States: Comprehensive loading and error handling
- CRUD Operations: Create, read, update, delete functionality
- Real-time Updates: Optimistic updates and cache invalidation
- Line Chart: Study time trends over daily/weekly/monthly periods
- Area Chart: Filled area visualization for better trend visibility
- Tooltips: Hover interactions showing detailed session information
- Responsive Design: Adapts to container size with proper margins
- Dynamic Colors: Subject-specific colors for visual consistency
- Interactive Elements: Hover effects with data highlighting
- Legend: Dynamic legend showing subject names and percentages
- Animations: Smooth transitions and hover animations
- Pattern Recognition: Study method and location effectiveness
- Progress Tracking: Goal achievement visualization
- Comparative Analysis: Subject performance comparisons
- Node.js (v16 or higher) - Download from nodejs.org
- MongoDB (local installation or MongoDB Atlas) - Installation Guide
- Git - Download from git-scm.com
git clone https://github.com/yourusername/studytracker.git
cd studytracker-
Navigate to backend directory:
cd backend -
Install dependencies:
npm install
-
Environment Configuration: Create a
.envfile in the backend directory:PORT=5000 MONGODB_URI=mongodb://localhost:27017/studytracker JWT_SECRET=your_super_secure_jwt_secret_key_here NODE_ENV=development FRONTEND_URL=http://localhost:3000
-
Start the backend server:
npm run dev
✅ Backend server will start on http://localhost:5000
-
Open a new terminal and navigate to frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the frontend development server:
npm start
✅ Application will automatically open at http://localhost:3000
- Open http://localhost:3000 in your browser
- The application will load directly to the Dashboard
- Navigate between pages to explore all features!
Note: Both backend and frontend servers must be running simultaneously for full functionality. The application uses mock data for demonstration purposes, so no database setup is required.
The StudyTracker application demonstrates a comprehensive study analytics platform with sample data pre-loaded for demonstration purposes.
- Dashboard: Overview of study statistics with interactive D3.js visualizations
- Sessions: Study session management with detailed tracking capabilities
- Subjects: Subject organization with progress monitoring and color coding
- Analytics: Advanced analytics with time series charts and pattern analysis
- D3.js Charts: Hover over data points for detailed tooltips and interactions
- Responsive Design: Test the interface on different screen sizes
- Material-UI Components: Consistent design language throughout the application
- Real-time Updates: All interactions demonstrate state management patterns
Video Duration: 1-2 minutes
Video Content Overview:
- User registration and authentication
- Dashboard with real-time analytics
- Study session creation and management
- Interactive D3.js charts and visualizations
- Subject management with progress tracking
- Mobile responsiveness demonstration
POST /api/auth/register - User registration
POST /api/auth/login - User login
GET /api/auth/me - Get current user
PUT /api/auth/goals - Update study goals
GET /api/sessions - List sessions with pagination
POST /api/sessions - Create new session
GET /api/sessions/:id - Get specific session
PUT /api/sessions/:id - Update session
DELETE /api/sessions/:id - Delete session
GET /api/sessions/summary/today - Today's summary
GET /api/subjects - List all subjects
POST /api/subjects - Create new subject
GET /api/subjects/:id - Get specific subject
PUT /api/subjects/:id - Update subject
DELETE /api/subjects/:id - Delete subject
GET /api/subjects/:id/sessions - Get subject sessions
GET /api/analytics/dashboard - Dashboard statistics
GET /api/analytics/time-series - Time series data
GET /api/analytics/subjects - Subject analytics
GET /api/analytics/patterns - Study pattern analysis
# Backend tests
cd backend
npm test
# Frontend tests
cd frontend
npm test- Unit tests for utility functions
- Integration tests for API endpoints
- Component tests for React components
- End-to-end workflow tests
- Study Streak Tracking: Daily/weekly study streak counters with gamification
- Advanced Pattern Recognition: Machine learning insights for optimal study times
- Comparative Analytics: Compare performance with anonymized peer data
- Export Functionality: PDF reports and CSV data export for academic advisors
- Study Groups: Create and join collaborative study sessions
- Shared Subjects: Group study tracking for team projects
- Peer Progress Sharing: Optional progress sharing with study partners
- Study Challenges: Competitive elements to motivate consistent studying
- Calendar Integration: Sync with Google Calendar, Outlook, and Canvas
- Mobile Application: React Native app for iOS and Android
- Smart Reminders: AI-powered study session reminders based on patterns
- LMS Integration: Direct integration with learning management systems
- Predictive Analytics: Forecast exam readiness based on study patterns
- Personalized Recommendations: Custom study schedules and method suggestions
- Voice Commands: Voice activation for hands-free session tracking
- Wearable Integration: Apple Watch and Fitbit integration for automatic tracking
Developer: Asif Chowdhury
Email: asifc@vt.edu