• De
  • Fr
BackHome

React Burger

A full-stack burger-ordering SPA built with React, featuring drag-and-drop ingredient selection, real-time order tracking, and JWT-secured accounts.

Demo Access
Email:anton@gmail.com
Password:test12345

Technologies Used

React
ReactKomponentenbasierte UI-Bibliothek
TypeScriptTypisierte JavaScript-Erweiterung
ReduxVorhersagbarer globaler State
Cypress
CypressEnd-to-End-Testing
JestUnit-Testing-Framework
React Router
React RouterClient-seitiges Routing
React DnD
React DnDDrag-and-Drop-Interaktionen
React Context API
React Context APIGemeinsamer State & Übersetzungen
WebSockets
WebSocketsEchtzeit-Datenstreaming
JWTs
JWTsToken-basierte Authentifizierung

Technologies

02

Core Stack

React
TypeScript
Redux
Cypress
Jest

Libraries & Tooling

React Router
React DnD
React Context API
WebSockets
JWTs

Key Features

Key Features

Drag & Drop

Assemble a burger by dragging ingredients straight into the constructor. React DnD manages the drag sources, drop targets, and live reordering, so composing and rearranging a build feels natural and responsive.

State & Localization

Global state is centralised with Redux and @reduxjs/toolkit, keeping the cart, ingredients, and order flow predictable, while the React Context API powers in-app translations for a fully multilingual interface.

Testing

A two-layer test suite keeps changes safe: Cypress drives end-to-end flows through the real UI, while Jest covers units and reducers — together guarding against regressions on every commit.

Auth

Registration and login are secured with JSON Web Tokens. Tokens are stored securely and attached to protected requests, with guarded routes that redirect unauthenticated users away from private pages.

Live Data

A persistent WebSocket connection streams the public order feed and the user's personal order history in real time, so statuses update instantly with no manual refreshes or polling.

CD / Deploy

Continuous delivery ships the app to GitHub Pages, turning every push to the main branch into an automated build and deploy for fast, repeatable releases.

Key Features

03

Drag & Drop

01

Assemble a burger by dragging ingredients straight into the constructor. React DnD manages the drag sources, drop targets, and live reordering, so composing and rearranging a build feels natural and responsive.

State & Localization

02

Global state is centralised with Redux and @reduxjs/toolkit, keeping the cart, ingredients, and order flow predictable, while the React Context API powers in-app translations for a fully multilingual interface.

Testing

03

A two-layer test suite keeps changes safe: Cypress drives end-to-end flows through the real UI, while Jest covers units and reducers — together guarding against regressions on every commit.

Auth

04

Registration and login are secured with JSON Web Tokens. Tokens are stored securely and attached to protected requests, with guarded routes that redirect unauthenticated users away from private pages.

Live Data

05

A persistent WebSocket connection streams the public order feed and the user's personal order history in real time, so statuses update instantly with no manual refreshes or polling.

CD / Deploy

06

Continuous delivery ships the app to GitHub Pages, turning every push to the main branch into an automated build and deploy for fast, repeatable releases.