Node.js backend server, Express web framework. sqlite for database management, node-sqlite3 package for interacting with the database. Socket.IO for realtime communication between app's interfaces. create-react-app for frontend, tailwind.css for inline styling, and Daisy UI for styling components. Lucide React for icons.
The project is structured with separate node_modules for the root, server, and client folders. To install dependencies for each part, run the following commands:
# At the project root (for root-level scripts or tools)
npm install
# Navigate to the server folder and install dependencies
cd server
npm install
# Navigate to the client folder and install dependencies
cd ../client
npm install
Run npm run dev in root directory to start both the backend server (:5000) and frontend application (:3000) in developer mode, or
Run npm start in root to run the app in production mode.
Both commands automatically set up ngrok tunnel, the URL can be found in the console. However, before ngrok can work on your machine, you have to set up your authentication token, and copy the path. See next section.
start-ngrok.js uses a config path defined in root .env file.
To set up ngrok,
- Set up your own ngrok authtoken (bash):
ngrok authtoken <YOUR_AUTHTOKEN> - Copy the path you got to .env file for the NGROK_CONFIG_PATH value, for example
NGROK_CONFIG_PATH=/your/path/to/ngrok/512/.config/ngrok/ngrok.yml - Run
npm run buildin client folder (When using ngrok, the backend serves the static build of the React application.)
This ensures that ngrok path is correctly set up, and now you can run the app.
Ngrok runs automatically when running the app with either npm run dev or npm start.
You can get the ngrok tunnel link in the console when app is running.
WebSockets are used to broadcast events to employee interfaces: (Front desk | Race control | Lap-line Observer)
and to public interfaces (Spectator | Race driver)
- Front desk has the ability to create and modify races.
- Race control has the ability to start and end races, and change the race state during a race.
- Lap-line observer has the ability to measure lap times during races
All these updates are communicated to all connected interfaces in real time.
Each employee interface requires an access key before being able to interact with it. Access keys are set on both the backend and frontend in .env files.
Front desk sees the upcoming races, and has the ability to edit them (add racers, delete racers, assign cars, delete race). Front desk header section has the "Add New Race" button to add new races.
Race control sees the upcoming races, and has the ability to go to the Control Dashboard of the next race. On the Control Dashboard we can start the race, and during the race we can control race states.
Race states are represented by flags:
- Green (race is ongoing)
- Yellow (drive slowly)
- Red (stop driving, danger)
- Checkered (proceed to the pit lane, end of race)
When a new race starts, and a user is logged in to the lap-line observer interface, you will be automatically redirected to the ongoing race dashboard. The ongoing race dashboard has a button for each competitor, and the lap-line observer upon clicking on them, registers lap times and lap count.
These include the leaderboard, race countdown, next race screen and flag screen.
- This is an MVP, and not a bulletproof application.