This Expense Management Application allows users to track their expenses by categorizing them, adding comments, and viewing a table of all their recorded expenses. Users can also update and delete their expenses, and the application automatically sorts the expenses by the most recently added records.
- Add Expense: Users can add new expenses with details such as category, amount, comments, and timestamps.
- View Expenses: View a table listing all recorded expenses with columns for Category, Amount, Created At, Updated At, and Comments.
- Edit Expenses: Users can update the details of an existing expense.
- Delete Expenses: Users can remove any expense record.
- Responsive Design: The application is mobile-friendly and adjusts to different screen sizes.
- React: Frontend JavaScript library for building user interfaces.
- Node.js: Backend runtime environment.
- MongoDB: Database for storing expense records.
- Axios: HTTP client for making requests to the backend API.
- CSS: Custom styles for a modern, clean UI.
Follow these steps to set up and run the project locally.
git clone https://github.com/your-username/expense-management-app.gitFrontend:
cd Frontend
npm installBackend:
cd Backend
npm installStart the development server
Backend
npm run startFrontend
npm run dev-
Expense Creation: Add a new expense with details like category, amount, and comments.
-
Expense Listing: View a sorted list of all expenses with detailed information such as category, amount, and timestamps.
-
Expense Edit: Modify the details of an existing expense.
-
Expense Deletion: Delete expenses from the list permanently. Responsive Design: The application adapts to different screen sizes for mobile and desktop use.
Here’s a screenshot of the Expense Management Application in action:
