Finance Tracker App

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.

Table of contents

Assestment Instructions

Scripts and run instructions

Developer notes, comments and further work

Instructions and requirements

Front-end Development (React.js)

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.

Back-end Development (Node.js)

• 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.

Integration

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.

Additional Features (Bonus Points)

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.

Documentation

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.

Evaluation Criteria

• 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.

Scripts and run instructions

Prerequisites

Installl NodeJs version 16.x or higher

Frontend

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

Backend

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

Developer notes, comments and further work

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