🏦 Project 13 - Use an API for a bank user account with React

Here you will find project 13 of the “JavaScript/React application developer” training. The objective of this project is to use Redux to manage the global state of the application. A token authentication system is also linked with API requests to make the application dynamic.

Table of Contents

• 🛠️ Project
  • Prerequisites
  • Starting the project
  • Populated Database Data
• 🔗 API Documentation
• 🚧 Setting up ESlint for this project

🛠️ Project

1. 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

2. Starting the project

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:

• Start server:

# 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!

• Start client

cd client

# Install dependencies
npm install

# Start local dev server
npm run dev

3. 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: tony@stark.com
• Password: password123

Steve Rogers

• First Name: Steve,
• Last Name: Rogers,
• Email: steve@rogers.com,
• 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

Note

A suggested transaction API is available in the swagger2.yml file.

🚧 Setting up ESlint for this project

Important

The information in this part is for information purposes only, the configuration is already applied.

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list