Daily Protein v2.0

SPA that users can sign up, calculate, and track daily protein intake. This is the personal project to practice MERN stacks and Firebase Auth.

🚀 View Live Demo · 📝 Explore Docs

📗 Table of Contents

• About Project
• Roadmap
• Built With
• Acknowledgments
• License
• Contact

📖 About Project

Purpose

Daily Protein is a user-friendly Single Page Application that helps users in monitoring their daily protein intake. With Daily Protein, users can effortlessly calculate their required protein amount for each day and set targets to track their progress by searching and logging meals on the app.

Key Features

• Sign up / Sign in account
• Save and update personal diet data
• Calculate daily protein intake
• Search foods to retrieve detailed nutrition info
• Add foods to personal dashboard and track protein intake

🔭 Roadmap

Version 1.0

At this stage, I focused on developing frontend style and functionalities. So I implemented Firebase firestore for database to achieve CRUD operations as serverless.

• Design client side view with React.js and Sass
• Feat RESTful API to fetch food data and create search function
• Feat protein calculation function
• Feat Firebase Firestore to CRUD data
• Feat Firebase Auth to authenticate user

🚀 View V1 Live Demo · 📝 Explore V1 Docs

Version 2.0

In Version 2.0, I separated frontend and backend to practice full-stack development workflow. On the client side, I implemented a robust CSS framework and libraries to ensure a consistent design. Additionally, I refactored the code using TypeScript for better maintainability and ease of debugging. To manage states across components, I integrated Redux Toolkit. For the backend, I built a server using Express.js and connected it to a MongoDB Atlas database instead of Firebase.

• Organize folder structure to 'clent' and 'server'
• Design client side view with Material UI and Tailwind CSS
• Refactor code with Typescript
• Feat Redux Tookit to manage states for Auth and forms
• Feat server with Express.js
• Connect server and client side with Axios http requests
• Migrate and connect database to server using Mongo DB Atlas

🚀 View V2 Live Demo · 📝 Explore V2 Docs

🛠 Built With

Frontend

         

Backend

       

🙏 Acknowledgments

• Edamam Food database API
• Bodybuilding Protein Calculator
• Firebase Github open source code

📝 License

Distributed under the MIT License. See LICENSE for more information.

📨 Contact

• Jen Kim - @jenny_seojeong_kim - hello@seojeongkim.com

• Come to see more projects - Portfolio

(back to top)