Flat-Tracker-Pal

Project Collaboration

• Avelon Pang
• Chi Nguyen

Overview

A ReactJs application that tracks and organizes the user’s record of their daily food and calorie intake

About

• Authenticated users with multiple validations for increased security of user’s personal account
• Created multiple client-side routes on a single page application in a test driven development
• Integrated React hooks to track the state and lifecycle features from functional components
• Applied ActiveModel to encapsulate the JSON serialization of objects from its hash-driven development

Demo

• Short Demo Video

To Start This Project

• App: rails db:migrate, rails db:seed, rails s
• Frontend: npm install, npm start

User Stories

• Must login or create an account
• Select the targeted daily calories
• Browse health articles on homepage
• Search for various food and drinks
• Select any date on the calender to track their calorie intake
• Add the selected food or drink and quantity to log their breakfast,lunch and dinner
• Live updates of the user's daily caloric intake on screen
• View all the items' calories and quanty added
• User can log out when finished

Resources

• Styled with Material-UI and Chakra-UI