Table of contents

1. Front-End
   1.1 Front-End stack
   1.2 Libraries used
   1.3 Front-End installation guide
   1.4 Launching the project
   1.5 Other commands
   

2. Back-End
   2.1 Back-End installation guide
   2.2 Starting the server
   2.3 Routes and endpoints
   2.4 Other information
   

3. Miscellaneous
   3.1 Folder-app structure
   3.2 Naming conventions
   3.3 Trivial information
   

1. Front-End

1.1 Front-End stack

• HTML
• SASS
• TypeScript
• React
• Next.js

1.2 Libraries used

• Jest with: React Testing Library
• Redux with: React-Redux, Redux Toolkit and Immer
• TanStack Query a.k.a React Query

1.3 Front-End installation guide

The project uses Node packages and uses npm, so the installation of Node.js in your IDE is required

Install Node.js

Once Node.js has been successfully added to your IDE, you'll need to:

1. Fork the Front-End repository
2. Clone it locally with with git clone

Afterwards you'll need to install all the project dependencies with npm install

1.4 Launching the project

For the Front-end, you will need to compile the Next.js app with the command:

npm run dev

1.5 Other commands

This app has 2 other executable scripts:

1. To run all tests with Jest and get a code coverage percentage:

npm run test

2. To run a test with Jest on a particular file:

npm  run  test -- [file-name].tsx --silent=false --coverage=false

---

2. Back-End

2.1 Back-End installation guide

The Back-End also uses Node.js, if it's still not installed in your IDE, here's the link:

Install Node.js

Along with MongoDB Community Server to use the database

Install MongoDB Community Server

Just like for the Front-end, you will need to repeat the same steps

1. Fork the Back-End repository
2. Clone it locally with with git clone

Once installed, you'll need to populate the database with:

npm run populate-db

2.2 Starting the server

In order to launch the Back-end server, you'll need to run nodemon with this command:

npm run dev:server

2.3 Routes and endpoints

To use the API routes, you must use this base URL: https://localhost:3001/api/v1/

The API of this server is separated in 2 routes

• The user/ route:

HTTP Verb	Endpoints	Parameters	Payload of the request	Possible code statuses	Payload of the response	Description of the body
POST	/user/login/	-	{ "email": string, "password": string }	200: OK 400: Invalid fields 500: Internal Server Error	{ "token": string }	Gives a JSON Web Token when the user fills the form fields correctly
POST	/user/signup/	-	{ "email": string, "password": string, "firstName": string, "lastName": string }	200: OK 400: Invalid fields 500: Internal Server Error	{ "status":0, "message": string, "body":{ "id":string, "email": string, } }	Creates the user in the database and sends back an id and an email
POST	/user/profile	-	{ "header": { "Authorization": string } "body":{} }	200: OK 400: Invalid fields 500: Internal Server Error	{ "status": number, "message": string, "body": { "email": string, "firstName": string, "lastName": string, "createdAt": Date, "updatedAt": Date, "id": string } }	Retrieves the profile data of the user
PUT	/user/profile	-	{ "header": { "Authorization": string} "body":{ "firstName": "Tony", "lastName": "Stark"} }	200: OK 400: Invalid fields 500: Internal Server Error	{ "status": number, "message": string, "body": { "email": string, "firstName": string, "lastName": string, "createdAt": Date, "updatedAt": Date, "id": string } }	Modifies the first and/or last name of the user

• The transactions/ route:

HTTP Verb	Endpoints	Parameters	Payload of the request	Possible code statuses	Payload of the response	Description of the body
POST	/user/:accountId/transactions	accountId: ID of the bank account	{ "header":{ "Authorization": string }, "body":{ accountId: string } }	200: OK 400: Bad request 401: Unauthenticated 403: Unauthorized 404: Not found 500: Internal error	[ { transactionId: string, date: Date, description: string, amount: number, balance: number }, ... ]	Returns an array of all the transactions containing their - transaction ID - their date - their description - their amount -the account balance after the transaction
POST	/user/:accountId/transactions/:transactionId	accountId: ID of the bank account transactionId: ID of the transaction	{ "header": { "Authorization": string } "body":{ accountId: string, transactionId: string } }	200: OK 400: Bad request 401: Unauthenticated 403: Unauthorized 404: Not found 500: Internal error	{ transactionId: string, date:Date, description: string, amount: number, balance: number, transactionType: number, category: string, notes: string }	Returns an object of a particular transaction containing more information about it such as: - the type of transaction - the category - the notes left by the account owner
POST	/user/:accountId/transactions/:transactionId/other	accountId: ID of the bank account transactionId: ID of the transaction	{ "header": { "Authorization": string } "body":{ accountId: string, transactionId: string, notes: string, } }	201: Created 400: Bad request 401: Unauthenticated 403: Unauthorized 404: Not found 500: Internal error	{ message: string }	Returns a message saying if the infos were successfully added or not
PUT	/user/:accountId/transactions/:transactionId/other	accountId: ID of the bank account transactionId: ID of the transaction	{ "header":{ "Authorization":string } "body":{ accountId:string, transactionId:string, category: string, notes: string } } }	201: Created 400: Bad request 401: Unauthenticated 403: Unauthorized 404: Not found 500: Internal error	{ message: string }	Returns a message saying if the infos were successfully changed or not
DELETE	/user/:accountId/transactions/:transactionId/other	accountId: ID of the bank account transactionId: ID of the transaction	{ "header":{ "Authorization": string } "body":{ accountId: string, transactionId: string, category: boolean, notes: boolean, } }	200: OK 400: Bad request 401: Unauthenticated 403: Unauthorized 404: Not found 500: Internal error	{ message: string }	Returns a message saying if the infos were successfully deleted or not

2.4 Other information

To view a more detailed installation guide, you can go on the repository of the Back-End of the project

---

3. Miscellaneous

3.1 Folder app structure

Here's the current folders structure for the application

P13/
|
|
|– argent-bank/
|  |
|  |– ...
|
|
|
|– P10-Bank-API
|  |
|  |– ...

3.2 Naming conventions

• File and folder names: kebab-case

  example: helper-functions.tsx

• CSS: kebab-case

examples:

.main-page{...};
--bg-primary: red;

• JS: camelCase, ⁣PascalCase and SNAKE_CASE

1. For variable names: camelCase
2. For class and component names: PascalCase
3. For contextualized constants names: SNAKE_CASE

examples:

let dataValues = [{value: 5}, {value: 2}];

class Service{...}

function Header(){...}

const MAX_32_BIT_UNSIGNED_INTEGER = 2_147_483_647;

3.3 Trivial information

This project:

• Has a responsive design
• Has a dark/light theme
• Has a Swagger API documentation is available in this address: http://localhost:3001/api-docs/#/
• Uses SSR (Server-side rendering)
• Uses the 7-1 pattern for SASS