[PR #101] [FEAT] Electron powered gui #143

New issue

Open

opened 2026-05-07 00:18:53 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-07 00:18:53 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/IAmTomShaw/f1-race-replay/pull/101
Author: @xhemals
Created: 12/21/2025
Status: 🔄 Open

Base: main ← Head: docs/resolve-conflicts

📝 Commits (10+)

c405ddf initialize Electron app with React and TypeScript
4a484cf Create first POC of gui with python integration
ebb2a88 docs: added contribution guidelines
28e89ac Merge pull request #1 from xhemals/feature/gui
d0bb363 fix: add return type annotations to App and YearCard components
02d3bb2 feat: implement year navigation and create Year page component (#3)
3cebfa5 docs: enhance contributing guidelines and development setup documentation (#6)
6dc0c1a Merge remote-tracking branch 'upstream/main'
e26424e Feature/base year pages (#7)
c485246 Feature/start gui (#8)

📊 Changes

49 files changed (+12402 additions, -7 deletions)

View changed files

📝 .gitignore (+13 -1)
➕ .vscode/extensions.json (+3 -0)
➕ .vscode/launch.json (+39 -0)
➕ .vscode/settings.json (+11 -0)
➕ CONTRIBUTING.md (+75 -0)
📝 README.md (+55 -5)
📝 contributors.md (+2 -1)
➕ docs/contributing/development-setup.md (+64 -0)
➕ gui/.editorconfig (+8 -0)
➕ gui/.prettierignore (+6 -0)
➕ gui/.prettierrc.yaml (+4 -0)
➕ gui/README.md (+34 -0)
➕ gui/build/entitlements.mac.plist (+12 -0)
➕ gui/build/icon.icns (+0 -0)
➕ gui/build/icon.ico (+0 -0)
➕ gui/build/icon.png (+0 -0)
➕ gui/dev-app-update.yml (+3 -0)
➕ gui/electron-builder.yml (+43 -0)
➕ gui/electron.vite.config.ts (+25 -0)
➕ gui/eslint.config.mjs (+32 -0)

...and 29 more files

📄 Description

I have created an electron app with React as the frontend. This allows ease of use to pick races users want to watch replays of. This is a great foundation for the GUI Menu System goal. Due to creating in React it is simple to contribute to if users have any web dev experience.

Features:

Select the year you want to view
List races from the selected year
When you select a race, it runs the python code in the background and will then pop up with the replay

Start GUI batch script for ease of use for non technical windows users
Updated docs on how to run the gui for mac and linux

Also included in this PR:

New CONTRIBUTING.md: Explain to users how to contribute and the guidelines to follow for consitent formatting and PRs (Currently just for REACT as unsure how you want python)
Dev setup doc: Explain to users how to setup the dev environment to contribute

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/IAmTomShaw/f1-race-replay/pull/101 **Author:** [@xhemals](https://github.com/xhemals) **Created:** 12/21/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `docs/resolve-conflicts` --- ### 📝 Commits (10+) - [`c405ddf`](https://github.com/IAmTomShaw/f1-race-replay/commit/c405ddf149e23fc8456f18760ce12c896bedcd63) initialize Electron app with React and TypeScript - [`4a484cf`](https://github.com/IAmTomShaw/f1-race-replay/commit/4a484cf92b7fc0c86efbe5e1515a819ffb16fbeb) Create first POC of gui with python integration - [`ebb2a88`](https://github.com/IAmTomShaw/f1-race-replay/commit/ebb2a88993de30ec1d15c71c28aa74bbd9e833ed) docs: added contribution guidelines - [`28e89ac`](https://github.com/IAmTomShaw/f1-race-replay/commit/28e89acbf25f05344fd71835e15a32038edbf08d) Merge pull request #1 from xhemals/feature/gui - [`d0bb363`](https://github.com/IAmTomShaw/f1-race-replay/commit/d0bb363c4f3a943cc53a6c908a16dfe617342e1f) fix: add return type annotations to App and YearCard components - [`02d3bb2`](https://github.com/IAmTomShaw/f1-race-replay/commit/02d3bb25b8e3586d212178a6d45b1e93107f81a5) feat: implement year navigation and create Year page component (#3) - [`3cebfa5`](https://github.com/IAmTomShaw/f1-race-replay/commit/3cebfa52c44e6b99a6fe0424b3aa23440772f6cb) docs: enhance contributing guidelines and development setup documentation (#6) - [`6dc0c1a`](https://github.com/IAmTomShaw/f1-race-replay/commit/6dc0c1ab64c18ea303bf6e7a6a7aa248076274f0) Merge remote-tracking branch 'upstream/main' - [`e26424e`](https://github.com/IAmTomShaw/f1-race-replay/commit/e26424eba4a85132e43d501528f04688bc13f356) Feature/base year pages (#7) - [`c485246`](https://github.com/IAmTomShaw/f1-race-replay/commit/c485246c04757fd30f206974159c380cf34682dd) Feature/start gui (#8) ### 📊 Changes **49 files changed** (+12402 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+13 -1) ➕ `.vscode/extensions.json` (+3 -0) ➕ `.vscode/launch.json` (+39 -0) ➕ `.vscode/settings.json` (+11 -0) ➕ `CONTRIBUTING.md` (+75 -0) 📝 `README.md` (+55 -5) 📝 `contributors.md` (+2 -1) ➕ `docs/contributing/development-setup.md` (+64 -0) ➕ `gui/.editorconfig` (+8 -0) ➕ `gui/.prettierignore` (+6 -0) ➕ `gui/.prettierrc.yaml` (+4 -0) ➕ `gui/README.md` (+34 -0) ➕ `gui/build/entitlements.mac.plist` (+12 -0) ➕ `gui/build/icon.icns` (+0 -0) ➕ `gui/build/icon.ico` (+0 -0) ➕ `gui/build/icon.png` (+0 -0) ➕ `gui/dev-app-update.yml` (+3 -0) ➕ `gui/electron-builder.yml` (+43 -0) ➕ `gui/electron.vite.config.ts` (+25 -0) ➕ `gui/eslint.config.mjs` (+32 -0) _...and 29 more files_ </details> ### 📄 Description I have created an electron app with React as the frontend. This allows ease of use to pick races users want to watch replays of. This is a great foundation for the `GUI Menu System` goal. Due to creating in React it is simple to contribute to if users have any web dev experience. Features: - Select the year you want to view <img width="297" height="198" alt="image" src="https://github.com/user-attachments/assets/76e170b2-d5de-4638-8233-967392eff91b" /> - List races from the selected year <img width="297" height="198" alt="image" src="https://github.com/user-attachments/assets/33f392ff-5b8c-4f2f-b71a-7723771af1fe" /> - When you select a race, it runs the python code in the background and will then pop up with the replay <img width="297" height="198" alt="image" src="https://github.com/user-attachments/assets/efd2e346-05a4-49a1-93c4-55ab7038cb77" /> <img width="3838" height="1391" alt="image" src="https://github.com/user-attachments/assets/6ae2d112-6c2d-4381-94bc-71df26823389" /> - Start GUI batch script for ease of use for non technical windows users - Updated docs on how to run the gui for mac and linux Also included in this PR: - New CONTRIBUTING.md: Explain to users how to contribute and the guidelines to follow for consitent formatting and PRs (Currently just for REACT as unsure how you want python) - Dev setup doc: Explain to users how to setup the dev environment to contribute --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>