https://github.com/inna-b10/bank-app

"Bank APP" offers a user-friendly interface for displaying recent transactions and financial statistics, facilitating the transfer of funds to contacts, simulating account replenishments and withdrawals, and providing a search function for locating contacts. The entire app was built using pure Vanilla JavaScript.
https://github.com/inna-b10/bank-app

dotenv gh-pages javascript project sass vite

Last synced: about 1 month ago
JSON representation

"Bank APP" offers a user-friendly interface for displaying recent transactions and financial statistics, facilitating the transfer of funds to contacts, simulating account replenishments and withdrawals, and providing a search function for locating contacts. The entire app was built using pure Vanilla JavaScript.

• Host: GitHub
• URL: https://github.com/inna-b10/bank-app
• Owner: Inna-B10
• Created: 2024-10-21T20:05:25.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-11-14T14:16:16.000Z (7 months ago)
• Last Synced: 2026-01-08T12:14:53.119Z (5 months ago)
• Topics: dotenv, gh-pages, javascript, project, sass, vite
• Language: JavaScript
• Homepage: https://inna-b10.github.io/Bank-APP/
• Size: 1.06 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Project name: Bank APP

### Online intensive course - frontend

## 💎 Description

[](preview.png)

Simple web application that displays recent transactions and account statistics, allows sending money to contacts, simulates balance top-ups and withdrawals, and includes a contact search feature.

Initially bootstrapped with Vite, the entire app was built using **pure Vanilla JavaScript** — without any frontend frameworks or external libraries. All functionality, from UI interactions to data handling, is implemented manually in native JavaScript.

The focus of the course was on frontend development — the backend came pre-built and is included in the bank-js-intensive-server.zip archive.

### 🧩 Tech Stack

![JavaScript](https://img.shields.io/badge/JavaScript-424242?logo=javascript)

![dotenv](https://img.shields.io/badge/dotenv_16.4.5-424242?logo=dotenv)

![sass](https://img.shields.io/badge/sass_1.80.3-424242?logo=sass&logoColor=CC6699)

![Vite](https://img.shields.io/badge/Vite_5.4.8-424242?logo=vite&logoColor=646CFF)

![gh-pages](https://img.shields.io/badge/gh--pages_6.2.0-424242?logo=github&logoColor=white)

🗃 Dependencies


```bash

npm install gh-pages --save-dev

npm install --save-dev @trivago/prettier-plugin-sort-imports

npm install -D prettier

npm install dotenv --save

npm install sass

npm i eslint

npm install -D @types/node      # for support aliasing paths

```

---

✅ Done
 


- [x] routing

- [x] Layout, links

- [x] class BaseScreen, page's title

- [x] RenderService

- [x]  lib rQuery and methods

- [x]  Change layout and router using RQuery

- [x]  Site Header

- [x]  UI components

- [x]  Fetch function 

- [x]  Notification error for user

- [x]  Services for working with API: auth, card, static, transaction, user

- [x]  Global store and Singleton pattern

- [x]  Auth page (functional)

  - [x] Log in/Register

  - [x] Fix issue with accessToken

- [x]  Services for validation and working with forms

- [x]  UserItem in the header + Search contacts

- [x]  Card info block

- [x]  Deposits and withdrawals (update balance)

- [x]  Transfer money (update balance)

- [x]  Contacts

- [x]  List of transactions

- [x]  Statistic

- [x]  SVG graphics

- [x]  Fix bugs