personal-finance-app

KO | EN

gitlite — search

#javascript #react #android #machine-learning #rust #java #windows #awesome #awesome-list #vue #pytorch #security #ios #mcp

personal-finance-app

(★ 9)

This project involves the development of a full-stack personal finance application that helps users manage budgets, savings, and transactions efficiently. This is the front-end repository for the project.

personal-finance-app Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Personal finance app solution

This is a solution to the [Personal finance app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/personal-finance-app-JfjtZgyMt1). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## 📋 Contents

- [The challenge](#the-challenge)
- [Continued development](#continued-development)
- [Setup](#setup)
- [Technologies Used](#technologies-used)
- [Author](#author)
- [License](#📝-license)

## ✅ The challenge

Users should be able to:

- View all personal finance data at a glance on the overview page.
- Browse transactions on the transactions page with pagination for every ten transactions.
- Search, sort, and filter transactions effortlessly.
- Manage budgets and saving pots with full CRUD functionality.
- See the latest three transactions for each budget category.
- Track progress towards each savings goal.
- Deposit and withdraw money from pots seamlessly.
- View recurring bills and their current status for the month.
- Search and sort recurring bills with ease.
- Receive validation messages when required form fields are incomplete.
- Navigate the entire app and perform actions using only a keyboard.
- Experience a responsive design that adapts to their screen size.
- See clear hover and focus states for all interactive elements.
- **Bonus**: Store details securely in a database by building a full-stack app.
- **Bonus**: Create an account and log in with user authentication.

## 🧠 Architecture

## 🧩 Used Concepts

- SOLID
- Dependency Injection
- Repository Pattern

## 🛠️ Setup - Frontend

Follow these steps to set up the project:

Clone the project repository using the following command:

```sh
git clone https://github.com/AdrianoEscarabote/personal-finance-app
```

Navigate to the project's root directory:

```sh
cd personal-finance-app/frontend/
```

Install project dependencies by running:

```sh
npm install
```

### 🚀 Development

To start the development server and preview your application, use the following command:

```sh
npm run dev
```

### 📖 Storybook

Explore and visualize components using Storybook with this command:

```sh
npm run storybook
```

### 🧪 Testing

Run tests by executing the following command:

```sh
npm run test
```

### 🧪 E2E Testing

To run end-to-end (E2E) tests with Playwright, make sure your **backend server is running** before executing the command below:

```sh
npm run e2e:ui
```

This will open the Playwright Test UI for interactive E2E testing.

## 🧰 Technologies Used

**Operational System**

![Windows](https://img.shields.io/badge/Windows-017AD7?style=for-the-badge&logo=windows&logoColor=white)

**Front-end**

![NextJS](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)
![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white)
![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
![React-hook-form](https://img.shields.io/badge/React%20Hook%20Form-61DAFB?style=for-the-badge&logo=react&logoColor=white)
![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)
![Playwright](https://img.shields.io/badge/Playwright-2EAD33?style=for-the-badge&logo=playwright&logoColor=white)

**Back-end**

![Express](https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white)
![Node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![Prisma](https://img.shields.io/badge/Prisma-2D3748?style=for-the-badge&logo=prisma&logoColor=white)
![SQL](https://img.shields.io/badge/SQL-4479A1?style=for-the-badge&logo=sqlite&logoColor=white)

**Tools**

![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white)
![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)
![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)

## 👤 Author

**AdrianoEscarabote**

- Github: [@AdrianoEscarabote](https://github.com/AdrianoEscarabote)
- Linkedin: [@AdrianoEscarabote](https://www.linkedin.com/in/AdrianoEscarabote/)
- Frontend Mentor: [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)
- Twitter: [@drianEscarabote](https://twitter.com/drianEscarabote)

## 📝 License

---

## Show your support

Give a ⭐️ if this project helped you!

personal-finance-app

personal-finance-app Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

personal-finance-app

personal-finance-app Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README