Hyperbank - Financial Highlights

A financial wrapped web app
Explore the docs »

Demo

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contact

About The Project

This project allows the user to visualize their yearly bank activity in a "wrapped" format (similar to Spotify Wrapped).

Here are the trends available on the project:

1. Anual expense
2. Monthly expenses + month most spent
3. Categories most spent on (Food, Services, Health...)
4. Methods most spent on (Credit, Debit...)
5. Top 3 locations transactions were made
6. Anual income + total saved

Built With

Backend

• 
• 
• 

Frontend

• 
• 
• 
• 

Getting Started

This repository contains two projects: hyperbank-front - the client side application - and hyperbank-back - the server.

To get a local copy up and running follow these steps.

Prerequisites

To run the application you must have the following installed:

• node.js
• npm
• MySQL

Installation

1. Clone the repo

   git clone https://github.com/maalucf/hyperbank.git

2. Install NPM packages
   

   a. Go to the hyperbank-front folder and run the command

   npm install

   b. Go to the hyperbank-back folder and run the command

   npm install

3. Create a mysql database
   

   a. Log into the mysql terminal using your credentials

   mysql -u your_user -p

   b. Inside the mysql terminal, create a new database

   CREATE DATABASE your_database_name;

   c. Out of the mysql terminal, populate the database using the hyperbank-database.sql file (make sure you are inside the hyperbank folder)

   mysql -u your_username -p your_database_name < hyperbank-database.sql

4. Create a .env file inside the hyperbank-back folder to configure the database

   MYSQL_HOST='your_host'
   MYSQL_USER='your_user'
   MYSQL_PASSWORD='your_password'
   MYSQL_DB='your_database_name'

Running

To run the application make sure you are inside the hyperbank-back folder. Once you are in the correct folder, run the script

npm run start

When the server is running, you can access the web page through the http://localhost:5000 link in your browser.

Usage

Database schema:

Application demo:

app-demo.mp4

Contact

• 
• 

Project Link: https://github.com/maalucf/hyperbank

(back to top)