Health is the most important and valuable asset we have when living in this world, yet we take it for granted. And It is often difficult for us to realize it’s value until we loss it, So thought building an app to track our health is very important We called the app healthy.me.
The app will help us track our progress toward healthy life, we can track calories taken and workout time done in a day. We will achieve this using reactjs (A javascript framework for building user interfaces) additionally our app will be Artificial intelligence powered, users can interact with the app using voice commands, and we will use wit.ai platform. To interact with the wit.ai api we will use nodejs.
These are the technologies use to build the app.
We choose react because it is going to make our app more manageable in the future hence making adding features to the app easy not to mention it is very fun to write. We choose wit.ai platform because 1.It is easy to use 1.It is free
Here is the app working in action
Application Logic flow figure(mind map)
Installing node js Go to nodejs.org and download the exe , and follow the instructions Wit.ai Go to wit.ai website and create free account Create basic react project
Project setup We are going to use create-react-app to scaffold our basic react app, it will give us folder structure with everything setup. Run the following commands.
npx create-react-app healthyme
cd healthyme
npm start
you should be able to see the basic react page at http://localhost:3000
Now we have our frontend working we need an api to talk to wit.ai api. For that we are going to use simple node.js api. Project setup npm init
Fill the required info Next let’s install Exapress.js, Express is a minimalistic HTTP server for nodejs.
npm install –save express
npm install –save bpdy-parser
npm install –save cors
npm install sqlite3
Here are the the api endpoints that we are going to create.
POST /api/foodEntry
PUT /api/foodEntry/{foodEntryId}
GET /api/foodEntry
GET /api/ foodEntry/{foodEntryId }
DELETE /api/ foodEntry/{foodEntryId }
For workout
POST /api/workout
PUT /api/workout/{workoutId}
GET /api/workout
GET /api/ workout/{workoutId }
DELETE /api/ workout/{workoutId }
GET /api/calorieCount
Deployment to heroku and netlify Deployment to heroku Create a free heroku aaccount if you don’t already have one, thr free and hobby plan is free. These are the steps we follow to deploy our app.
install heroku cli
run heroku login and follow the instructions
run git remote –v to check if heroku remotewas added, if not run git remote add heroku https://git.heroku.com/.git
commit your code git add . && git commit –m “add heroku deploy configuration”
Push everything to heroku using heroku git push heroku maser
voaila Once you finished the last step you can head to the heroku dashboard and you will find project’s url. Deployment to Netlify Netlify is mainly a hosting service for static sites, we will use it to host our react application. To deploy to netlify follow the following steps.
Go to netlify.com
click new site from git
search the healthyme repository
Add build command
click deploy site
vola we have link of live app
What’s next? You can extend this app by doing the following
Resources For extending your knowledge
Author: Garinmckayl
Source Code: https://github.com/Garinmckayl/Healthy.me
#react #reactjs #javascript