React Bank

Overview

The react-bank app is a banking application built using TypeScript, React, Redux, and Node. It allows users to login/register, manage accounts, perform transactions, manage credit/debit cards, send internal messages, view and update user profile information, generate dummy data, and more. The app is still in the early stages of TypeScript implementation and currently only covers the frontend. It uses technologies such as React Router, Bootstrap 4, recharts, and JWT tokens. The backend API is built using Node, Express, and Strapi, with MongoDB or MySQL/MariaDB as the database options. Currency rates are obtained from Fixer.io.

Features

• Login/register functionality
• Account management
• Transaction functionality
• Credit/debit card management
• Internal messaging system
• User profile management
• Help form for assistance
• Income change chart
• Currency statistics
• Form validation and async routing
• Dummy data generation

Installation

Installation and running (old API, Node/Express):

1. Install Node.js and MongoDB.
2. Create a database called “react-bank-api” or use a different name and update it in the “old-api/.env” config file.
3. Inside the “web” and “old-api” folders, run npm install to install all dependencies.
4. In the “old-api” folder, run npm run start-dev to start the API.
5. In the “web” folder, run npm start to start the web application.

Installation and running (new API, Node/Strapi):

1. Install Node.js and MariaDB.
2. Create a database called “react-bank-api” or use a different name and update it in the “.env” config file.
3. Inside the “web” and root folders, run npm install to install all dependencies.
4. In the root folder, run npm run develop or use Visual Studio Code debugger to start the API.
5. In the “web” folder, run npm start to start the web application.
6. Adjust the Front End to use the new Strapi endpoints.

To create an optimized build in both cases, run npm run build in the “web” folder.

First steps with Strapi:

1. Create a user, for example, “email@example.com” with password “admin123”.
2. Optionally, generate dummy data by sending a POST request to http://localhost:1337/app/generate-dummy-data.
3. Access the Strapi admin panel at http://localhost:1337 and set proper roles for all the endpoints used by the app, such as enabling generating dummy data for the Public role.

How to run Strapi API on VPS using PM2:

Assuming Ubuntu 20.04 LTS is used:

1. Install Node.js and npm.
2. Install the pm2 package by running npm i -g pm2.
3. Move all the Strapi files to /var/www/react-bank-api.
4. Run NODE_ENV=production npm run build && pm2 start ecosystem.config.js --env production to build and start the Strapi admin panel.

Summary

The react-bank app is a TypeScript-based banking application built using a combination of frontend technologies such as React, Redux, and Bootstrap 4, and backend technologies such as Node, Express, Strapi, and MongoDB or MySQL/MariaDB. It offers various banking functionalities, user management features, and data visualization options. The app is still in the early stages of development, with ongoing TypeScript implementation and limited backend coverage.