sebcod / oc-p11-argentbank-website

Code for the project on APIs and React for Intégrateur Web and JS-React paths.

Argent Bank API

This codebase contains the code needed to run the backend for Argent Bank.

Getting Started

Prerequisites

Argent Bank uses the following tech stack:

• Node.js v12
• MongoDB Community Server

Please make sure you have the right versions and download both packages. You can verify this by using the following commands in your terminal:

# Check Node.js version
node --version

# Check Mongo version
mongo --version

Instructions

1. Fork this repo
2. Clone the repo onto your computer
3. Open a terminal window in the cloned project
4. Run the following commands:

# Install dependencies
npm install

# Start local dev server
npm run dev:server

# Populate database with two users
npm run populate-db

Your server should now be running at http://locahost:3001 and you will now have two users in your MongoDB database!

Populated Database Data

Once you run the populate-db script, you should have two users in your database:

Tony Stark

• First Name: Tony
• Last Name: Stark
• Email: [email protected]
• Password: password123

Steve Rogers

• First Name: Steve,
• Last Name: Rogers,
• Email: [email protected],
• Password: password456

API Documentation

To learn more about how the API works, once you have started your local environment, you can visit: http://localhost:3001/api-docs

Design Assets

Static HTML and CSS has been created for most of the site and is located in: /designs.

For some of the dynamic features, like toggling user editing, there is a mock-up for it in /designs/wireframes/edit-user-name.png.

And for the API model that you will be proposing for transactitons, the wireframe can be found in /designs/wireframes/transactions.png.

oc-p11-argentbank-website's Issues

User can logout to the system

A user should be able to:

• See the logout button when logged in
• Click the logout button
• Be returned to the home page (/)

For more information on accessing the design assets, see the Design Assets section in the README.

User can see the home page

A user should be able to:

• Navigate to the home page (/)
• See all placeholder data from mockup

For more information on accessing the design assets, see the Design Assets section in the README.

User can login to the system

A user should be able to:

• Navigate to the login page (/login)
• Fill out credentials
• Login to the back-end API with JWT tokens for authentication
• Successfully navigate to a profile page (/profile)

For more information on accessing the design assets, see the Design Assets section in the README.

User can only see their own profile

After successfully logging in, a user should be able to:

• See their profile page
• See their username on the profile page
• See placeholder bank account information

For more information on accessing the design assets, see the Design Assets section in the README.

State management is done through Redux

The React app contains an implementation of Redux for state management that:

• a store to manage all of the data
• action(s) for sending information
• reducer(s) for handling application state changes

Add docs

Add docs

• Add comments to code

User can update their profile

A user should be able to:

• Edit their profile (first name and last name not editable. Only username can be changed).
• This data should be persisted to the database.

For more information on accessing the design assets, see the Design Assets section in the README.