DEV Community

Cover image for FocusFlow AI — Your Smart Study Planner
Astha Soni
Astha Soni

Posted on

FocusFlow AI — Your Smart Study Planner

FocusFlow AI — Plan Smart. Focus Deep. Achieve More.

This is my submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady.

What I Built

I built FocusFlow AI, a smart study planner designed to help students manage their daily tasks, stay focused, and build better study habits without making productivity complicated.

As a student, I understand how difficult it can be to balance assignments, programming practice, exams, and personal goals. Sometimes, planning what to study takes more time than actually studying!

That's why I created FocusFlow AI: a simple, modern productivity dashboard that helps students get organized and start working.

Key Features

  • Task Management: Add, complete, and delete study tasks.
  • Priority Management: Organize tasks by High, Medium, and Low priority.
  • Pomodoro Timer: Use a 25-minute focus session to concentrate on one task at a time.
  • Progress Dashboard: Track total tasks, completed tasks, and overall completion percentage.
  • Browser Storage: Keep your tasks saved using local storage.
  • Responsive UI: Access the planner on desktop, tablet, or mobile.
  • Modern Design: Enjoy a clean dark interface with purple accents and smooth animations.

The idea is simple: spend less time organizing your day and more time learning something meaningful.

Demo

Try FocusFlow AI here:

https://asthasonimicrosoft-code.github.io/focusflow-ai/

Explore the dashboard, create study tasks, track your progress, and try the Pomodoro timer.

Code

GitHub Repository:

https://github.com/asthasonimicrosoft-code/focusflow-ai.git

The project is built with three core web technologies:

  • HTML5 for the structure.
  • CSS3 for the styling, animations, and responsive design.
  • JavaScript for task management, progress calculations, timer functionality, and local storage.

The project is designed to be beginner-friendly, easy to understand, and simple to extend with new features.

How I Built It

I built FocusFlow AI using HTML, CSS, and JavaScript, keeping the project lightweight and easy to run in a web browser.

I focused on creating a polished user interface while making sure the main features were functional.

The application uses JavaScript to manage tasks, update progress statistics, and control the 25-minute Pomodoro timer. Browser local storage helps preserve tasks between visits.

For the visual design, I used a dark background, purple highlights, responsive layouts, and subtle hover animations to create a modern productivity dashboard.

What about AI?

The current version is a productivity planner, not yet an AI-powered application. It does not currently integrate an open-weight model, local inference engine, or AI agent.

My next goal is to integrate an open-source model, such as Gemma running locally through Ollama, to provide personalized study suggestions and help students plan their learning sessions.

This would allow me to build on the existing project while exploring open-source AI in a practical way.

Why Does Open Innovation Matter?

Open innovation makes it possible for developers, students, and independent builders to learn from one another, experiment freely, and improve existing ideas.

For a student developer like me, open-source projects are an opportunity to move beyond tutorials and build something real.

I created FocusFlow AI as a foundation that others can explore, learn from, and improve. In the future, integrating an open-weight AI model could also give users more control over their data and let them experiment without depending entirely on a closed AI API.

I believe useful technology should be accessible to people who want to learn, build, and contribute, regardless of their experience level.

My Agent Session

I developed this project using HTML, CSS, and JavaScript.

I have not included a DevRelay agent session in this submission. If I create and save a session for this project, I will add its link here.

The Lazy Payoff

FocusFlow AI is designed to reduce the small bits of friction that make studying harder than it needs to be.

Instead of keeping tasks scattered across notes or trying to calculate progress manually, students can organize tasks, mark completed work, and see their progress in one place.

The built-in Pomodoro timer also makes it easy to start a focused 25-minute study session without needing a separate timer application.

The biggest payoff is simplicity: open the dashboard, choose a task, start the timer, and get to work.

Prize Categories

This project is a student productivity web application built with HTML, CSS, and JavaScript.

I have not claimed an open-source AI partner category yet because the current version does not include an AI model or agent integration. I will update this section if I implement a qualifying open-source AI integration and confirm the relevant challenge category.


Final Thoughts

FocusFlow AI started with a simple idea: make it easier for students to focus on their goals instead of worrying about how to organize them.

This is one step in my journey as a developer, and I hope to keep improving it by adding open-source AI capabilities and useful features for students.

If you like the project, feel free to explore the code, share feedback, or contribute!

Live Demo: https://asthasonimicrosoft-code.github.io/focusflow-ai/

GitHub: https://github.com/asthasonimicrosoft-code/focusflow-ai.git

Hacktoberfest #OpenSource #WebDevelopment #JavaScript #Productivity #AI

Top comments (0)