{"id":18039060,"url":"https://github.com/sitek94/habit-tracker-app","last_synced_at":"2025-03-27T10:32:01.459Z","repository":{"id":54849878,"uuid":"309166367","full_name":"sitek94/habit-tracker-app","owner":"sitek94","description":"Keep track of your habits!","archived":false,"fork":false,"pushed_at":"2022-03-19T17:32:33.000Z","size":4252,"stargazers_count":72,"open_issues_count":5,"forks_count":31,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T10:44:47.658Z","etag":null,"topics":["firebase","material-ui","react"],"latest_commit_sha":null,"homepage":"https://habit-tracker.macieksitkowski.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sitek94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-01T18:58:07.000Z","updated_at":"2025-03-11T19:15:11.000Z","dependencies_parsed_at":"2022-08-14T04:40:51.001Z","dependency_job_id":null,"html_url":"https://github.com/sitek94/habit-tracker-app","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitek94%2Fhabit-tracker-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitek94%2Fhabit-tracker-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitek94%2Fhabit-tracker-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitek94%2Fhabit-tracker-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sitek94","download_url":"https://codeload.github.com/sitek94/habit-tracker-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245127940,"owners_count":20565203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","material-ui","react"],"created_at":"2024-10-30T14:08:28.574Z","updated_at":"2025-03-27T10:32:00.874Z","avatar_url":"https://github.com/sitek94.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Habit Tracker\n\n## Table of Contents\n\n* [About](#about)\n* [Features and Stack](#features-and-stack)\n* [Screenshots](#screenshots)\n* [Getting Started](#getting-started)\n* [Challenges](#challenges)\n* [Create React App](#bootstrapped-with-create-react-app)\n\n## About\n\n**Habit Tracker** is my final project for [CS50's Introduction to Computer Science Course](https://www.edx.org/course/cs50s-introduction-to-computer-science).\nWhat can I say, **Habit Tracker** keeps track of your habits :fireworks: :ok_hand: :tada:\n\n### Video presentation\n\nA short video (2 minutes in length) where I present the project.\n\n[![Video presentation](https://i.gyazo.com/e642a79e194b30fa3deaa050e0c4b0f5.png)](https://www.youtube.com/watch?v=zIr_d1ZsIGQ)\n\n## Features and Stack\n\n### Features\n* create an account with using email and password\n* authenticate using Facebook, GitHub or Google\n* login as a guest\n* add, edit and delete habits\n* mark the habits as `completed`, `failed` or `skipped`\n* weekly performance is visualized in a bar chart\n* brief summary of performance for last week, current week, current day and all time\n* customize the app by changing `primary` and `secondary` color\n* toggle dark mode\n* choose your language: `ES | EN | PL`\n\n### Stack\n\n* React\n* React Query\n* React Router\n* React Hook Form\n* Material UI\n* Firebase\n  * Authentication\n  * Realtime Database\n  \n## Screenshots\n\n* Landing Page\n\n![Landing Page](screenshots/landing.png)\n\n* Sign up using **Facebook**, **GitHub**, **Google** or create a new account using your email address.\n\n![Sign in](screenshots/sign-up.png)\n\n* Create new habit\n\n![Create habit](screenshots/add-habit.png)\n\n* Manage your habits - preview, edit or delete your habits\n\n![Manage habits](screenshots/manage-habits.png)\n\n* Keep track of your habits in the Dashboard\n\n![Dashboard](screenshots/dashboard.png)\n\n* Change your settings\n\n![Settings](screenshots/settings.png)\n\n* Customize the app the way you want\n\n![Custom theme](screenshots/layout-theme.png)\n\n## Getting started\n\nBelow you'll find the instructions for setting up the project locally and a walkthrough video, where I'm following these instructions. \n\n[![local-dev-thumbnail](https://user-images.githubusercontent.com/58401630/159131748-9181af46-22c3-4648-ae18-e82572f4843c.png)](https://youtu.be/-Iv88vi71gM)\n\n### Clone repo and install dependencies\n\n```bash\n# Clone the repo\ngit clone https://github.com/sitek94/habit-tracker-app.git\n\n# Install dependencies\ncd habit-tracker-app\nyarn\n```\n\n### Connect Firebase\n\nWhile you’re waiting for the dependencies to install, you can set up the Firebase.\n\n1. Login to [Firebase](https://console.firebase.google.com/)\n2. Create project\n3. Create Realtime Database\n   1. In step 2, check “Start in **test mode”**\n4. Authentication \u003e Sign-in method \u003e Sign-in providers, and add the following:\n   1. Email/Password\n   2. Google\n   3. Anonymous\n   4. (Optional): If you want to add Facebook and/or GitHub, you’ll have to get Client IDs and secrets from these services\n5. Go to Project Overview and add a web app\n6. You don’t need to run `npm install firebase`, it’s already installed\n7. You should see a `firebaseConfig` similar to this:\n\n    ```bash\n    const firebaseConfig = {\n      apiKey: \"\u003cYOUR_API_KEY\u003e\",\n      authDomain: \"\u003cYOUR_AUTH_DOMAIN\u003e\",\n      databaseURL: \"\u003cYOUR_DATABASE_URL\u003e\",\n      projectId: \"\u003cYOUR_PROJECT_ID\u003e\",\n      storageBucket: \"\u003cYOUR_STORAGE_BUCKET\u003e\",\n      messagingSenderId: \"\u003cYOUR_MESSAGING_SENDER_ID\u003e\",\n      appId: \"\u003cYOUR_APP_ID\u003e\",\n      measurementId: \"\u003cYOUR_MEASUREMENT_ID\u003e\",\n    };\n    ```\n\n8. Create `.env.local` file, by duplicating `.env.local.example`, and use config above to fill it out\n\n### Start the app\n\n```bash\n# Start development server\nyarn start\n```\nThe app should be running at: [http://localhost:3000](http://localhost:3000/)\n\n## Challenges\n\nI learned a lot while building the project and for sure I'm going to learn a lot more while maintaining it. \nThat's why I want to keep track of the challenges that I've had along the way so that I can reference them in the future.\n\n### Database and data structure\n\nHow should I store habit's completion state for each day? Should each habit have an array with the dates \nwhen it was performed or should I store dates and each date would keep track of the habits that where performed on that day? \n\nI tried to structure the data so that it is saved and retrieved as easily as possible. To do so I've been following \n[Firebase guidelines](https://firebase.google.com/docs/database/web/structure-data) and in the end came up with the following data structure:\n\n```json\n{\n    \"habits\": {\n        \"user-one\": {\n            \"habit-one\": {\n                \"name\": \"Reading\",\n                \"description\": \"Read a book for at least 30 min in the morning\",\n                \"frequency\": [0,1,2,3,4]\n            }\n        }\n    },\n    \"checkmarks\": {\n        \"user-one\": {\n            \"checkmark-id\": {\n                \"habitId\": \"habit-one\",\n                \"date\": \"2020-11-11\",\n                \"value\": \"completed\"\n            }\n        }\n    },\n    \"users\": {\n        \"user-one\": {\n            \"locale\": {\n                \"code\": \"en-GB\"\n            },\n            \"theme\": {\n                \"primaryColor\": \"blue\",\n                \"secondaryColor\": \"red\",\n                \"dark\": true\n            },\n            \"performanceGoal\": 80\n        }\n    }\n}\n```\n\n### Authentication Layer\n\nFor quite some time I was using Private and Public routes to prevent an authenticated user from accessing the parts of the app available only for logged in user.\nIt was fine, but I wanted to use a different layout for authenticated users (additional sidebar on the left).\n\nI found the perfect solution in a [blog post by Kent C. Dodds](https://kentcdodds.com/blog/authentication-in-react-applications):\n\n```jsx\nfunction App() {\n  const user = useUser();\n  return user ? \u003cAuthenticatedApp /\u003e : \u003cUnauthenticatedApp /\u003e;\n}\n```\n\n### Localization and language\n\nI've never before implemented this in an app, and I really wanted to give it a try. My main goal was to give the user an option to change their locale and language.\nAlthough this goal was achieved, the solution is far from ideal. First, I think that it would be better to split these two layers. For example in YouTube one\ncan open settings and change either Language or Location.\n\n## Bootstrapped with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\nFor the detailed description of available scripts see [CRA Documentation](https://create-react-app.dev/docs/available-scripts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitek94%2Fhabit-tracker-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsitek94%2Fhabit-tracker-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitek94%2Fhabit-tracker-app/lists"}