Track Your Progress, Transform Your Health – Weight and Age Tracking Made Easy
Goal
The goal of this project was to develop a user-friendly Weight and Age Tracking app designed for individuals in the healthcare and fitness sectors. Using React for the front-end, Bootstrap for responsive design, and Mongoose for backend data management, I aimed to create an intuitive platform that allows users to easily track and monitor their personal health data over time. By ensuring seamless integration between the front-end and back-end, I focused on providing a smooth and engaging experience that supports users in managing their fitness progress and health goals.
App Development Overview
The Weight and Age Tracking App was developed using a modern tech stack, including React for the frontend, Bootstrap for responsive styling, and CSS for customized design elements. For backend functionality, I utilized Mongoose to handle database queries and store user data efficiently. The app is deployed on Render’s cloud hosting platform, ensuring real-time access and smooth performance. The primary goal of the app is to provide users in the healthcare or fitness sectors with an easy-to-use tool for tracking weight and age, allowing them to monitor their progress and make informed decisions about their health.
The app is built around a clean, user-friendly interface. Users can add, view, edit, and delete personal data, such as their name, weight, and age, with ease. The Person List page provides an overview of all individuals in the system, and users can search for specific entries using the search bar. The detailed view and editing capabilities offer users the flexibility to keep their information up to date.
Key Features & Functionality:
- Person List Page: Displays a list of individuals with their name, weight, and age, allowing users to quickly view all the tracked data. A search bar is included for easy look-up of specific individuals by name.
- Person Details: Clicking on an individual’s name directs the user to a detailed view that shows their name, weight, and age in a clear format, helping users monitor their progress.
- Edit Functionality: From the Person Details page, users can modify or delete existing information with a simple “edit” button, making it easy to keep data up-to-date.
- Add New Person: Users can add new individuals to the app by navigating to the “Add Person” page, where they can input and save information such as name, weight, and age.
- Seamless User Experience: The app is designed to be intuitive and responsive, ensuring a smooth user experience across both desktop and mobile devices. Whether tracking one’s own information or multiple individuals, the app provides a clear and accessible interface.
- Cloud Hosting: Hosted on Render’s cloud platform for real-time access, ensuring fast performance and availability of user data whenever needed.
Technologies Used:
- React: Utilized for building the dynamic and interactive front-end of the application, ensuring a seamless user experience.
- Bootstrap: Used for responsive design and layout, allowing the app to be easily viewed and navigated on different screen sizes, from mobile devices to desktop.
- CSS: Custom styles to enhance the visual appearance and ensure a polished, consistent user interface.
- Mongoose: Employed for handling database queries and managing the storage of user data, ensuring smooth communication between the front-end and back-end.
- Node.js & Express: Backend development was powered by Node.js with Express to handle server-side logic and API routing.
- Render (Cloud Hosting): Deployed on Render for real-time hosting, ensuring continuous access to the app and scalable performance.
- JSON: Used for storing and managing data, providing an efficient format for saving user details such as weight and age.
This app offers a seamless and user-friendly experience for managing personal data related to health and fitness goals.
Weight and Age Tracking App Website View
Weight and Age Tracking App on Render: Video presentation
Challenges
One of the challenges I encountered during the development of this app was ensuring smooth integration between the front-end and the back-end. Handling dynamic data and ensuring that the app’s interface updated seamlessly when changes were made to the database required careful attention to state management in React and proper use of Mongoose for database queries.
Another challenge was maintaining a user-friendly experience while ensuring the app remained functional and efficient as it scaled. As more users and data were added, I needed to ensure that the app could handle larger datasets without compromising performance.
Additionally, styling the app with Bootstrap and CSS while maintaining responsiveness across different devices required careful layout adjustments. It was important to ensure the app looked great and worked well on both desktop and mobile platforms.
Lastly, deploying the app on Render’s cloud hosting service posed its own challenges in terms of ensuring reliable performance and managing deployment configurations. Despite these challenges, the app was successfully developed and deployed, offering users a powerful tool to manage and track their health and fitness data.
Tools
- Visual Studio Code (VS Code)
- GitHub
- Render