A next-generation, full-stack academic productivity operating system combining optical board-to-study AI extraction, real-time cross-device cloud sync, smart attendance tracking, milestone pipelines, habit streak heatmaps, and deep work focus synthesis — all rendered in a liquid-glass obsidian design language.
🚀 Live Deployment · ⚙️ Tech Stack · 🛠 Installation & Setup · 📱 Zero-State Philosophy
Scholar OS is a premium, zero-state academic workspace built for university scholars and students who want complete mastery over their academic trajectory. It starts completely empty on Day 0 and organically adapts to your exact college subjects, attendance records, study milestones, and habit streaks.
Every metric in your workspace is 100% verified and synchronized across all your devices (desktop, laptop, tablet, mobile) via a reactive cloud sync engine.
Powered by Google Gemini 2.0 Vision API
- Photograph-to-Notes Pipeline: Upload or drag-drop chalkboard or whiteboard snapshots from live university lectures.
- In-Browser Camera Capture: Take real-time snaps of lecture boards directly from your device camera.
- Multimodal AI Extraction: High-fidelity recognition of handwritten mathematical formulas, physics diagrams, proofs, and technical concepts.
- LaTeX & Markdown Formatting: Generates clean, structured lecture notes, derivation breakdowns, key takeaways, and flashcards with instant KaTeX math rendering.
- 3D Flip-Card Active Recall Deck: Interactive spaced repetition deck with keyboard controls (
Spaceto flip,←/→to navigate). - Contextual Study Chat Drawer: Ask clarifying questions and solve practice problems directly referencing the uploaded chalkboard image.
- Pre-Loaded Sample Library: Interactive demonstrations covering quantum mechanics, Fourier analysis, and multivariate calculus.
Powered by Upstash Serverless Redis & Reactive Zustand Subscriptions
- Instant Cross-Device Parity: Log in from your laptop, tablet, or phone — your enrolled courses, attendance records, milestone tasks, habit heatmaps, and avatar selections immediately sync in real time.
- Debounced Auto-Sync Engine: State mutations automatically trigger non-blocking cloud delta synchronization.
- Zero Data Loss Guarantee: Local storage persistence acts as an offline cache with instant Redis cloud reconciliation on reconnection.
- One-Tap Google Sign-In: Integrated with Google Identity Services (GSI) and server-side token verification.
- React Bits Specular Button: Interactive glass-style Google authentication button with cursor-tracking specular rim light and dynamic ambient glare.
- Custom Academic Email Authentication: Secure password hashing with JWT session tokens.
- Signature Bending Line Indicator: Smooth SVG indicator responding dynamically to hover and dropdown toggle states.
- Multi-Color Gradient Halo Ring: Elegant purple-to-orange glowing ring surrounding the user's avatar.
- Academic Status Badges: Real-time display of current Campus/University, Semester, and Target CGPA.
- Procedural SVG Avatar Picker: 4 unique SVG avatar faces with animated selection glow stage and thumbnail checkmark selectors, synced to your account.
- Quick Controls: One-click Manage Enrolled Courses, Reset Workspace to Zero State, and Sign Out.
- Holographic Circular Gauge: Ultra-smooth progress meter tracking cumulative CGPA toward a 4.00 honors target.
- Remaining Term GPA Projection: Automatically calculates the average GPA required across remaining terms to reach your target honors degree tier.
- Historical Semester Record: Clean visual breakdown of past semester GPAs and credit load.
- Degree Progress Meter: Real-time percentage tracking toward degree completion.
Tailored for mandatory minimum attendance policies (75% threshold)
- Unlimited Course Management: Add courses with custom course codes, names, credits, and weekly class schedules.
- One-Tap Class Logging: Mark daily classes as
Present (+1 attended, +1 total),Absent (+1 total), orClass Cancelled. - Smart Bunk Calculator:
- Safe Zone: Calculates exactly how many upcoming lectures you can safely skip without dropping below 75%.
- Deficit Zone: Computes the exact number of consecutive classes you must attend to recover your attendance status.
- Color-Coded Status Badges: Instant visual indicators for
🟢 Safeand🔴 Low Attendance Warning.
- GitHub-Style Contribution Grid: 120-day heatmap tracking consistency in Deep Study, Problem Solving, and Reading.
- Interactive Multi-Level Logging: Click any grid square to cycle intensity (
0 → 1 → 2 → 3 → 4). - Streak Velocity Engine: Real-time active streak counters, longest streak record, and completion percentage.
- Three Mode Intervals:
Focus (25m),Short Break (5m),Long Break (15m)with automatic mode progression. - Binaural Ambience Synthesizer: Generates real-time audio tones using Web Audio API oscillators:
- Brown Noise, Alpha Waves (10Hz), Rain Ambience, Coding Flow, Silence.
- Live Frequency Spectrum Visualizer: Animated canvas audio visualizer reflecting active audio frequencies.
- Drag-and-Drop Workflow: Move tasks across
Backlog → In Progress → Review → Done. - Priority Urgency Badges: Encoded color tags for
Urgent,High,Medium, andLowpriority deadlines. - Course Linking: Tag assignments directly to enrolled college courses.
Scholar OS is designed with an Obsidian Liquid-Glass aesthetic:
| Component | Design Pattern |
|---|---|
| Atmosphere | React Bits multi-layer fluid Aurora mesh background |
| Cursor | Magnetic liquid cursor with spring inertia physics & click ripples |
| Lighting | Magic UI Border Beam neon lasers + Specular cursor highlights |
| Dials | Immersive holographic glass dials with native SVG glow filters |
| Navigation | macOS-style magnifying dock with spring hover physics |
| Buttons | React Bits Specular Buttons & obsidian capsule pills |
| Layer | Technology |
|---|---|
| Framework | Next.js 16.3 (App Router, Turbopack) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 3.4 + Vanilla CSS Variables |
| Cloud Database | Upstash Serverless Redis (REST API) |
| State Management | Zustand with reactive auto-sync subscriptions |
| AI / Multimodal Vision | Google Gemini API (gemini-2.0-flash-exp) |
| Authentication | Google Identity Services OAuth + JWT Session Tokens |
| Animations | Framer Motion 11 |
| Math Typesetting | KaTeX |
| Audio Engine | Web Audio API (OscillatorNode & AudioContext) |
| UI Components | React Bits, Kokonut UI, Magic UI |
| Icons | Lucide React |
| Deployment | Vercel |
src/
├── app/
│ ├── page.tsx # Main OS Dashboard entry
│ ├── globals.css # Obsidian dark tokens & animations
│ ├── layout.tsx # Root metadata & font configurations
│ └── api/
│ ├── analyze-board/ # Gemini Vision multimodal OCR endpoint
│ ├── auth/
│ │ ├── google/ # Google OAuth token verification
│ │ ├── login/ # Email/password authentication
│ │ └── register/ # New scholar account registration
│ ├── chat/ # Board-contextual AI chat endpoint
│ ├── concierge/ # Scholar OS AI assistant endpoint
│ └── sync/ # Upstash Redis push/pull cloud synchronization
├── components/
│ ├── academic/
│ │ ├── AcademicCommandCenter.tsx # Layout container
│ │ ├── AssignmentKanban.tsx # Drag-and-drop assignment sprint board
│ │ ├── AttendanceTracker.tsx # 75% threshold attendance + bunk simulator
│ │ └── CgpaProgressRing.tsx # Holographic CGPA trajectory dial
│ ├── auth/
│ │ ├── AuthModal.tsx # Sign in / Sign up modal with Google OAuth
│ │ ├── AvatarPicker.tsx # Kokonut UI SVG procedural avatar picker
│ │ └── OnboardingWizard.tsx # 3-step zero-state onboarding wizard
│ ├── canvas/
│ │ └── ScrollCanvasSequence.tsx # 250-frame 4K scroll sequence background
│ ├── dashboard/
│ │ └── ScrollDashboardOverlay.tsx # Hero showcase + metric dials
│ ├── habits/
│ │ ├── AppleActivityCard.tsx # Kokonut UI concentric activity rings
│ │ ├── HabitStreakHeatmap.tsx # 120-day habit contribution heatmap
│ │ ├── PomodoroTimer.tsx # Deep work focus timer + Web Audio synth
│ │ └── AudioVisualizer.tsx # Live Web Audio frequency visualizer
│ ├── navigation/
│ │ ├── TopNav.tsx # Floating glass navigation pill
│ │ └── UserProfileMenu.tsx # Kokonut UI profile dropdown with bending line
│ ├── vision/
│ │ ├── BoardToStudyStudio.tsx # Main OCR workspace
│ │ ├── ActiveRecallFlashcards.tsx # 3D active recall flip deck
│ │ ├── ContextualChatDrawer.tsx # Chalkboard AI chat interface
│ │ ├── DerivationBreakdown.tsx # Step-by-step mathematical proofs
│ │ ├── StructuredNotesViewer.tsx # KaTeX formatted lecture notes
│ │ ├── SampleBoardsLibrary.ts # Preloaded sample board library
│ │ └── HighResImageViewer.tsx # Pan & zoom board image viewer
│ └── ui/
│ ├── SpecularButton.tsx # React Bits cursor-tracking specular button
│ ├── CircularProgress.tsx # Immersive holographic progress dial
│ ├── MagicCard.tsx # Cursor spotlight card with Border Beam
│ ├── BorderBeam.tsx # Rotating neon laser border
│ ├── AnimatedShinyText.tsx # Shimmer headline typography
│ ├── AuroraBackground.tsx # Ambient fluid Aurora mesh layer
│ ├── LiquidCursor.tsx # Trailing magnetic cursor
│ ├── Dock.tsx # macOS spring magnification dock
│ ├── KokonutToggle.tsx # Spring toggle switch
│ └── Badge.tsx # Status indicator badges
├── store/
│ └── useScholarStore.ts # Zustand global store + reactive Redis sync
├── types/
│ └── scholar.ts # TypeScript interfaces & domain types
├── hooks/
│ ├── useBoardAnalysis.ts # Multimodal board analysis hook
│ └── useSoundSynth.ts # Web Audio binaural frequency generator
└── lib/
├── gemini.ts # Google Gemini API client
├── redis.ts # Upstash Redis client configuration
└── utils.ts # Styling utilities
- Node.js 18+ installed
- A free Google Gemini API Key
- A free Upstash Redis Database
- (Optional) A Google Cloud OAuth Client ID for Google Sign-In
git clone https://github.com/KaiX-Jr/scholar-os.git
cd scholar-osnpm installCreate a .env.local file in the root directory:
# Google Gemini API
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_API_KEY=your_gemini_api_key_here
# Upstash Redis (For cross-device cloud sync)
UPSTASH_REDIS_REST_URL=https://your-database.upstash.io
UPSTASH_REDIS_REST_TOKEN=your_upstash_token_here
# Google OAuth (For Google Sign-In)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_oauth_client_id.apps.googleusercontent.comnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm startDeploy your own Scholar OS instance with a single click:
- Push your repository to GitHub.
- Import the repository into Vercel Dashboard.
- In Settings → Environment Variables, add:
GEMINI_API_KEYUPSTASH_REDIS_REST_URLUPSTASH_REDIS_REST_TOKENNEXT_PUBLIC_GOOGLE_CLIENT_ID
- Click Deploy.
Scholar OS is strictly zero-state. There are no dummy courses, mock grades, or placeholder logs. When a new scholar creates an account:
- 📚 Courses: Blank → configured via the 3-step Onboarding Wizard.
- 📆 Attendance: Starts at
0/0until you log your first class. - 🌿 Habit Heatmap: All 120 squares start blank.
- 📋 Kanban: Empty sprint board awaiting your actual deadlines.
- 📈 CGPA Gauge: Reflects your entered target honors tier.
- Data Privacy: Academic notes, courses, and habit records belong solely to the user.
- Secure Cloud Sync: Cross-device synchronization is encrypted via HTTPS and secured with Upstash Redis tokens.
- Authentication: Passwords are securely hashed; Google OAuth authentication is validated directly against Google's public token authority.
MIT © KaiX-Jr — Free to use, fork, and build upon.
Crafted with 🧠 for students and scholars worldwide.
