Food tracker

This is the final project of learnjavascript.online .

 

Description

This is a web application which tracks the nutritional values of your food. The Data is stored in a database (Firestore). To use this project, check the instruction below.

 

What the Project teached me

• Fetch API
• Modules & importing packages
• Package managers (Parcel)
• Data Structures & their methods
• Iterations and reduce
• Optional chaining & nullish coalescing
• DOM
• Closures
• think about refactoring and DRY

 

Pictures

 

Important: If you'd like to host this project online, please make sure to replace the Base URL of the Firebase API with your own. For that, you need to create a free Firebase account, a new app, and then click on Firestore database.

 

Setup

We need two libraries:

• snackbar
• ChartJS

First time

npm init -y
npm install -g parcel-bundler #if parcel is not installed

Then you can run the server

npx parcel src/index.html

Browse to localhost:1234

Build for production

When you're ready to deploy, you can build for production with the following command:

npx parcel build src/index.html --no-source-maps --public-url . --no-cache