Skip to content

janbabak/Moneybag-FE

Repository files navigation

Moneybag logo

Moneybag - Frontend

TypeScript Vue.js Vuetify HTML5 CSS3 Figma NPM

📝 Description

Moneybag is a tool for managing personal finances that allows users to create and categorize records, analyze income and expenses, and manage multiple accounts.

The backend was written in Java using the Spring framework and uses a MySql database for data persistence. The frontend is a single-page application connected via REST API and built with TypeScript, Vue.js, and Vuetify.

🔗 Links

⚽️ Project Goals

I created this project for several reasons. Firstly, I wanted to experiment with various technologies. Secondly, I aimed to experience all stages of the software development cycle. Additionally, I intended to add work to my portfolio that would demonstrate my development skills.

🏗️ Realization

First, I created a list of all the requirements, chose the necessary technologies, and then started developing the backend server.

I developed the front end as a SPA using the Vue.js framework using TypeScript instead of JavaScript for convenience and using the Vuetify component library. I used the Axios library for communication with the API and the Apex charts library for chart rendering. I also set up an automatic on GitHub using GitHub actions.

🚀 Features

  • Multiple financial accounts
  • Add records and categorize them
  • Analytic of categories, incomes, expenses, cash flow...
  • Charts
  • Responsive web interface

🧑‍🔬 Technologies

✅ Software requirements

  • npm
  • node

🎬 How to run

Clone repository

git clone https://github.com/babakjan/Moneybag-FE.git
cd Moneybag-FE/

Start backend

Backend repository

Install dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

🎆 Screenshots

Landing

Dashboard

Records

Analytic

Landing mobile Dashboard mobile Edit account mobile Sing up mobile Last records mobile

Releases

No releases published

Packages

No packages published

Languages