Calorie Tracker

With this project I tried to make an application that could connect to an external API to retreive relevant calorie information from different food items searched. Along with this I used Chart.js and React Calandar to assist the user in keeping track of how many calories they are consuiming on a daily basis. The functionality I gave the calandar was to keep track of the items added which could be seen in the list section given the day that the user clicks on. The chart keeps track of the days the user has added items to and will display the total amount of calories eaten for that day along with the calorie limit that the user has set.

This was one of my first projects where I used the React framework to design the structure of a site. I'm still pretty new to React so dealing with components and passing props felt a bit tricky at first. However, as the app was being put together, I found that dealing with components was an organized way of structuring code. Styling the app was actually the hardest part for me because the chart and calandar components came with their own CSS that I was not too familiar with at the time so I tried to style it enough to achieve a minimum viable product (MVP).

Check out my site on netlify: Calaorie-Tracker