destiny0114/nutritionx

A Nutrition Tracker web application

A Nutrient Monitor Web Application used to tracking what food nutrient that exactly needs on the body.

Background

This Web Application was used to help people they need to know about knownledge of food thats make life more healthy. You can able to record eaten food by dates and also tracking down how much you have calories, carbs, proteins and fat by day even past week. Besides Nutritionx provides autocomplete search to let people find out what nutrients have on that food. Remember to check it out.

The Application was used Node.js to built it. I used Figma as UI/UX tool and refer some ideas on Dribble or Pinterest to make prototype of design. When prototype have finished, an arduous journey has begin because the developer aka only me must convert design into application that can be used by people. Im using a frontend framework called React to follow up my interface design and styling with Tailwind, as my project was bigger than i thought, the state management became hard maintain thats why i have to use the Redux as my state management, for simple state still using React state. The Dayjs is a great tool to handle somethings about date or time and its smaller library. The user data will be store at indexeddb. Whole project written by typescript and took me about 9 month weekdays 4-5 hour each day.

That's it, im sure it was a great experience for myself!

Technology

• React
• Create React App
• React Router
• Redux
• day.js
• axios
• Tailwind
• localforage
• immer
• craco
• lottie
• Full Calendar
• Recharts

Installation

The web application was built with Node.js and powered by Nutritionix. Be sure go check them out if you don't have them.

Install Dependencies

After that, you need to install dependencies and the command at below:

npm

$ npm install

yarn

$ yarn install

Enviroment Variables

The web application was powered by Nutritionix. Thats mean we need x-app-id and x-app-key to able request the data and response to our web application.

Follow my step:

1. First go to Nutritionix sign up after that sign in your registered account.
2. After you signed in, click View API Keys at your right hand side of navgation.
3. Now you able to saw the Application ID and Application Keys if keys didnt showed up you can able to click Create New Key to generate new key.
4. Create a .env file to store the Application ID and Application Keys at Root Directory like below: The project was used create-react-app tool so Be sure using prefixed REACT_APP_YOURENVVAR else the env will not working.

// .env
REACT_APP_NUTRITIONX_APP_ID=<x-app-id>
REACT_APP_NUTRITIONX_APP_KEY=<x-app-key>

5. This is our folder structure

   .
   ├── public
   ├── src
   ├── .gitignore
   ├── craco.config.js
   ├── package.json
   ├── tailwind.config.js
   ├── tsconfig.json
   ├── .env
   ├── yarn.lock
   ├── LICENSE
   └── README.md

For more, please refer their documentation.

Usage

The installation are done now you can run the nutritionx and also modify the project since its open source.

Let's run the Nutritionx locally by typing the command.

npm

$ npm start

yarn

$ yarn start

View the website at: http://localhost:3000. Thats it!

Contributors

This project exists thanks to all the people who contribute.

License

MIT © Kenna Levine
Powered by Nutritionix