Description

This is a responsive banking app. Built as a personal project to improve practical skills in REST API design with Node.js and Express. Using MongoDB for database management. Database is deployed in MongoDB Atlas in order to perform multi-document ACID transactions. Frontend development with React and MUI, also implements Axios for fetching API

Includes next functionality:

🔷 Create new user account with email and password

🔷 Finish registration by filling multistep form with personal data

🔷 Login with email and password

🔷 Create up to 3 bank accounts(Account is created with initial balance 100€ for testing transactions)

🔷 Transfer money to other users and between your accounts

🔷 Check your balance

🔷 Check transactions history

🔷 Get notifications about new incoming transactions. Mark them as read or delete.

Installation 🏗️

Backend 👷‍♀️

‼️ In order to run the project you need to connect to your MongoDB Atlas cluster, as here are implemented MongoDB multi-document ACID transactions, which are not suported for database in localhost.

Inside folder backend/ run following command:

npm install

create .env file with following environment variables:

DATABASE_URL=[your mongodb string(ex. mongodb+srv://<username>:<password>@<claster>.vc6yde2.mongodb.net/myBank?retryWrites=true&w=majority)]

NODE_ENV=development
ACCESS_TOKEN_SECRET=[your token secret (can be generated using node crypto module)]

run the following command, and the server will be listening on the PORT 8000:

npm run start

Frontend 👩‍🎨

Inside folder frontend/ run following commands:

npm install

npm start

Styles 🎨 and layout 📝

All styles and layout created with customized MUI components

Project structure 📦

📦backend
 ┣ 📂config
 ┃ ┣ 📜allowedOrigins.js
 ┃ ┗ 📜dbConn.js
 ┣ 📂controllers
 ┃ ┣ 📜account.controller.js
 ┃ ┣ 📜auth.controller.js
 ┃ ┣ 📜notification.controller.js
 ┃ ┣ 📜transaction.controller.js
 ┃ ┗ 📜user.controller.js
 ┣ 📂middleware
 ┃ ┣ 📜errorHandler.js
 ┃ ┣ 📜logger.js
 ┃ ┣ 📜loginLimiter.js
 ┃ ┗ 📜verifyToken.js
 ┣ 📂models
 ┃ ┣ 📜account.model.js
 ┃ ┣ 📜notification.model.js
 ┃ ┣ 📜transaction.model.js
 ┃ ┗ 📜user.model.js
 ┣ 📂routes
 ┃ ┣ 📜account.routes.js
 ┃ ┣ 📜auth.routes.js
 ┃ ┣ 📜notification.routes.js
 ┃ ┗ 📜transaction.routes.js
 ┣ 📂utils
 ┃ ┣ 📜ageValidation.js
 ┃ ┗ 📜jwt.js
 ┣ 📜.env
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜server.js

📦frontend
 ┣ 📂public
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┃ ┗ 📜myBankApi.js
 ┃ ┣ 📂auth
 ┃ ┃ ┗ 📜RequireAuth.js
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂account_management
 ┃ ┃ ┃ ┣ 📂accounts_tab
 ┃ ┃ ┃ ┃ ┣ 📜AccountsTab.js
 ┃ ┃ ┃ ┃ ┗ 📜NewAccountBtn.js
 ┃ ┃ ┃ ┣ 📂notifications_tab
 ┃ ┃ ┃ ┃ ┣ 📜NotificationsTab.js
 ┃ ┃ ┃ ┃ ┗ 📜NotificationsTable.js
 ┃ ┃ ┃ ┣ 📂profile_tab
 ┃ ┃ ┃ ┃ ┗ 📜ProfileTab.js
 ┃ ┃ ┃ ┣ 📂transactions_tab
 ┃ ┃ ┃ ┃ ┣ 📂new_transaction
 ┃ ┃ ┃ ┃ ┃ ┣ 📜NewTransactionForm.js
 ┃ ┃ ┃ ┃ ┃ ┣ 📜TransactionConfirmation.js
 ┃ ┃ ┃ ┃ ┃ ┗ 📜TransactionCreation.js
 ┃ ┃ ┃ ┃ ┣ 📂transactions_history
 ┃ ┃ ┃ ┃ ┃ ┣ 📜TransactionsHistory.js
 ┃ ┃ ┃ ┃ ┃ ┗ 📜TransactionsTable.js
 ┃ ┃ ┃ ┃ ┗ 📜TransactionsTab.js
 ┃ ┃ ┃ ┣ 📜AccountManagement.js
 ┃ ┃ ┃ ┗ 📜DashboardDrawer.js
 ┃ ┃ ┣ 📂forms
 ┃ ┃ ┃ ┣ 📂finish_register
 ┃ ┃ ┃ ┃ ┣ 📜HorizontalLinearStepper.js
 ┃ ┃ ┃ ┃ ┗ 📜RegisterForm.js
 ┃ ┃ ┃ ┣ 📜LoginForm.js
 ┃ ┃ ┃ ┗ 📜SignUpForm.js
 ┃ ┃ ┣ 📜About.js
 ┃ ┃ ┣ 📜Contact.js
 ┃ ┃ ┣ 📜Footer.js
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┣ 📜Home.js
 ┃ ┃ ┗ 📜Layout.js
 ┃ ┣ 📂context
 ┃ ┃ ┣ 📜AccountsProvider.js
 ┃ ┃ ┣ 📜AuthProvider.js
 ┃ ┃ ┣ 📜NewTransactionProvider.js
 ┃ ┃ ┣ 📜NotificationProvider.js
 ┃ ┃ ┣ 📜RegistrationProvider.js
 ┃ ┃ ┗ 📜TransactionsProvider.js
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜useAuth.js
 ┃ ┃ ┗ 📜useAxios.js
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜AboutPage.js
 ┃ ┃ ┣ 📜AccountManagementPage.js
 ┃ ┃ ┣ 📜ContactPage.js
 ┃ ┃ ┣ 📜ErrorPage.js
 ┃ ┃ ┣ 📜FinishRegistration.js
 ┃ ┃ ┣ 📜HomePage.js
 ┃ ┃ ┣ 📜Login.js
 ┃ ┃ ┣ 📜SignUp.js
 ┃ ┃ ┗ 📜Unauthorized.js
 ┃ ┣ 📂reducers
 ┃ ┃ ┗ 📜signUpReducer.js
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜modalStyle.js
 ┃ ┣ 📂theme
 ┃ ┃ ┗ 📜theme.js
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜ageValidation.js
 ┃ ┃ ┗ 📜regex.js
 ┃ ┣ 📜App.js
 ┃ ┣ 📜config.js
 ┃ ┗ 📜index.js
 ┣ 📜package-lock.json
 ┗ 📜package.json