Recreating the Center of Mass Calculator: A Year of Growth
In 2022, I was given a task during a job application process that seemed straightforward: create a website that functions as a Center of Mass Calculator. While the task was simple in concept, it gave me a chance to demonstrate my skills and was a great starting point for my development journey.
Fast forward three months later, and I’ve decided to revisit this project with all the new skills I’ve gained. I’ve recreated the project with a fresh approach, incorporating advanced tools and techniques that I had not initially used. Notably, I added authentication and a database, which were not required for the original task. This post takes you through my journey, the lessons I’ve learned, and the tech stack I used in the process.
The Task at Hand
The original requirements for the project were simple:
- Add items to the list
- View and delete items
- State persistence was not required, meaning the list would reset if the page was refreshed
- Optional functionality, like editing items, could be added later
I was tasked with building a functional app to calculate the center of mass of a set of items based on their mass and coordinates. While the core concept was easy, it was a good exercise to build a fully functional web app.
New Features: Database & Authentication
Three months after I was assigned the project, I decided to extend it by adding features that weren’t required initially. Specifically, I implemented authentication and connected the app to a database. This allowed users to sign up, log in, and securely store their items, which would persist even if the page was refreshed.
Build Tool – Vite 🚀
Previously, I always used create-react-app for frontend development. But this time, I opted to try Vite. It's becoming a popular choice due to its blazing-fast hot module replacement (HMR) and faster start time. Setting up Vite took some getting used to, as I had to figure out how to replicate the proxy setup I was used to with create-react-app, but it was worth the learning curve!
Component Library – MUI 🌟
In the past, I worked with Ant Design and BootstrapUI, but this time I chose to dive into MUI (Material-UI). MUI offers a sleek, consistent design system, and it was a fun learning experience. Building the UI with MUI was a smooth process, and it gave the project a polished look right out of the box.
Backend: Node.js and Firebase 🔥
The backend was built using Node.js with Express to handle routing. I used Firestore from Firebase for both authentication and storing item data. The backend serves as the API, allowing users to sign up, log in, and perform CRUD operations on their list of items.
What I Learned 🧠
I learned a lot throughout the process of recreating this project:
- How to use a new component library (MUI)
- How to work with a new frontend build tool (Vite)
- How to create a backend API with authentication using Firebase
- How to perform CRUD operations on Firebase documents
- Better understanding of React, particularly state management and prop drilling
- Improved design skills and UI/UX principles
This project not only helped me reinforce my existing knowledge but also pushed me to learn new tools and improve my workflow. I'm excited to keep building on these skills and take on more challenges in the future.