This project was bootstrapped with Create React App.
Steps to run project
git clone
project https://github.com/jiangtt18/Fitness.
npm install
to install all package dependencies.
npm start
to run app in the development mode.
open http://localhost:3000 to view it in the browser.
Features
- Display a list of foods a user has eaten in a clear way, with the associated caloric value.
- Display some calculation for the total nutrition values for the day
- Minimal support for adding and removing food items
- Include other nutrition info (macro and micronutrients)
- Make the interface responsive
- Use different meals to segment food (breakfast, lunch, dinner, etc)
Notes
This is a purely frontend project (no backend and database) Testing enviroment set up for Jest && Enzyme touch ./src/tests run npm test at root
Future directions
- Reuse LogTable component to build Excise logs and dynamically update
Burned extra with exercise
inCalorie today
section. - Use third party API, such as https://www.nutritionix.com/natural-demo, to support adding items.
- Replace React Bootstrap table with Ag-Grid to support more flexible table editing, such as in-cell editing and multi-select for deletion.
- Insert a calendar in
Calorie today
section once backend and database are built. Clicking on different dates can query nutrition logs per day from database. - Build more validations and enhance UI for
Add Item Form
. Currently the form requires food name and calories and validates numeric values.