Main page of FocusFlow
Task Section Example
Grade Tracker Section
Profile Section
Flashcard Section Example
Music Section
Productivity Section (Pomodoro)

FocusFlow: The Ultimate Student Dashboard

A single, unified productivity app to organize your entire semester.

🌟 Inspiration

Every semester, students juggle deadlines, notes, grades, and resources across half a dozen apps and platforms. I wanted a single unified tool that would not only organize this chaos but also actively motivate—integrating analytics and streak-based achievements into the everyday workflow.

🚀 What it does

FocusFlow is a unified productivity dashboard for students. It delivers all key features in a single, fast-loading page:

Task Management: Organize tasks in three distinct layouts: a drag-and-drop Kanban Board, a full-page Calendar, or a dense, sortable List View.
Study Analytics: Track your Pomodoro sessions with a custom-built bar chart. A Study Streak tracker and Achievement system motivate you to stay consistent.
Flashcard Decks: Create and study your own flashcard decks, complete with an answer-checking study mode.
Grade Tracker: A simple, powerful calculator to track assignments and weighted grades by course.
Persistent Music Player: Upload your favorite study music, which persists between sessions, and control playback while you work.
Calm UI: A beautiful, responsive interface with full Light and Dark Mode support.

All data is instantly persistent, saving every change directly to a dedicated backend.

🛠️ How we built it

Frontend: Built as a single index.html file using Vanilla JavaScript (ES6+) for all logic. The UI is crafted with Tailwind CSS for a responsive, modern component-based design.
Backend: A lightweight FastAPI (Python) server handles all persistence. It serves the index.html file and provides API endpoints for saving and loading data.
Data Persistence: All app state (tasks, grades, goals, etc.) is serialized and sent to the backend via fetch API calls, where it's stored in a single data.json file. This provides a single source of truth and ensures all progress is saved.
Music Player: The music player uploads audio files directly to the FastAPI backend, which stores them in a /music/ directory. The player then streams the audio from those file URLs, ensuring the playlist is always available.
Analytics: The study analytics chart is built from scratch with zero dependencies, using only styled div elements to render a dynamic bar chart.

🏃 Challenges we ran into

Client-Server Architecture: The biggest challenge was moving from a simple (and failing) localStorage/IndexedDB model to a robust client-server architecture. This involved refactoring every save/load function to be an async fetch call.
CORS & URL Resolution: Debugging a host of network errors, including net::ERR_FAILED (from CORS), 400 Bad Request (from faulty security logic), and 501 Not Implemented (from a missing python-multipart library).
Data & Path Mismatches: We had to squash several subtle bugs, including a time zone mismatch (UTC vs. Local time) that made the analytics chart fail to update, and a file path mismatch (relative vs. absolute) that broke the "delete music" security check.
UI "Leak" Bugs: Patched subtle issues where modules could overlap or fail to hide properly during rapid navigation between tabs.

🏆 Accomplishments that we're proud of

Completely refactored the app for bulletproof persistence. All data now correctly saves to and loads from the backend.
Built a true “all-in-one” dashboard that remains lightweight and fast (a single HTML file + a simple Python server).
Created a beautiful, responsive UI supporting both light and dark themes.
Integrated achievement popups (toasts) and a motivator section that dynamically responds to the user's study streak.
Successfully debugged complex, full-stack issues spanning from frontend JavaScript, to network policies (CORS), to backend Python logic.

🧠 What we learned

We learned the critical importance of a single source of truth for data. Debugging this project taught us how a single "frontend" error can actually be a backend security rule, a network policy, or a data serialization mismatch. We also learned how to build a complex, reactive-style app in vanilla JavaScript and how flexible FastAPI is for rapid backend development.