Goal Tracker

Goal Tracker is a web application which helps you track your day to day goals and empowers you to become a better individual.

Features

• Firebase Authentication
• Spotify Embed, Flip Clock, Calender, Quote of the Day
• A goal checklist to track your daily goals.
• A graph to show your progress of the whole year.

Lessons Learned

This project took much longer than I expected, but I learnt a lot from this project, a few things are listed below:

• Encorporating Spotify Embed was really challenging but I made it working eventually. I also made a dedicated playlist for this project to match it's dark black theme.
• React-Beautiful-DND helped a lot in making the drag and drop functionality to reorder the goals in the list.
• I used Calendar and the Checkbox component from the Material UI React Components but it was so difficult understanding the documentation in order to style the components, but in the end I understood it and made it working.
• Home Screen was so challenging to design and also implement. I had to think of the structure of the elements so that they can be both visually pleasing on the web as well as mobile devices.
• I had to implement Firebase Authentication so that all my friends can sign in using Google and use this application daily.

Issues

Although the major functionalities are implemented, there are still a lot of things to implement to make this application better:

• Make the website responsive for mobile devices.
• Resolve the issue that the user stays on the Home Page for a few seconds before navigating to the Goal Tracker page.
• Add Footer to the Home Page
• Add a cursor and make it move from one circle to another like a portal on the Home Page.
• Make the goals list scrollable if the list increases to a certain height
• Connect Goal Tracker to a Firestore Database and add the daily goals.
• Add a graph to show the progress of the daily goals for the whole year.

Run Locally

Clone the project

  git clone https://github.com/HibbanHaroon/goal-tracker.git

Go to the project directory

  cd goal-tracker

Install dependencies

  npm install

Start the server

  npm start

Acknowledgements

• Spotify Embed
• Flip Clock
• Material UI React Components
• Quotes API
• React Beautiful DND
• Firebase Authentication