• 

• 

  Home Page

• 

  Create Account(Sign-up)

• 

  Add new Group

• 

  Add Group Memebers

• 

  Add your Expenses

• 

• 

  Pay your Bills Page

• 

  Expenses Details

• 

  Shows Details Representation of Groups

• 

  All Group Details

• 

  Chart Representation

Financial Bill Management

Inspiration

Motive/Idea:: Users frequently experience problems when sharing among themselves, which inspired the idea for this application. The division of expenses among the group may be confusing, and maintaining personal spending is a major worry. Sticky notes were used by common people, spreadsheets were used by professionals, and ledgers were used to keep track of significant sums of money in the past. Consistency of the data, the chance of missing crucial inputs, and the possibility of human error are still problems. Data recorders are not always readily available, and it could take some time to gain a complete picture of those fees.

What it does

It is a web application created with the web in mind. It is intended to meet the needs of the user by lessening their effort in paying the payment. The software encourages corresponding users to assist in determining who owes whom what and for what. To give users the finest means of making it simple for them and their companion to split costs. This application will enable group users and their friends to view individual costs in detail inside the app and to pay for them via payment gateways. Made with ReactJS, Typescript, NodeJS, and TailwindCSS.

This application is clever enough to demonstrate who owes whom. And how much more? " By enabling online payment gateways, this application will also enable transactions.

Features

The user can perform the following actions on this Financial Bill Management:

Sign Up/In

This application will include a user login screen and a registration option. When using this programme for the first time, the user must register. However, a user who has already registered can access the application by entering the login credentials they made when registering.

Managing Groups

The user of this programme has the choice to either establish a new group or modify an existing group that their friend has already created and added to. Only the person who created the group will be able to add members and remove them from the group.

Tracking Expenses

Each group member has the ability to add expenses as necessary. Each entry should include information such as the date the item occurred, the item's cost and who paid it, etc. There is a form for entering the cost and choosing the members who were involved in the expense when adding an expense. The mechanism will distribute the cost equally among the chosen members. Following the split, the record will be saved and made available to all group members. Each participant in the expense split transaction will be listed, and an option to pay your friends will also be present.

How we built it

This project was developed with the following technologies:

Frontend _{^{React + JavaScript + Next.js}}

• React
• Axios
• Redux
• TailwindCSS

Backend _^Express

• Express

How to run

• Copy .env.local.example to .env.local and fill it with environment variables
• Install the node_modules with yarn install
• Start both the servers on the different servers. For frontend run yarn start and for backend run yarn dev
• Make sure to add .env file in both the frontend and backend project. (Check the Readme for the .env.example)
• Update the local .env file accordingly. Open an issue thread if any error occurs.

Challenges we ran into

• Updating Expenses Cards after an action was performed.
• Providing a way to invite new members in a group.
• Keeping tracks of every expenses and updating in real time.

Accomplishments that we're proud of

• It was my first Hackathon and I have completed in span of 2 days.
• I was able to use MongoDB Atlas Effectively and able to use in Live Project.

What we learned

• I was able to make project which fits the theme of Finance(Developed a Projects according to it's requirement)
• I was able to integrate all things React, Express, TypeScript at the right time.
• I was able to resolve most backend query of Express and MongoDB after watching lot of Tutorials and Stack-Overflow Answers

What's next for Financial Bill Management

• I am planning to make also android version out of it so that it can react out to maximum people with help of Application Developer

Get in touch!

Made with ❤️ by Nisarg Thakkar for Fin Hacks-2.

Built With

• express.js
• react
• typescript