More Premium Hugo Themes Premium React Themes

Habit Tracker App

Keep track of your habits!

Habit Tracker App

Keep track of your habits!

Author Avatar Theme by sitek94
Github Stars Github Stars: 73
Last Commit Last Commit: Mar 19, 2022 -
First Commit Created: Mar 24, 2024 -
default image

Overview

Habit Tracker is a project developed for CS50’s Introduction to Computer Science Course. It is a web application designed to help users track their habits. Users can create an account, authenticate using various methods, add, edit, and delete habits, mark habits as completed, failed, or skipped, visualize weekly performance, customize the app, toggle dark mode, choose different languages, and more.

Features

  • Account Creation: Users can create an account using email and password.
  • Authentication Options: Support for authentication via Facebook, GitHub, and Google.
  • Guest Login: Users can also log in as a guest.
  • Habit Management: Add, edit, and delete habits with status options.
  • Performance Visualization: Weekly performance displayed in a bar chart.
  • Summary View: Brief summary of performance for last week, current week, current day, and all-time.
  • Customization: Customize the app by changing colors, toggling dark mode, and selecting language.
  • Tech Stack: Built using React, React Query, React Router, React Hook Form, Material UI, and Firebase.

Installation

Getting Started

  1. Clone the repository and install dependencies:
git clone [repository_url]
cd directory_name
npm install
  1. Set up Firebase:

    • Login to Firebase
    • Create a project
    • Create Realtime Database
    • Enable sign-in methods (Email/Password, Google, and optionally Facebook/GitHub)
  2. Add Firebase configuration details to a .env.local file.

  3. Start the application:

npm start

The app will be running at http://localhost:3000.

Summary

Habit Tracker is a feature-rich web application that allows users to track their habits effectively. With account creation, multiple authentication options, habit management functionalities, performance visualization, and customization features, it provides a comprehensive habit tracking solution. Built using modern technologies like React, Firebase, and Material UI, the project showcases the developer’s skills and the ability to overcome challenges related to data structure and authentication implementation.