Inspiration
The inspiration for this project came from the idea of building discipline through consistent habits. I was also inspired by motivational figures like David Goggins, who emphasize mental toughness and daily consistency. I wanted to create a simple tool that helps visualize progress and streaks so users can stay motivated to keep improving every day.
What it does
Habit Tracker allows users to create habits, mark them as completed each day, and track both their current and longest streaks. The app displays a list of habits with completion history and streak statistics. For demonstration purposes, users can also select custom dates to simulate check-ins and show how streaks update over time.
How we built it
The frontend was built using React with components for habit creation, habit display, and interaction. The backend was built using Node.js and Express to create a REST API that handles habit data and check-ins. Habit data is stored in a JSON file, and a streak calculation algorithm determines the current and longest streaks based on completion dates. Axios is used to communicate between the frontend and backend.
Challenges we ran into
One challenge was implementing the streak calculation logic correctly so it could detect consecutive days and reset properly when a day is missed. Another challenge was connecting the frontend and backend while managing state updates so the UI refreshed immediately after habit actions.
Accomplishments that we're proud of
We are proud of successfully building a full-stack application that integrates a React frontend with an Express backend. The streak calculation algorithm works correctly, and the UI provides a clean and motivating experience with a dark theme, rotating quotes, and a side inspiration panel.
What we learned
We learned how to structure a full-stack project with separate frontend and backend components, build REST APIs with Express, and manage state and asynchronous API calls in React. We also gained experience implementing algorithms within real applications rather than isolated code examples.
What's next for Habit Tracker
Future improvements could include user accounts, database integration instead of a JSON file, habit reminders, progress charts, and mobile-friendly design. Additional features like analytics, notifications, and habit categories could make the app even more useful for long-term habit building.
Log in or sign up for Devpost to join the conversation.