sitek94sitek94
77

Habit Tracker App

screenshot of Habit Tracker App
react
material-ui
firebase

Keep track of your habits!

GithubDemo

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

  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.

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.

react-hook-form
React Hook Form

React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.

Yup

Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.