OJEE-Tracker

OJEE-Tracker is a specialized, offline-first progress tracking application designed for students preparing for examinations. It provides a comprehensive dashboard to monitor preparation across Physics, Chemistry, and Maths, with a focus on granular resource tracking, visual motivation, and persistent data storage.

🚀 Features

📊 Preparation Dashboard

• Visual Overview: Tracks your overall completion percentage across all subjects using interactive progress rings.
• Motivational Quotes: Fetches a new motivational quote every time you open the app to keep you inspired.
• Exam Countdown: A dynamic countdown timer to your target JEE exam date. The counter visually shifts color (Green → Yellow → Red) as the date approaches.

📚 Dynamic Subject Management

• Granular Tracking: Track progress for every individual chapter in Physics, Chemistry, and Maths.
• Custom Resources: Add custom study material columns (e.g., specific coaching modules, YouTube channels, reference books) directly from the UI.
• Flexible Layout: Remove or hide columns you don't use via a confirmation modal to keep your workspace clean.
• Status Indicators: Mark chapters as completed, in-progress, or not started.

📅 Planner & Study Clock

• Daily & Monthly Planner: Manage your schedule with a drag-and-drop weekly view and a comprehensive monthly calendar.
• Integrated Timer: A distraction-free study clock that tracks your sessions and provides detailed analytics.
• Auto-Rescheduling: Incomplete tasks from past days are automatically moved to "Today" to ensure nothing falls through the cracks.

☁️ Cloud Synchronization

• Multi-Device Sync: Seamlessly synchronize your progress across different devices using your Google account.
• Automated Backups: Real-time cloud saves ensure your data is never lost, even if you clear your browser's local storage.
• High Integrity: Uses LZ-compression and intelligent payload chunking to handle large datasets reliably.
• Sync Dashboard: Monitor your last sync time and status from the settings modal.

🎉 Visual Rewards

• Celebrations: Experience a burst of confetti (themed to your selected accent color) whenever you mark a chapter as completed.

🎨 Personalization

• Custom Wallpapers: Upload your own background images to create a personalized study environment.
• Shareable Progress Card: Generate a beautiful, customizable progress card with study stats. Features dynamic avatars (integrated with boring-avatars), custom avatar upload, and high-resolution PNG export.
• Adjustable Glassmorphism: Real-time sliders to control blur intensity and the Refractive Index (controlling saturation, brightness, and prismatic hue-rotation) of all UI panels.
• Background Dimming: Precision control over the dimming overlay to ensure text readability on any background.
• Dynamic Theming: Choose from a modern palette of accent colors. Your choice influences shadows, background tints, analogous gradients, avatars, and progress indicators throughout the app.
• Dark/Light Mode: Fully supported themes to reduce eye strain during late-night study sessions.

💾 Persistence & Cloud Sync

• Hybrid Storage Model: LocalStorage remains the primary source of truth for a zero-latency, offline-first experience.
• Supabase Integration: When configured, data is automatically backed up to a secure remote Supabase instance.
• Manual Data Management: Still supports traditional JSON export and import for users who prefer manual backups.

📱 Install as App (PWA)

OJEE-Tracker is a Progressive Web App. This means you can install it on your device for a native-like experience.

• Offline Access: Works without an internet connection.
• No "Server" Required: Once installed, you just click the icon to launch.
• How to Install:
  1. Open the app in Chrome or Edge.
  2. Click the "Install" icon in the address bar (or look in the browser menu for "Install OJEE-Tracker").
  3. Launch it from your Desktop or Start Menu like any other program.

🏗️ Architecture

OJEE-Tracker is built as a modular single-page application (SPA) focused on performance and user experience.

• Frontend Framework: React 18 with TypeScript for robust type safety.
• State Management: React Context API for global application state, modularized into five key providers:
  • ThemeContext: Manages visual settings and dynamic CSS variables.
  • SubjectDataContext: Handles syllabus structure, CSV parsing, and material customization.
  • UserProgressContext: Manages completion progress, planner tasks, study sessions, and mock scores.
  • RemoteAuthContext: Manages Supabase authentication and Google OAuth session state.
  • RemoteSyncContext: Orchestrates bidirectional synchronization between LocalStorage and the Cloud.
• High-Performance Architecture: Features are built with performance in mind. For example, the Planner uses custom hooks to pre-group data, converting slow O(N) searches into instantaneous O(1) lookups.
• Backend Infrastructure: Supabase (PostgreSQL + Auth + RLS) for secure cloud data persistence.
• Routing: React Router (v7) for seamless navigation, modularized into AppRoutes.
• Build Tool: Vite for lightning-fast development server and optimized production builds.
• Styling: Modern CSS Layers (@layer) architecture for strict cascade control. Features a advanced glassmorphism design system, dynamic background customization, and lucide-react for modern iconography.
• Persistence: A hybrid engine (custom useLocalStorage + RemoteSyncContext) ensures data is always available locally while remaining safe in the cloud.

📂 Project Structure

src/
├── core/               # Application setup (Context Providers, Custom Hooks, Routing)
│   ├── context/        # Global state providers (Theme, Data, Progress, Auth, Sync)
│   ├── hooks/          # Core business logic hooks (Shortcuts, Auto-shift, Quotes)
│   └── AppRoutes.tsx   # Centralized Route definitions
├── features/           # Domain-driven features (Dashboard, Planner, Sync, etc.)
├── shared/             # Reusable UI components, hooks, and utils (including `lib/supabase.ts`)
└── main.tsx            # Entry point

🛠️ Getting Started

1. Clone the repository:

   git clone https://github.com/Namankatiyar/ojee-tracker.git

2. Install dependencies:

   pnpm install

3. Configure Environment Variables: Create a .env file in the root with your Supabase credentials:

   VITE_SUPABASE_URL=your_project_url
   VITE_SUPABASE_ANON_KEY=your_anon_key

4. Start the development server:

   pnpm dev

5. Build for production:

   pnpm build

---

Created for and by a JEE Aspirant.