This Finance Tracker App was developed as a part of a coding interview process challenge you can find the specific instructions in the instructions and requirements section.
Develop a responsive and user-friendly frontend using React.js. Create React components for views such as user registration/login, dashboard, transaction history, and financial summaries. Implement client-side routing for navigation using react-router.
Allow users to:
- Register, log in, and manage their profiles.
- Add, edit, and delete financial transactions (income and expenses).
- View a transaction history with descriptions, amounts, and dates.
- See financial summaries, including total income, total expenses, and balance.
- Ensure proper state management for user data and financial transactions.
- Make secure API calls to the backend for data retrieval and updates.
- Create a Node.js server using Express.js to handle HTTP requests.
- Implement a RESTful API to support the following functionalities:
- User registration and authentication.
- Recording income and expenses with descriptions and amounts.
- Listing, editing, and deleting financial transactions.
- Calculating and displaying financial summaries (e.g., total income, total expenses, balance).
- Use a database (e.g., SQLite, MySQL) to store user data and financial transactions.
- Implement secure authentication and authorization for API endpoints using JWT or a similar mechanism.
- Write unit tests for your backend routes and services.
Integrate the frontend and backend components to create a fully functional Personal Finance Tracker. Ensure that user interactions, financial transactions, and summaries are synchronized between the frontend and backend.
Implement data visualization (e.g., charts, graphs) for financial summaries. Add a budgeting feature that allows users to set monthly spending limits and receive alerts when exceeded. Implement data export and import functionality for transaction data. Enhance the user experience with animations, responsive design, and a polished user interface. Add Unit test for the front end.
Include a README.md file that provides an overview of the project, instructions for setup and deployment, and any other relevant information. Document your code thoroughly, including comments and explanations where necessary.
- Completion of core functionalities for a Personal
- Finance Tracker.
- Code quality, organization, and documentation.
- User interface design and responsiveness.
- Effective use of React and Node.js.
- Secure user authentication and authorization.
- Database design and interaction.
- Integration of the frontend and backend components.
- Bonus features and creativity in implementation.
Installl NodeJs version 16.x or higher
To install the project's FrontEnd please open your terminal inside the frontend folder and run the following commands: npm install
npm run build
npm run start
To install the project's BackEnd please open your terminal inside the backend folder and run the following commands:
npm install
npm run build
npm run seed - to create the database and seed data
npm run coverage - to run the tests and create a coverage report that you can see via the \backend\coverage\index.html file
npm run start- make sure to run the build and seed commands before starting the project
To test all the enpoints you can use the FinanceTrackerApp.postman_collection.json file with postman
Since I have more experience working as a backend developer for this challenge I tried to focus more in it to highlight my strengths and experience. First I started with the database design that you can find in the databaseDigram.png file, I chose sqlite3 since it does not require installing or mounting servers and can be used from a file which can be generated by a script. After that I started developing the backend starting with the app, controllers and services for the users.
Once the user endpoints where done I started working on the accounts and transactions, and later the testing for the backend services. In the testing some of tests are skipped because they were failing and I didn't have enough time to fix them.
For the front end I created components for the most important pages login, register and the user accounts dashboard. I'm still learning react so did the best I could for the given time frame, I know I didn't finish the integration but I know I can do better with more time and practice.
For further work in the backend I would add tests for the controllers and helpers, and up the required coverage to 80%, clean the code and make it more readable.
For the front end I would finish the integration, use the Next UI component library to improve the user experience and web design, add the tests with jest and react-testing-library