SPENDSENSE

SpendSense is a revolutionary web application that simplifies personal finance management and shared expense tracking. Through extensive research and user surveys, our team identified the need for a centralized and user-friendly platform to enhance financial processes and user experience. With SpendSense, users can effortlessly track their income, expenses, and budgets, while also managing shared expenses within groups. The platform offers a clear and intuitive interface, allowing users to input their financial data, analyze spending trends, and set budget goals. It also promotes transparency and eliminates disputes by enabling users to create and manage groups, add expenses, and split costs among members. SpendSense's secure payment feature ensures convenient settlement of financial obligations within the platform. In summary, SpendSense provides a comprehensive and user-friendly solution for personal finance management and shared expense tracking. It streamlines financial processes, enhances transparency, and improves the overall user experience, catering to the evolving needs of individuals and groups.

Links

• Netlify URL (Deployed site): https://spendsense-app.netlify.app/

Authors

• Aayush Yogesh Pandya
• Harsh Vaghani
• Nikhil Panikkassery
• Pratik Mukund Parmar
• Raj Patel
• Sagar Paresh Shah
• Siddhesh Salve

Pre-requisites

• Download and install Node.js
• Clone this repository.
• Type the following commands after opening this folder and navigating to frontend and backend in VSCode:
  • npm install
  • npm start

Frontend Deployment

• The frontend of the web application has been deployed on Netlify

Backend Deployment

• The backend of the web application has been deployed on Render

Built With

• React - Web framework
• React Material UI - Web Component Library
• React Router DOM - Library for routing through different pages
• Node.js - Open source runtime environment
• Express.js - Node.js web application framework that provides HTTP utility methods and middleware for creating a robust API
• Mongoose - Object mapping package between MongoDB and Backend schema
• Mongodb- Data storage

Sample Login Credentials

• Username: [email protected]
• Password: Spendsensepass123*

References

Frontend

• The component tags (CSS components) have been adapted from React Material UI which were implemented in their official documentation.
• React Material UI's Code was used as a CSS framework and a reference to understand how to implement different elements on the UI in React.
• React Material UI's component code was modified by the team by adding custom logic, custom styling and onClick behaviors.

Backend

• The Mongodb schema has been adapted from Mongoose Schemas which is implemented in their official documentation.
• Mongoose Schemas's code was used as a reference to understand on how to implement schemas in MongoDB.
• Mongoose Schemas's code was modified by the team by writing the custom schema as per the requirements.

Additional packages

• React Material Icons was used for the icons.
• Axios was used to make API requests.

Images and Icons

• The Noun Project: All the below icons have been adapted from The Noun Project.

  • https://thenounproject.com/icon/report-5908307/
  • https://thenounproject.com/icon/add-user-680064/
  • https://thenounproject.com/icon/financial-history-995039/
  • https://thenounproject.com/icon/analytics-884669/
  • https://thenounproject.com/icon/user-appointment-2739479/
  • https://thenounproject.com/icon/plus-2780698/

• Freepik: All the below images have been adapted from Freepik.

  • Image by vectorjuice on Freepik

  • Image by vectorjuice on Freepik

  • Image by storyset on Freepik

  • Image by vectorjuice on Freepik

  • Image by pch.vector on Freepik