Focus Planner is a productivity web application designed for students, hustlers, and professionals who thrive on planning and self-discipline.
It helps users create, track, and review tasks, organize goals by date, and stay focused through a built-in work environment with background study music.
The goal of Focus Planner is simple — make planning smarter, tracking easier, and focus stronger.
Organize your tasks based on specific dates. You can review previous tasks, track progress, and plan your upcoming days with ease.
- Add New Task: Quickly create tasks with title, date, and description.
- Delete All Tasks: Clear your workspace instantly when you want a fresh start.
Find tasks from any date instantly. The date picker makes it easy to recall and review what you’ve done or what’s next.
Enter a distraction-free mode where you can:
- View your task list
- Listen to focus-enhancing study music
- Track start and finish times
Perfect for students and creators who value deep work sessions.
Each task includes a notes section for jotting down:
- Key ideas
- Reminders
- Reflections
Notes preserve the exact formatting as written by the user — so your words stay as you intended.
On login:
- Users receive a personalized welcome message
- Their username is remembered across sessions
This adds a friendly and personal touch to every login experience.
A visually pleasing dashboard where users can:
- Track progress
- See completed vs pending tasks
- View timelines
- Stay motivated with productivity insights
| Technology | Purpose |
|---|---|
| React.js | Core frontend framework |
| Ant Design (antd) | UI components |
| TailwindCSS | Styling and layout |
| Zustand | State management (stores tasks, notes, and username) |
| LocalStorage | Data persistence |
| Moment.js | Date and time handling |
| Remix Icons | Icons and visual consistency |
| Vercel | Deployment and hosting |
- Login — User enters their name (saved locally for future use).
- Dashboard — Displays all tasks and progress.
- Create Task — Add new tasks with date, priority, and notes.
- Focus Mode — Listen to study music, track time, and complete tasks.
- Review & Delete — Review past tasks or delete them to start fresh.
- 🔒 Cloud-based user authentication
- 🌓 Dark/Light mode toggle
- 📈 Weekly & monthly analytics dashboard
- 🏆 Productivity streaks & motivational badges
- 🤖 AI-powered task suggestions and focus timers
Focus Planner isn’t just a to-do app — it’s a digital accountability partner.
It helps you plan better, focus deeper, and grow smarter — one task at a time.
Whether you’re a student, a learner, or a professional, Focus Planner keeps your goals clear and your focus sharper.
Sharwan Jung Kunwar
📍 Developer & Creator of Focus Planner
🛠️ Passionate about building practical, aesthetic, and smart web apps.
⭐ If you like this project, don’t forget to star the repo!