Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abimh66/bank-app

Last synced: about 16 hours ago
JSON representation

Host: GitHub
URL: https://github.com/abimh66/bank-app
Owner: abimh66
Created: 2024-02-19T04:05:51.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-02-23T04:34:37.000Z (9 months ago)
Last Synced: 2024-02-23T19:00:53.762Z (9 months ago)
Language: Vue
Size: 203 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Bank App

Aplikasi Keuangan yang mencakup pemasukan, pengeluaran, transaksi.

## Daftar Isi

- [Project Setup](#project-setup)

- [Overview](#overview)

  - [Penjelasan Project](#the-challenge)

  - [Screenshot](#screenshot)

- [Proses](#proses)

  - [Stack yang digunakan](#stack-yang-digunakan)

  - [Resources](#resources)

- [Author](#author)

## Project Setup

```sh

npm install

npm install -g json-server

```

### Run Backend with JSON Server

```sh

json-server --watch src/data/data.json --port 8000

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```

\*Cek user username dan password di src/data/data.json atau http://localhost:8000/users setelah local backend server dijalankan

## Overview

### Penjelasan Project

Pada project ini saya membangun sebuah Aplikasi Keuangan yang mencakup pemasukan, pengeluaran, transaksi. Credit design by [Matteo Della Chiesa](https://dribbble.com/MatteoDellaChiesa).

Objektif pada project ini:

- Bersifat responsive

- Terdapat skenario gagal yang nantinya dapat memunculkan notif

- Terdapat grafik pemasukan & pengeluaran

- Terdapat mekanisme filter harian, bulanan hingga tahunan

- Terdapat mekanisme pin (saat melakukan transaksi)

### Screenshot

**Tampilan Desktop**

![Tampilan Desktop](./public//screenshot/screenshot-desktop.png)

**Tampilan Mobile**


![Tampilan Mobile](./public/screenshot/screenshot-mobile.png)

## Proses

### Stack yang digunakan

- [Vue](https://vuejs.org/)

- [Tailwind CSS](https://tailwindcss.com/)

- [Apexcharts](https://apexcharts.com/)

- [VueUse](https://vueuse.org/)

- [FakerJs](https://fakerjs.dev/)

- Mobile-first workflow

## Author

- Twitter - [@abimhrdnt](https://www.twitter.com/abimhrdnt)

- Frontend Mentor - [@abimh66](https://www.frontendmentor.io/profile/abimh66)

- Codewars - [@abimh66](https://www.codewars.com/users/abimh66)