You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This repository contains the source code for the WebUI of FlyFast.
4
7
5
8
For the source code of the backend, head over to [FlightSearch](https://github.com/Aternity/FlyFast-FlightSearch). This will be necessary to make any backend calls but is not required for viewing the WebUI.
6
9
7
10
To view the full source code and to run the whole application through Docker, head over to [FlyFast](https://github.com/Aternity/FlyFast).
8
11
12
+
## Tech Stack
13
+
14
+
-**React 19** with TypeScript (strict mode)
15
+
-**Vite 6** (build tool and dev server)
16
+
-**Vitest 3** (test runner)
17
+
-**Mantine 8** (UI components)
18
+
-**React Router 7** (routing)
19
+
-**OpenTelemetry** (tracing)
20
+
9
21
## Prerequisites
10
22
11
23
1.[Git](https://git-scm.com/) (Optional)
12
-
2.a Docker host, for example [Docker Desktop](https://www.docker.com/products/docker-desktop) (Optional)
13
-
3.[NodeJS](https://nodejs.org/en/) (Required)
14
-
4.[FlightSearch](https://github.com/Aternity/FlyFast-FlightSearch) (Required Only For Making Backend Calls)
24
+
2.A Docker host, for example [Docker Desktop](https://www.docker.com/products/docker-desktop) (Optional)
@@ -22,26 +35,31 @@ To view the full source code and to run the whole application through Docker, he
22
35
```
23
36
cd FlyFast-WebUI
24
37
```
25
-
3. You can either start the application using [NodeJS](#step-by-step-using-nodejs) or [Docker](#step-by-step-using-docker).
38
+
3. You can either start the application using [Node.js](#step-by-step-using-nodejs) or [Docker](#step-by-step-using-docker).
26
39
27
40
## Step by Step Using NodeJS
41
+
28
42
1. Install the dependencies required to run this application:
29
43
```
30
-
npm install --legacy-peer-deps
44
+
npm install
31
45
```
32
-
2. Make sure to set the environment variables for the application. Take a look at [.env.example](.env.example) and follow the instructions on there.
33
-
- `REACT_APP_FLIGHT_SEARCH` is the Flight Search URL, which should be on port `8080`, if you are using the [FlightSearch](https://github.com/Aternity/FlyFast-FlightSearch).
34
-
- `REACT_APP_OPENTELEMETRY_ENDPOINT` is the APM Collector URL, which should be on port `55681`, if you are using the [Aternity APM Collector](https://hub.docker.com/r/aternity/apm-collector)
46
+
2. Set the environment variables for the application. Copy [.env.example](.env.example) to `.env` and fill in the values.
47
+
- `VITE_FLIGHT_SEARCH` — the Flight Search URL (default port `8080`), used if you are running [FlightSearch](https://github.com/Aternity/FlyFast-FlightSearch).
48
+
- `VITE_OPENTELEMETRY_ENDPOINT` — the APM Collector URL (default port `55681`), used if you are running the [Aternity APM Collector](https://hub.docker.com/r/aternity/apm-collector).
49
+
50
+
Environment variables are accessed in source code via `import.meta.env.VITE_*`.
51
+
35
52
3. Select one of the following [scripts](#available-scripts) that best suits your purpose.
36
53
37
54
## Step by Step Using Docker
38
-
1. Build our docker:
55
+
56
+
1. Build the Docker image:
39
57
```
40
58
docker build . -t flyfast-webui
41
59
```
42
-
2. Run our docker container:
60
+
2. Run the container:
43
61
```
44
-
docker run --rm -p 80:80 -e REACT_APP_FLIGHT_SEARCH=http://localhost:8080 -e REACT_APP_OPENTELEMETRY_ENDPOINT=http://localhost:55681 flyfast-webui
62
+
docker run --rm -p 80:80 -e VITE_FLIGHT_SEARCH=http://localhost:8080 -e VITE_OPENTELEMETRY_ENDPOINT=http://localhost:55681 flyfast-webui
45
63
```
46
64
3. Open [http://localhost:80](http://localhost:80) to view it in your browser.
47
65
@@ -51,62 +69,77 @@ In the project directory, you can run:
51
69
52
70
### `npm start`
53
71
54
-
Runs the app in the development mode.\
55
-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
72
+
Runs the app in development mode using Vite.\
73
+
Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
56
74
57
-
The page will reload when you make changes.\
58
-
You may also see any lint errors in the console.
75
+
The page hot-reloads when you make changes.
59
76
60
77
### `npm test`
61
78
62
-
Launches the test runner in the interactive watch mode.\
63
-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
79
+
Runs the Vitest test suite once and reports results.
64
80
65
-
### `npm run build`
81
+
### `npm run test:watch`
66
82
67
-
Builds the app for production to the `build` folder.\
68
-
It correctly bundles React in production mode and optimizes the build for the best performance.
83
+
Runs Vitest in watch mode, re-running affected tests on file changes.
69
84
70
-
The build is minified and the filenames include the hashes.\
71
-
Your app is ready to be deployed!
85
+
### `npm run test:ui`
72
86
73
-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
87
+
Opens the Vitest browser UI for interactive test inspection.
88
+
89
+
### `npm run build`
74
90
75
-
### `npm run eject`
91
+
Builds the app for production into the `dist/` folder.\
92
+
The build is minified and filenames include content hashes.
76
93
77
-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
94
+
### `npm run preview`
78
95
79
-
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
96
+
Serves the production build from `dist/` locally for inspection before deployment.
80
97
81
-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
98
+
### `npm run type-check`
82
99
83
-
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
100
+
Runs TypeScript validation without emitting build artifacts.
84
101
85
-
## Additional Information
102
+
### `npm run test:ci`
86
103
87
-
### Code Splitting
104
+
Runs the complete test suite with coverage gate enforcement (80% minimum coverage on statements, branches, functions, and lines). This is used in CI/CD pipelines.
88
105
89
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
106
+
## Testing
90
107
91
-
### Analyzing the Bundle Size
108
+
FlyFast-WebUI maintains comprehensive test coverage with a focus on critical business logic and user workflows:
92
109
93
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
110
+
- **Coverage Target**: 80% minimum on all metrics (statements, branches, functions, lines)
- Per-file test coverage for all pages and components
116
+
- Mocked Mantine provider and React Router for isolated component testing
94
117
95
-
### Making a Progressive Web App
118
+
To run tests:
119
+
- **Run all tests**: `npm test`
120
+
- **Watch mode**: `npm run test:watch`
121
+
- **Interactive UI**: `npm run test:ui`
122
+
- **With coverage**: `npm run test:ci`
96
123
97
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
124
+
Test files are co-located with source code using the `.test.tsx` and `.test.ts` naming convention.
98
125
99
-
### Advanced Configuration
126
+
## Docker Build Notes
100
127
101
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
128
+
The Dockerfile uses a multi-stage build:
129
+
- **Build stage**: Node 22 Alpine — installs dependencies and runs `vite build` (output in `dist/`)
130
+
- **Runtime stage**: NGINX 1.27 Alpine — serves the static assets; injects `VITE_*` environment variables at container startup via `envsubst`
102
131
103
-
### Deployment
132
+
Build image:
104
133
105
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
134
+
```bash
135
+
docker build -t flyfast-webui .
136
+
```
106
137
107
-
### `npm run build` fails to minify
138
+
Run container:
108
139
109
-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
140
+
```bash
141
+
docker run --rm -p 80:80 -e VITE_FLIGHT_SEARCH=http://localhost:8080 -e VITE_OPENTELEMETRY_ENDPOINT=http://localhost:55681 flyfast-webui
0 commit comments