My Diet Diary

A full-featured interactive web application in HTML, CSS and React JS that keeps track of users’ diet plans.

Link to the hosted website:


MyDietDiary is our team project for the course INFO 340 – Web Programming. Our group decided to focus on tracking BMI data and diet plans because we noticed that people’s eating habits in modern days lack specific categories of food, with mostly only fat, starch, and sugar for a meal. Busy schedules also lead to people eating on the run, which results in poor nutritional intake. We hope MyDietDiary will help users achieve a healthier lifestyle by monitoring BMI results and tracking daily food intake.


Calculate & Track BMI

You can caculate your BMI by providing your weight and height, And your BMI will be recorded and shown in a trending chart!

Make Diet Plan

You can add the food items into your diet plan with a date. The search food and filter food catogery functions can help you find the results quickly. If your desired food does not exist in the database, you can customize one using “adding food to database” button!

View Diet Plan

You can view your added food items based on selected date. All information regarding the food items will be displayed. If you have accidently added wrong items, you have the option to remove them from your plan!

Credit: INFO 340 Group A6


View Github