Weight Tracker

Overview

This is a weight-tracking application built on the web platform. You can register, modify, delete, and get your weight data with date.

Features

Current

⚠️ These current features are available as a guest, the features login/signup and user data are being implemented soon

• Read the latest weight data registered in the database
• Read all the weight data registered in the database as history
• Add new weight data with a date
• Modify existing weight data by selecting a date
• Delete existing weight data by selecting a date

More to Come

• Login/signup
• Manipulations of user data

Note

You can access the main page where you manipulate weight data at the path "/" and "/Home". The login/signup pages are accessible at the path "/Login" and "/SignUp" respectively, but the user auth feature is not implemented yet. The login/signup feature is coming to take effect soon!

Getting Started in the Local Environment

1. Frontend

• Environment Variable Setting in .env
  • REACT_APP_URL=<Backend URL>
• Start the frontend server
  • npm run start

2. Backend

• MongoDB setting
  • Network access: allow the access from the backend to the Database
• Environment Variable Setting in .env
  • PORT=<PORT>
  • URL=<MongoDB connect URL>
  • FRONT=<The frontend URL>
• Start the backend server
  • npm run dev

3. You are ready to go

• Enjoy the app by adding, modifying, deleting data and reading the latest weight and the history

Tech Stack

Framework

with

Others

Challenges

• Dynamically changed styles based on props in styled-components
  • Avoiding to creation of duplicate components with similar styles
• Component architecture/state management
  • Reduced the number of redundant API calls by passing fetched DB data from a parent component to child components as props instead of each child component calling API on its own, resulting in optimization
• CORS implementation
  • Understood the basics such as the purpose of CORS and how to solve CORS errors