khomch / SpendTune-Solo-Project

SpendTune — Minimalistic personal expense tracker

This is the fork of original project by Kamil Zmuda.

Screenshots

Getting started

1. Clone the repo

git clone https://github.com/Kamil-Zmuda/SpendTune-Solo-Project.git
cd SpendTune-Solo-Project

---

This application is integrated with Plaid's open banking API which is used to authorize and connect the user with their banking institutions.

Plaid's API offers many products however for app needs I'm using 'transactions' to fetch and sync them. Follow these steps:

To configure the API it's necessary to register an account at: https://dashboard.plaid.com/signup

Now go to your dashboard and select Developers => Keys section

Here you will find your client_id and Secret keys.

Go to project's /server folder and create a .env file, make sure to add this file to your .gitignore list, as it will store some sensitive data you don't want to expose.

Populate the .env file:

• PLAID_CLIENT_ID= client_id from Plaid's dashboard
• PLAID_SECRET=secret key from Plaid's dashboard
• PLAID_ENV=sandbox <= here you specify your environment - sandbox mode allows to fetch mock data from Plaid's mock institutions, so you don't need to worry about leaking your real data.
• PLAID_SANDBOX_REDIRECT_URI=http://localhost:3001 <= redirect URI for server
• SERVER_PORT=3001
• SECRET="spendTune"

Now go to your dashboard and select Developers => API section.

Here you need to specify allowed Redirect URIs, same as above in the .env file.

Now you're good to go.

---

2. Setup and run the server:

• Install and run MongoDB process;
• Install dependencies:

cd server
npm i

• Run the server:

npm run dev

3. Setup and run the client:

• Install dependencies:

cd client
npm i

• Run the client:

npm run dev

Open http://localhost:3001 with your browser to see the result.

Built with

Frontend

• Typescript - Strongly typed programming language that builds on JavaScript.
• React - Library for web and native user interfaces.
• Zustand - State management solution.
• JEST - JavaScript testing framework.
• Cypress - e2e testing tool.
• Figma - UI design tool entirely focused on user interface design.

Backend

• Node.js - Open-source, cross-platform JavaScript runtime environment.
• Express.js - Unopinionated, minimalist web framework for Node.js.
• MongoDB - Document-oriented database program.
• JEST - JavaScript testing framework.

Our contribution

1. Redesigned with Figma.
2. Created GH Project page to manage tasks.
3. Rebuld app from Javascript to Typescript.
4. Created new layouts.
5. Split CSS using BEM methodology.
6. Covered client and server with unit tests.
7. Added e2e tests.

Authors

Juan Vasquez - Github - LinkedIn

Anton Khomchenko - Github - LinkedIn

License

This project is licensed under the MIT License.