Nutrition Tracker React.js

A personal nutrition tracker project that helps calculate daily nutrient intake and hit desired goals.

Link to app: https://meals-nutrition-tracker.netlify.app/

Technologies used

1. React.js
2. Pure CSS for layouts
3. HTML
4. JSON Server
5. VSCode

Table of Contents

1. App Screenshots
2. General Info
3. Setup
4. Usage
5. Status
6. Contact

App screenshots

General Info

• This is a personal project to track my nutrition goals, help me eat more and hit my muscle building goals along with my gym training.
• Users can set their daily nutrient targets of protein, calories, sugar, and add their meals throughout the day from the list of available meals and compare the current nutrients to the goals.
• New food meals can also be added to the list to personalize everyone's different food habits.
• A main target was to also practice React and pure CSS and to apply them more effectively in projects.

Learning Outcomes

• The target learning outcomes are:
  • Eat enough food to build muscle and eat healthier food
  • Get a better understanding of food nutrients in different meals, what to avoid and what to eat to build muscle
  • Practice React js
  • CSS Layouts revision

Setup

• This project was bootstrapped with Vite.

• The project has been deployed to Netlify: try it online following the link: https://meals-nutrition-tracker.netlify.app/

• To Run Locally

  • In the project directory, you can run:

  • npm run dev

  • Open http://localhost:3000 to view it in your browser.

Usage

• Clone Project

• npm install

• npm start

Project Status

Project is: in progress

Contact

Created by [Vasil] - feel free to contact me!