Organize your academic life. Find your flow. Stay in the zone.
StudySync is a premium React-based academic command center that integrates real-time task management, an intelligent calendar with conflict detection, and a focused study timer. It features a calming "soft-green" aesthetic and leverages Firebase to provide students with a unified, high-performance platform for organizing their academic life.
StudySync rejects the harsh, utilitarian look of traditional planners. Instead, it utilizes a custom "Luminous Organicism" design system:
- Calming Color Palette: Soft emeralds, sky blues, and warm amber tones.
- Glassmorphism: Frosted glass panels, ambient shadows, and signature gradients.
- Micro-animations: Satisfying, barely-there interactions that reward user behavior without distraction.
Your central command hub for academic life.
- Smart Task Management: Full CRUD operations for your assignments. Set priorities, subjects, and deadlines.
- Live Sync: Changes reflect instantly across devices using Firestore
onSnapshot. - Dynamic Weekly Insights: A visual bar chart mapping completed vs. pending tasks.
- AI-Vibe Textual Insights: Encouraging prompts ("You have 3 tasks due tomorrow", "10 tasks completed this week!").
A comprehensive scheduling suite offering full visibility over your academic timeline.
- Multiple Views: Seamlessly switch between Month, Week, and Day layouts.
- Conflict Detection: Automatically warns you if study sessions or task deadlines overlap.
- Smart Suggestions: Evaluates past workflows to suggest an optimal, data-backed study slot for the day.
- Unified Task Management: Implements a centralized task-creation modal ensuring perfectly synchronized state between the Dashboard and Calendar.
A complete, Google Drive-style file management system integrated directly into your workspace.
- Hierarchical Folders: Create, Rename, Delete, and Navigate infinite folder trees.
- PDF Vault: Upload and store your research and study materials.
- Smart Tech: Uses a zero-CORS Base64-to-Firestore encoding strategy for instant, frictionless file storage.
- View Controls: Toggle between List and Grid interfaces. Sort by Date Modified or Name. Tag files by subject.
A breathtaking, distraction-free environment engineered to lock you into deep work.
- Advanced Pomodoro Engine: Highly customizable Focus, Break, and Lap configurations.
- Web-Audio Ambient Soundscapes: Built-in programmatic audio generation. Listen to Forest Rain, Morning Birds, Library Ambience, Café, or White Noise—no external audio files required.
- Task Tethering: Link a specific dashboard task to your current focus session and track its progress.
- Daily Goals & Stats: Set a daily focus goal (e.g., 120 mins) and watch the circular progress ring fill up as you crush your sessions.
- React.js (Vite): Blazing fast module bundling and HMR.
- Tailwind CSS: Fully customized theme mapping to our unique style tokens.
- React Router: Seamless, instant page transitions.
- Web Audio API: Native, zero-dependency procedural audio synthesis for ambient soundscapes.
- Firebase Auth: Secure, instant Email/Password authentication protocols.
- Cloud Firestore: NoSQL database handling Users, Tasks, Folders, Files, and Focus Preferences with real-time reactivity.
users/{uid}
email,role,createdAt
tasks/{taskId}
userId,title,subject,deadline,status(pending/completed),priority(normal/urgent)
library_folders/{folderId}
userId,name,parentId
library_files/{fileId}
userId,folderId,name,size,downloadUrl(Base64),tag
focus_prefs/{uid}
focusMins,breakMins,laps,dailyGoal,focusedToday
git clone https://github.com/your-username/StudySync.git
cd StudySync
npm install- Head to the Firebase Console and create a project.
- Enable Authentication (Email/Password) and Firestore Database.
- Copy your project configuration object.
- Replace the config in
src/firebase/config.jswith your keys.
Note: Since the library uses Firestore Base64 encoding, Firebase Storage configuration is not required!
npm run devOpen http://localhost:5173 in your browser. Create an account and step into your clean, focused workspace.
StudySync is fully optimized for Vercel.
- Build the production app:
npm run build - Push to GitHub.
- Import the repository into Vercel.
- Framework preset: Vite.
- Deploy and share with the world!
"Breathe in. Immerse yourself. Begin your flow."
Built with 💚 for students everywhere.