Eat Right Project — App Overview
Our project aims at helping people stay healthy, by tracking their calorie intake, it also has a section where one can view recipes and also add recipes. The webpage was created for any who wants to keep track of their calorie intake and eat the right amount of calories per day. It is also a place where anyone can try new recipes from around the world, also submitted by other users.
The team members are Tony Baidoo (myself), Kaleab Tesfaye, Samra Solomon(Me) and . My role was mainly on frontend and also backend, if assistance was needed. Kaleab and Samra’s focus was on backend and also some sections of the frontend (and styling on certain areas of the webpage) as well. We had 3 weeks to finish the project. My personal focus was on the frontend aspect of the project. I worked mainly on the calorie counter feature(using data from a third party API called Calorieninja), page interaction, presenting data from the backend in a user-friendly manner, rendering the page with right recipe information with data and routes from the backend as well as creating and designing the webpage.
Why I choose to work on this project
When we are brainstorming about what project to make, I tried to focus on projects that would be useful to anyone who used it regardless of their background or age. We wanted to the project to have a purpose and I felt this could be a useful project. I have always been an advocate of eating and staying healthy, this project felt as an opportunity to help solve a problem related to what I have an interest in. Everybody loves food, everybody eats but is everybody aware of their daily calorie intake or how many calories are contained in what they eat? Probably not. Not knowing this information means you are going to be eating way above your calorie limit or way below, neither of which is great for your health. This project seeked to solve that problem, provide useful food information and also healthy food recipes from around the world.
Technologies used
For frontend we used HTML, CSS, Vanilla Javascript and Jquery. We used these technologies on a previous project. We found them interesting to use so we decided to hone our skills by using them.
For the backend we used python for programming, MySQL server for storing databases. We also used certain libraries and packages that come with python. Eg. Flask, Sqlalchemy, Flask Cors. We used flask for creating web applications. we went with flask since it is a framework we all knew how to use.
Features
- Calorie Predictor
A client will provide their information, such as age, activity level, and gender to determine what their total calorie intake should be. This information is processed by javascript, and added as arguments to a route. This route will use the information given to query the database and return the calorie intake prediction from the database.
2. Calorie Counter
This shows the client using the calorie counter. They put in the meal and the amount per serving, on the static webpage. That information will be retrieved from 3rd party API(calorieninja) and the calorie amount of the meal will be displayed. The total value of all food calories will be in the total calories row. Image below:
Food can also be removed by clicking on the red dash on the right hand side of the food row, this then updates the total calories value. Example:
3. Recipes
On clicking any of the recipes, a modal popup window opens and displays the details of the recipe(food image, ingrediends and preparation steps). Users can also submit recipes by clicking on the add recipe card and filling in the details
Data Flow of recipe data retrieval:
Technical Challenge
Updating the total value of the calorie counter when an item is deleted was tricky. The idea was to grab removed item, subtract the calories from the total calories and render a new total. Doing this worked but when a new item was added, it still accounted for the deleted item. This was because the value holding the total calories was not updated to a new total each time a deletion was made. I fixed this by subtracting the removed food calories from the main total calorie variable and then passing this new total to be rendered.
What I have learnt
Doing this project, I have realised frontend work is my strong suit. I have learnt to pay more attention to detail and as well as factor in the enduser when building applications. Teamwork matters, we were able to do this project was because we were always in communication and helping each other out. Working in a team means your ideas will not always be the best ideas, It is really important to be open to each other’s ideas and decide on how to make it work with compromise.We would have loved to add a login feature so users could save their calorie and recipe data but due to time constraints, we had to put that on hold. I think I have javascript fundamentals nailed down and its time to pick a framework, I am going to go with REACT. Looking forward to the learning more.
I am Tony Baidoo, a Software engineer from Ghana. I am interested in solving problems with software and exploring new things. I am mainly interested in frontend and backend development. Programming languages used include C, Python and JavaScript.
Link to project: https://github.com/tcrz/Eat_Right
linkedIn: https://www.linkedin.com/in/tony-baidoo-0aaab7230
Deployed project: http://web-01.tonycrz.tech/eat_right