Habit Tracker App

screenshot of Habit Tracker App
react
material-ui
firebase

Keep track of your habits!

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.

Getting Started

  1. Clone the repository and install dependencies:
git clone [repository_url]
cd directory_name
npm install
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

firebase
Firebase

Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.