ExpenseWise

ExpenseWise is a Personal expense tracker, designed to help users manage their expenses efficiently. It consists of a backend built with Spring Boot and a frontend built with React. Authentication and authorization are implemented using Spring Security.

Preview

Technologies Used

| Frontend                         | Backend                        |
|----------------------------------|--------------------------------|
| React "^18.3.1"                  | Spring Boot 3.3.1              |
| Styled Components: "^6.1.11"     | Spring Security 6.3            |
| React Error Boundary: "^4.0.13"  | Spring Data JPA                |
| React Hot Toast: "^2.4.1"        | spring-boot-starter-validation |
| React Hook Form: "^7.51.5"       | Java 17                        |
| Axios: "^1.7.2"                  | H2 DB -> MySQL                 |
| React Icons: "^5.2.1"            | Lombok                         |
| React Modal: "^3.16.1"           |                                |
| React Router DOM: "^6.23.1"      |                                |
| Recharts: "^2.12.7"              |                                |

Features

• User authentication and authorization using Spring Security.
• RBAC Implementation
• Expense Dashboard
• CRUD operations for managing expenses and users.
• Global Exception Handler
• A Dashboard app with User profile page and admin pannel.
• Data visualization using Recharts.
• Darkmode and lightmode.
• Reusable UI Components.
• Real-time error handling with React Error Boundary.
• Form validation using React Hook Form.
• Toast notifications using React Hot Toast.
• Routing with React Router DOM.
• Styled Components and GlobalStyles for styling.

ER-Diagram

Issues Faced and Resolutions

Here are some of the issues I faced during creating this project and how I resolved them:

Backend Issues

• Redirect Issue: After connecting to the React login endpoint, I encountered too many redirects because I was using formLogin() in Spring Security, which is intended for Thymeleaf or other Spring views, not for React.
• CORS Configuration: Addressed by configuring CORS settings in the backend to allow requests from the frontend.
• SQL Reserved Keyword: Was named an entity as "user" but found that it's a reserved keyword in SQL. Avoided using reserved keywords like "user" for entity names to prevent conflicts.
• File-upload issues: Encountered an HttpMediaTypeNotSupportedException and multipart file error while attempting to upload files. Fixed them all.
• User mapping issue: Encountered a user mapping issue in expenses where user is null. Currentlly fixing it.

Frontend Issues

• React Redirect Issue: react-router-dom requires proper configuration in webpack. You need to set historyApiFallback: true in the dev-server to enable routing functionality correctly. It redirects all requests to the root URL (e.g., /) so that React Router can handle them.
• react-hhok-form issues: Was facing issues with registering inputs fixed it.
• Handling User Data: Faced uncertainty about where to manage user data and how to integrate it with authentication.
• Resolved Infinite Render Loop: Initially encountered an infinite render loop due to incorrect logic, trying to fetch and set user details in the AuthContext directly from the LoginForm. Rectified by separating concerns: LoginForm handles authentication, setting user ID, while useUser() hook independently fetches user details.
• React form issue: React form data was not including file data and image preview was not showing.

Future Work

• Implement OAuth and JWT authentication
• Add forgot password functionality with OTP verification
• Set up testing, deployment, and CI/CD pipelines
• Implement backend for split expenses with friends and connect it with expenses
• Update user profile to include balance and other relevant information
• Add options for editing and deleting expenses
• Explore additional features and improvements

Steps to Run the Project

Ensure you have Docker and Docker Compose installed on your system.

1. Clone the Repository:

   git clone https://github.com/yourusername/yourproject.git
   cd yourproject

2. Build and Run the Containers:

   docker-compose up --build

   This will build the frontend, backend, and MySQL services, and start them up.

3. Access the Application:

   • Frontend: Visit http://localhost:9000 in your browser.
   • Backend: The backend service runs on http://localhost:8080.
   • Database: MySQL is exposed on port 3307.

4. Shut Down the Containers:

   docker-compose down

   This will stop and remove the containers.

Troubleshooting

If you encounter any issues, check the container logs:

docker-compose logs

Ensure all services are up and running:

docker ps

Notes

• The frontend is built using Node.js 20 and served with Nginx.
• The backend is built with Maven and runs on OpenJDK 17.
• The MySQL database is initialized with the expenses database.

Contributing

To contribute to this project, please review our Contributing and Pull Request Guidelines for detailed instructions on how to create and manage pull requests.

Feel free to explore the code and contribute if you'd like! If you have any questions or feedback, please don't hesitate to reach out.

Thank you for checking out my projects! 🚀