Historical React project built to explore hooks-style state sharing, reducer-driven UI state, and animated browser visuals.

This is a React 16 single-page car speed demo. The player toggles gas/brake pedals, the reducer updates speed, and the UI reflects that state through moving layered backgrounds, spinning wheels, flame visuals, and a speed readout. It is kept as a portfolio/archive project that shows early React Hooks practice, custom context state, reducer actions, component composition, and CSS animation work.

• React function components using hooks.
• Custom Provider and useGlobalState wrapper around useReducer and context.
• Reducer-driven state transitions for gas, brake, speed-up, and slow-down actions.
• Component composition for playing field, car, controls, and background layers.
• CSS animation tied to application state.
• Asset-heavy UI with SVG/PNG car, wheel, pedal, flame, road, mountain, and sky visuals.
• Create React App build workflow.

• React 16
• JavaScript
• React Hooks
• Context API
• useReducer
• CSS animations
• Create React App / react-scripts@3.1.1

• src/App.js - reducer, initial state, provider setup, and app shell.
• src/myHookComponents/useGlobalState.js - custom context + reducer provider.
• src/myHookComponents/myPlayingFieldHookComponent/ - speed readout, layered background, and scene composition.
• src/myHookComponents/myCarHookComponent/ - gas/brake pedal controls and animated car visuals.

yarn install
yarn start

Open http://localhost:3000. The demo is fully client-side and does not require a backend. The npm scripts set the legacy Create React App environment flags needed for modern Node versions; the existing Yarn workflow can still be used if the same environment variables are supplied manually.

Useful scripts:

npm run build
yarn test

Archived portfolio project. The goal of this repository is to show early React Hooks and reducer-driven animation work, not to represent current production React practices.

• Pages project name: pedal-rush
• GitHub repository: BorisThoris/pedal-rush
• Production branch: master
• Root directory: .
• Build command: SKIP_PREFLIGHT_CHECK=true NODE_OPTIONS=--openssl-legacy-provider npx react-scripts build
• Build output directory: build
• Public URL target: https://pedal-rush.pages.dev/

Do not enable Cloudflare Access for the demo deployment. Leave frame-blocking headers unset so the portfolio can iframe the public build.