top banner

Spendser

A full stack personal money management solution created with MERN stack and Next.js.


Frontend Repo Backend Repo Live Site

Screenshots


screenshotscreenshotscreenshot

Case study


Being a student, I have a lot sources of money to earn and spend on, I saw that my management of money is not in the best shape and I do not have infrormation about all my earnings and spendings. So I wanted to create a software solution that will help me to track all my transactions in a single place. Fortunately This project helps me to do so.

Technical Details


As a JavaScript developer, My first approach to solve this problem was to use the MERN stack I am proficient of. I used React for the frontend, Node.js for the backend and MongoDB for the database. I wanted to try some of the trendy technolgies in the market such as ShadCN UI and Next.js. I also used JWT for authentication and Redux for state management. Overall, I am really happy about how the project turned out.

Problems Faced


While I was developing Spendser, I have faced issues like
  • When I was using API route of the next.js latest version, I was overwhelmed to how to deal with it. Fortunately, my skills in express.js helped me to solve the problem and write basic database queries easily.

  • It was the first time for me to use ShadCN UI and I was not sure how to use it. I had to go through the documentation and read it throghly, did some experiments first, then it became easy for me to use in the project.

  • Working with next.js with Redux is kinda tricky in the first place for me, as we need to create client component in order to use the hooks of redux, it felt bit tricky for me and still I am not sure how to solve the issue.