Personal·Web2021
Debts
PWA built with MERN that allows users to record all debts and borrowed money between groups of friends and makes trip budget divisions easy
1 min read
Languages
Frameworks & Libraries
Data & Storage
Overview
Created during a trip with friends in 2021, Debts was built to solve the classic group travel headache of keeping track of shared expenses without losing track of who paid for what.
I used this as a hands-on opportunity to learn and apply the MERN stack (MongoDB, Express.js, React, Node.js), building a complete full-stack application from scratch in just one week.
Key Features & Architecture
- User & Debt Management: Full CRUD functionality for users and debts, allowing items to be logged, partially updated as payments are made, or cleared entirely.
- MERN Backend Logic: Node.js and Express.js API connected to MongoDB via Mongoose for schema modeling and data persistence.
- Animated Frontend: Dynamic UI built with React and styled with custom CSS, leveraging Framer Motion for smooth component transitions.
Challenges & Key Learnings
This project was my first deep dive into React and Framer Motion, providing a great foundation for modern frontend web development.
- First-Time React & Framer Motion: Learning component-driven architecture, state management, and integrating declarative animations for the first time.
- Responsive Design: Tackling custom CSS layout challenges without a CSS framework to ensure the UI remained clean across devices.
- Rapid Prototyping: Designing, architecting, and deploying a full-stack app within a 1-week timeframe.
Project Gallery