Description

Add, edit, delete and sort financial records. MERN stack with JWT auth and MongoDB Atlas.

How I Made It

• Front-End built with React.js, utilizing Framer Motion for smooth animations and CSS3 for a responsive dark-themed UI.
• Implemented localStorage for data persistence, ensuring expenses remain even after page refresh.
• Backend developed with Node.js and Express.js, connected to a MongoDB Atlas database for secure data storage.
• Hosted on Vercel for front-end deployment and Render for backend API hosting.
• Created a dynamic sorting feature, allowing expenses to be sorted by name, date and amount with just a click.

Challenges Faced

• Integrating MongoDB Atlas required whitelisting the correct IP addresses and troubleshooting authentication issues.
• Fixing a bug where the expense list would not persist required implementing localStorage correctly and ensuring the state updates properly.
• Deploying the backend on Render was challenging due to environment variable conflicts.
• GitHub rejected an early push due to an exposed JWT key; I quickly revoked and replaced it while properly configuring .gitignore to prevent future leaks.
• The animated landing page required precise timing to ensure smooth transitions without performance issues.

Key Wins

• Successfully deployed a full-stack project with authentication, a database, and a user-friendly UI.
• Overcame deployment challenges and gained hands-on experience with Vercel and Render.
• Designed a professional, sleek UI that offers both functionality and aesthetic appeal.
• Implemented an efficient sorting and filtering system that enhances the user experience.