MITxPro Capstone - Full Stack Banking App
Bad Bank Project is a unsecure banking application that simulates a create account function, a login, deposit, withdraw and an all data summary page. The project was created using standalone Single Page React Routing as well as styling with Bootstrap.
This is a simple React app that presents the user with an ATM-like interface, with options to deposit or withdraw money, as well as display the current account balance. The goals of this exercise include:
- Implement user-friendly UI and React components
- Manage state of various UI elements
- Validate form content in conjunction with state of other components
The exercise included the following details, which are implemented in the app:
- Adding validation so users can’t withdraw more money than the account balance
- Modifying the user interface to require users to select deposit or withdraw before an input field is visible
I styled the app using basic CSS in order to give it a cleaner interface.
I attempted to implement dropdown menus and buttons using Bootstrap, but was unsuccessful at the time of submission. I plan to go back and complete the UI improvements.
Click this link to view the app live on Heroku.
-
Clone this repo
-
Use "npm install" to load a simple HTTP Server for the project
npm install
- Use "npm start" command in the project folder to start the React App development environment
npm start
- Navigate your Browser to...
localhost:3000
- React, Javascript, CSS, HTML
- Bootstrap
I converted this exercise to a React app by using create-react-app. Information can be found here: Create React App.
You can learn more in the Create React App documentation here or here.
Below are the API endpoints outlined in this project.
app.get'/account/create/:name/:email/:uid'
app.get'/account/login/:email/:password'
app.get'/account/find/:email'
app.get'/account/findOne/:email'
app.get'/account/update/:email/:amount'
app.get'/account/all'
app.delete'/account/delete/:email'