_____ _______ _ _ _______ _______ _ ______ __
/ ____|__ __| | | | __ \ \ / / ___| | / __ \ \ / /
| (___ | | | | | | | | \ \_/ /| |_ | | | | | \ \ /\ / /
\___ \ | | | | | | | | |\ / | _| | | | | | |\ \/ \/ /
____) | | | | |__| | |__| | | | | | | |___| |__| | \ /\ /
|_____/ |_| \____/|_____/ |_| |_| |______\____/ \/ \/
Your personal academic sanctuary. Engineered for calm. Designed for focus.
StudyFlow is not another productivity template. It is a hand-crafted academic operating system — built from the ground up with an obsessive attention to both design and engineering integrity. Every pixel was placed with purpose. Every database rule was written with security in mind.
It transforms the daily chaos of university coursework into something quiet, organized, and yours.
The v26.2 update brings a high-end visual overhaul and advanced UI systems to make StudyFlow feel even more like a premium, state-of-the-art academic sanctuary:
- 🤖 Flowy AI Buddy & Companion: A fully interactive SVG assistant guiding you through login (waves, types, and reacts to fields) AND acting as your smart workspace buddy to answer questions, track daily goals, and organize academic tasks.
- 🎭 Academic Multi-Profiling: Switch context effortlessly with up to 3 isolated, custom-named student profiles. Older workspaces automatically rotate out to save Firestore capacity.
- 💳 Interactive 3D Physics Lanyard: Grab, swing, and spin a premium, canvas-textured 3D ID badge powered by a real-time Rapier physics simulation.
- 🔍 Programmatic QR-Badge & Branding: Features an on-the-fly generated GitHub QR Code inside a high-contrast zone for instant smartphone scanning, customized with a two-line name plate and favicon branding.
- 🌌 SoftAurora Shader Backdrop: A liquid, organic WebGL-based backdrop animating orange (
#FF7A00) and cyan (#34D9FF) solar flares underneath your cover page. - ⚡ Preloaded Edge Assets: Preloaded models and texture assets on app startup to guarantee instant, zero-lag transitions when connecting cards.
|
Traditional timetables are dead grids. StudyFlow treats time as something alive.
|
Deadlines should not ambush you. They should be visible — but never overwhelming.
|
🔐 The Hidden Secure VaultTrue privacy is not a padlock icon. It is complete invisibility.
|
Platform-level communication, without breaking anyone's focus.
|
Beautiful design requires solid foundations.
StudyFlow completely rejects default open-access templates. Every security model was designed from scratch.
| Layer | Component | Role | Scope |
|---|---|---|---|
| Authentication | Firebase Auth | Identity verification & session management | Entry gate — no UID, no access |
| Database | Cloud Firestore | Realtime NoSQL document storage | All reads/writes locked to request.auth.uid |
| Security Rules | Firestore Rules Engine | Server-side access control | Enforced before any data is returned |
| Vault Gate | Custom PIN + Hint Key | Secondary authentication layer | Decoupled from Firebase Auth entirely |
| Vault Storage | Encrypted Isolated Node | Hidden document store | Invisible in UI until vault is unlocked |
| Session Cache | Browser LocalStorage | Persistent local state | Eliminates redundant Firestore reads |
| Mobile Bridge | Capacitor | Native device API access | Safe-area padding, OS-level integration |
| Hosting & CDN | Vercel Edge Network | Global deployment & delivery | Zero cold-start, edge-cached assets |
NO global scraping·NO cross-user data exposure·NO open-access collection reads
| Principle | Implementation |
|---|---|
| 🔒 Isolated Data Nodes | Every data point is locked to request.auth.uid — no exceptions |
| ⚡ Optimized Persistence | Native local session caching for instant reloads |
| 📱 Responsive Viewports | Scales from wide desktop to mobile via Capacitor safe-area integration |
| 🛡️ Zero Scraping Surface | Custom Firestore rules — no global collection reads possible |
React ── Component-based, state-driven UI architecture
Tailwind CSS ── Glassmorphism design system, utility-first
Cloud Firestore ── Realtime NoSQL with strict per-user security rules
Capacitor ── Native safe-area padding & mobile bridge layer
Lucide React ── Cohesive, lightweight icon library
Vercel ── Edge-deployed, globally distributed hosting
# Clone the repository
git clone https://github.com/Mohiuddin0035/StudyFlow.git
# Navigate into the project
cd StudyFlow
# Install dependencies
npm install
# Start the development server
npm run devNote: Configure your own Firebase project via a
.envfile with your credentials. Deploy the included Firestore security rules exactly as written — they are the backbone of the entire security model.
CALM ───────────────────────────────────────────────── CONTROL
Frosted glass aesthetics Strict database engineering
Ambient, contextual UI Isolated, scoped data nodes
Invisible until needed Always secure underneath
Breathes with your schedule Never leaks beyond its bounds
StudyFlow was built on a single belief: a student's relationship with their tools should feel calm, not clinical. The interface disappears when you don't need it. It surfaces what matters exactly when you do. Privacy is not a feature here — it is the foundation.
Found a bug? Have an idea that fits the philosophy? Pull requests are welcome.
Please ensure any contribution respects the security-first architecture — no changes that broaden data access scope, no shortcuts around the auth layer.
