Dispatch305 React Frontend

Table of Contents

1. Description
2. Install (Run) with Docker
3. Installation without Docker
4. Run with the Flask Backend (with and without Docker)
5. Screenshots of the Frontend React App
6. Screenshots of the Admin Panel Backend
7. Screenshots of the Original Frontend Design

Description

Dispatch305 is a service that helps dispatchers to communicate with both drivers and brokers. From now on, we call DISPATCH305 to the company and all its components, and so we will often call drivers to the clients, while the dispatchers will be called staff members (of the company). In addition, the services offered by the website will be referred as:

• Searching a Cargo: When a client requests the dispatcher to look out for an Agency with a Cargo to transport. In this case the staff member should contact a broker (Agency) and make the arraignments.

• Sending Analytics: Every Friday, a bill should be sent to every client with the weekly pending bill amount and a description of the charges. In addition, for the clients with a VIP account, an analytics resume of the week should also be sent.

• Managing POD: When a Cargo is delivered, the VIP clients may request the staff member assigned to them to manage the sending of the Rate Conf and the POD (this are 2 PDF files needed as proof of service and delivery).

• How does Dispatch305 work?

1. User Registration: First, the client registers at dispatch305.com (the Frontend website created using REACT js). During this step, the client should provide basic account information such as name, company, ..., and should also upload the 4 basic PDF files that most brokers require for hiring them to deliver cargo.
2. Account Activation: When the new account is created, it is set to inactive and the Admin User is notified. The, the Admin User assigns a staff member to the client. From this point on, the staff member is said to be the client's dispatcher. The client must download the PDF that is under the section Agreement in the Frontend app. Once this steps are completed, the client's account is set to active.
3. Requesting Services and Billing: Now and while the account is active, a client with a plan BASICO (basic account) can request the dispatcher to offer the service of Searching a Cargo, while VIP clients can ask for the services of Searching a Cargo, Sending Analytics, and Managing POD. Regardless of which type of account a client has, a Bill will be sent to them with the pending amount to pay for the services offered in that week from DISPATCH305. When a user fails to pay the weekly bill (usually a timeline of 3 days offered), the account becomes inactive until the bill is paid.
4. Factoring: After the user requests a Searching a Cargo service, and the Cargo is found by the staff member, and later delivered by the client, if the client has a VIP account, the staff member can be requested to offer a Managing POD service. In order to do that, the client must send the PDF files required, and the staff member should upload them to DISPATCH305's Admin Panel.

Install (Run) with Docker

1. Clone the repo:

   git clone https://github.com/Ceci-Aguilera/dispatch305_react_frontend.git

2. Install Docker and Docker Compose

3. Configure the environment variables: Create an .env file inside the root folder and set up the following environment variables:

    REACT_APP_API_DOMAIN_NAME (The url of the backend, for example, https://backend_api.com)
   

4. Run the command:

   docker-compose up -d --build

5. Congratulations =) !!! the app should be running in localhost:80

Installation without Docker

1. Clone the repo:

   git clone https://github.com/Ceci-Aguilera/dispatch305_react_frontend.git

2. Install dependencies:

   npm install

3. Configure the environment variables: Create an .env file inside the root folder and set up the following environment variables:

    REACT_APP_API_DOMAIN_NAME (The url of the backend, for example, https://backend_api.com)
   

4. Run the app

   npm start

5. Congratulations =) !!! the app should be running in localhost:3000

Run with the Flask Backend (with and without Docker)

Note: Before following these steps clone this repository. From now on the selected folder that contains the clone will be referred as project_root. So far, it should look like this:

   project_root
   └── dispatch305_react_frontend

1. Assuming that your are at the project_root, clone the Flask Backend API repository:

      git clone https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api.git

   Now the project_root folder should look like:

   project_root
   ├── dispatch305_react_frontend
   └── dispatch305_flask_backend_api

• If Using Docker and Docker Compose

  1. Copy the content of the docker-compose-connect.yml to a new file docker-compose.yml in the project_root. The docker-compose-connect.yml file can be found at the root of this repository and also at the root of the Flask Backend API repository (Either file is fine to copy).

  2. Follow the instruction to configure the environment variables of the Flask backend API that can be found in the section Install (Run) with Docker in the Readme.md of the Flask Backend API repository

  3. Follow the instructions on the Install (Run) with Docker section of this Readme.md to configure the environment variables for this repo. The only env variable needed is the Flask Backend url, which by default should be http://localhost:5000. Note: Right now the project_root should look like:

     project_root
     ├── dispatch305_react_frontend
     ├── dispatch305_flask_backend_api
     └── docker-compose.yml

  4. Run the command:

     docker-compose up --build

  5. Congratulations =) !!! the frontend app should be running in localhost:80 while the backend is at localhost:5000

• Running without Docker and Docker Compose

  1. Follow the instructions of the Installation without Docker section in the Readme.md of the Flask Backend API repository to configure and run the backend.
  2. Follow the instructions of section Installation without Docker of this Readme.md. Modify the REACT_APP_API_DOMAIN_NAME to be the url of the Flask Backend API (by default it is http://localhost:5050).
  3. Congratulations =) !!! the frontend app should be running in localhost:3000 while the backend is at localhost:5050

---

Screenshots of the Frontend React App

Screenshots of the Admin Panel

---

---

Screenshots of the Original Frontend Design

NOTE: Some of the components of the original design have been changed, such as banner images, and name of the service (from ALL4LOADS to Dispatch305). This original design does not include the client's views after log in.