Skip to content

Commit fa7ddc8

Browse files
committed
Docker Compose Added and Readme Updated
1 parent b7ca4a6 commit fa7ddc8

File tree

2 files changed

+152
-21
lines changed

2 files changed

+152
-21
lines changed

README.md

+115-21
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,44 @@
1-
# Dispatch305 React Frontend ![alt text](./screenshots/navbar_logo.jpeg)
1+
<div align="center">
2+
3+
![alt text](./screenshots/navbar_logo.jpeg)
4+
5+
# Dispatch305 React Frontend
6+
7+
![React js version](https://img.shields.io/badge/React_js-17.0.2-4c566a?logo=react&&longCache=truelogoColor=white&colorB=pink&style=flat-square&colorA=4c566a) ![Bootstrap version](https://img.shields.io/badge/Bootstrap-5.1.3-4c566a?logo=bootstrap&&longCache=true&logoColor=white&colorB=pink&style=flat-square&colorA=4c566a) ![Flask version](https://img.shields.io/badge/Flask-2.0.3-4c566a?logo=flask&&longCache=truelogoColor=white&colorB=pink&style=flat-square&colorA=4c566a) ![Flask-RESTX](https://img.shields.io/badge/Flask--RESTX-0.5.1-red.svg?longCache=true&style=flat-square&logo=flask&logoColor=white&colorA=4c566a&colorB=pink) ![Forks](https://img.shields.io/github/forks/Ceci-Aguilera/dispatch305_react_frontend?&&longCache=true&logoColor=white&colorB=yellow&style=flat-square&colorA=4c566a) ![Commit activity](https://img.shields.io/github/commit-activity/y/Ceci-Aguilera/dispatch305_react_frontend/master?&&longCache=true&logoColor=white&colorB=green&style=flat-square&colorA=4c566a)
8+
9+
10+
</div>
211

312
## Table of Contents
413

5-
1. [Quick Installation for testing using Docker](#docker)
6-
2. [Custom Installation](#installation)
7-
3. [Brief Introduction and Basic Workflow of the Website](#frontend)
8-
4. [Screenshots of the Frontend React App](#screenshots_frontend)
9-
5. [Screenshots of the Admin Panel Backend](#screenshots)
10-
6. [Screenshots of the Original Frontend Design](#screenshots_original)
14+
1. [Description](#frontend)
15+
1. [Install (Run) with Docker](#docker)
16+
1. [Installation without Docker](#installation)
17+
1. [Screenshots of the Frontend React App](#screenshots_frontend)
18+
1. [Screenshots of the Admin Panel Backend](#screenshots)
19+
1. [Screenshots of the Original Frontend Design](#screenshots_original)
20+
21+
22+
<a name="frontend"></a>
23+
24+
## Description
25+
26+
__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:
27+
28+
- _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.
29+
- _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.
30+
- _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).
31+
32+
- ### How does Dispatch305 work?
33+
1. __User Registration:__ First, the client registers at [dispatch305.com](https://www.dispatch305.com/create-account) (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.
34+
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.
35+
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.
36+
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.
1137

1238

1339
<a name="docker"></a>
1440

15-
### Quick Installation for testing using Docker
41+
## Install (Run) with Docker
1642

1743
1. Clone the repo:
1844

@@ -39,7 +65,7 @@
3965

4066
<a name="installation"></a>
4167

42-
### Custom Installation
68+
## Installation without Docker
4369

4470
1. Clone the repo:
4571

@@ -67,32 +93,92 @@
6793
1. Congratulations =) !!! the app should be running in [localhost:3000](http://localhost:3000)
6894

6995

70-
<a name="frontend"></a>
7196

72-
#### Brief Introduction
7397

74-
Dispatch305 is a service that helps dispatchers to communicate with both drivers and brokers. From now on, we call DISPATCH305 to the company only, and so we call _drivers_ to the _clients_ while _dispatchers_ will be often called _staff members_. In addition, the services offered by the website will be referred as:
7598

76-
- _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.
77-
- _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.
78-
- _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).
99+
<a name="connect_backend"></a>
100+
## Run with the Flask Backend (with and without Docker)
101+
102+
__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:
103+
```sh
104+
project_root
105+
└── dispatch305_react_frontend
106+
```
107+
108+
1. Assuming that your are at the __project_root__, clone the [Flask Backend API repository](https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api):
109+
```sh
110+
git clone https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api.git
111+
```
112+
Now the __project_root__ folder should look like:
113+
```sh
114+
project_root
115+
├── dispatch305_react_frontend
116+
└── dispatch305_flask_backend_api
117+
```
118+
119+
- ### If Using Docker and Docker Compose
120+
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](https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api) (Either file is fine to copy).
121+
1. 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](https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api)
122+
1. 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](http://localhost:5000).
123+
__Note:__ Right now the __project_root__ should look like:
124+
```sh
125+
project_root
126+
├── dispatch305_react_frontend
127+
├── dispatch305_flask_backend_api
128+
└── docker-compose.yml
129+
```
130+
131+
1. Run the command:
132+
133+
```bash
134+
docker-compose up --build
135+
```
136+
137+
1. Congratulations =) !!! the frontend app should be running in [localhost:80](http://localhost:80) while the backend is at [localhost:5000](http://localhost:5000)
138+
139+
140+
- ### Running without Docker and Docker Compose
141+
1. Follow the instructions of the __Installation without Docker__ section in the Readme.md of the [Flask Backend API repository](https://github.com/Ceci-Aguilera/dispatch305_flask_backend_api) to configure and run the backend.
142+
1. 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](http://localhost:5050)).
143+
1. Congratulations =) !!! the frontend app should be running in [localhost:3000](http://localhost:3000) while the backend is at [localhost:5050](http://localhost:5050)
144+
145+
---
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
161+
79162

80-
#### Basic Workflow of the Website
81163

82-
1. __User Registration:__ First, the client registers at [dispatch305.com](https://www.dispatch305.com/create-account) (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.
83-
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.
84-
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.
85-
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.
86164

87165

88166
<a name="screenshots_frontend"></a>
89167

90-
### Screenshots of the Frontend React App
168+
## Screenshots of the Frontend React App
169+
170+
<div align="center">
91171

92172
![alt text](./screenshots/driver_0.png) ![alt text](./screenshots/driver_2.png)
93173

174+
</div>
175+
176+
<div align="center">
177+
94178
![alt text](./screenshots/driver_3.png) ![alt text](./screenshots/driver_4.png)
95179

180+
</div>
181+
96182
![alt text](./screenshots/services.png)
97183

98184
![alt text](./screenshots/driver_6.png)
@@ -102,10 +188,18 @@ Dispatch305 is a service that helps dispatchers to communicate with both drivers
102188

103189
### Screenshots of the Admin Panel
104190

191+
<div align="center">
192+
105193
![alt text](./screenshots/admin_dispatcher_view.png) ![alt text](./screenshots/admin_dispathcer_user_trucks_cargo_detail_view.png)
106194

195+
</div>
196+
197+
<div align="center">
198+
107199
![alt text](./screenshots/admin_edit_trucks_cargo.png) ![alt text](./screenshots/admin_edit_save_trucks_cargo.png)
108200

201+
</div>
202+
109203
---
110204

111205
![alt text](./screenshots/admin_dispatcher_user_view.png)

docker-compose-connect.yml

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
version: '3.7'
2+
services:
3+
nginx-react:
4+
container_name: ngixreactapp
5+
build:
6+
context: ./dispatch305_react_frontend
7+
dockerfile: Dockerfile
8+
env_file: dispatch305_react_frontend/.env
9+
ports:
10+
- 80:80
11+
environment:
12+
NODE_ENV: production
13+
14+
api:
15+
build:
16+
context: ./dispatch305_flask_backend_api
17+
dockerfile: Dockerfile
18+
container_name: "dispatch305-flask-backend-api"
19+
ports:
20+
- 5000:5050
21+
env_file:
22+
- ./dispatch305_flask_backend_api/config/.env
23+
depends_on:
24+
- db
25+
links:
26+
- db
27+
db:
28+
image: postgres:13-alpine
29+
volumes:
30+
- postgres_data:/var/lib/postgresql/data/
31+
environment:
32+
- POSTGRES_USER=docker_dispatch305_user
33+
- POSTGRES_PASSWORD=docker_dispatch305_pass
34+
- POSTGRES_DB=docker_dispatch305_db
35+
36+
volumes:
37+
postgres_data:

0 commit comments

Comments
 (0)