Project Overview
This is a full stack habit tracking web application built from scratch, designed to help users create, manage, and track daily routines in a minimal and intuitive way. The goal was to create a clean, functional alternative to cluttered and complex productivity apps.
Why I Built This
While preparing for placements, I used a notebook to manually track tasks and habits. Although effective, it was repetitive and hard to scale. Existing apps felt cluttered, so I decided to build a personalized web app that prioritized minimalism and ease of use.
Tech Stack
- Frontend: HTML, Tailwind CSS, JavaScript
- Backend: Node.js, Express.js
- Database: MongoDB + Mongoose
- Authentication: JWT based login/register system with password hashing (bcrypt)
- Email Notifications & Feedback: Nodemailer integration
- Deployment: Frontend and Backend hosted on Render
Key Features
Landing Page:
- Clean layout with app branding, motivational quote, and highlights
- "How to Use" section with step by step video demos
Authentication System:
- Secure registration and login via JWT and hashed passwords
- Middleware protected routes to safeguard user data
Dashboard (Post login):
- Main hub with options to:
- Create a schedule
- Mark daily task completion
- View progress over time
Schedule Builder:
- Create/edit daily schedules with task names and time slots
- Stores schedules user wise in MongoDB
Task Tracker:
- Interactive calendar style UI (inspired by Google Keep)
- Click on a day to view & check off tasks
- Smooth UI transitions using modal and background blur
Progress Visualization:
- Dynamic bar graph showing task completion across the month
- Heatmap style view representing daily consistency
Completion Analytics (Backend):
- Computes completion rate (%) based on completed tasks daily and weekly
- Returns data suitable for graph rendering on frontend
Feedback System:
- Optional user feedback form
- Sends feedback directly to my inbox via Nodemailer
Highlights
- Built solution based on real world productivity pain points
- Benchmarked UI/UX inspirations from existing apps, then tailored for simplicity
- Scalable backend structure for future enhancements like notifications or gamification
- Ideated, scoped, and executed the app independently
- Balanced user needs with implementation feasibility
- Prioritized minimalism, fast feedback loops, and intuitive workflows
- Designed and implemented full RESTful API with auth middleware
- Efficient data handling via MongoDB
- Real time task updates and secure data transactions
Future Enhancements
I plan to expand this project by:
- Gamification of the complete process by rewarding users for completing a weeks task,maintaining streaks and so on.
- Sending timely notifications for the user to complete the tasks that user has created.
Conclusion
What started as a personal necessity evolved into a polished web product. This project showcases my end to end development ability, attention to user experience, and a problem solving mindset traits I bring to any role I take on.