Dokumentation Ecommerce Frontend

Einführung

Dieses Projekt ist eine Frontend-Anwendung, die mit React und TypeScript für eine E-Commerce-Plattform entwickelt wurde. Es ermöglicht Benutzern, Produkte zu durchsuchen, einen Warenkorb zu verwalten und Bestellungen aufzugeben.

Hauptfunktionen

Produktanzeige mit Filtern und Suche
Warenkorb-Verwaltung
Checkout-Prozess
Responsive Benutzeroberfläche
Unit-Tests mit Jest und React Testing Library

Projektstruktur

Hier ist die Verzeichnisstruktur des Projekts:

build - Build-Dateien

coverage - Test-Coverage-Berichte

node_modules - Projektabhängigkeiten

public - Öffentliche Dateien

src - Anwendungs-Quellcode

.gitignore - Von Git ignorierte Dateien

jest.config.ts - Jest-Konfiguration

package-lock.json - Versionsgesicherte Abhängigkeiten

package.json - Projektabhängigkeiten und Skripte

README.md - Projektdokumentation

tsconfig.json - TypeScript-Konfiguration

Detaillierte Struktur des src-Ordners

src

│

├── components - React-Komponenten

│ ├── __tests__ - Komponententests

│ ├── HeaderWrapper.tsx - Anwendungsheader

│ └── ProductComponent.tsx - Produktkomponente

│

├── utils - Hilfsprogramme

│ └── constants.ts - Anwendungskonstanten

│

└── index.tsx - Anwendungseinstiegspunkt

Installation

Befolgen Sie diese Schritte, um das Projekt lokal zu installieren:

# Repository klonen
git clone https://github.com/ihr-username/ecommerce-frontend.git

# In das Projektverzeichnis wechseln
cd ecommerce-frontend

# Abhängigkeiten installieren
npm install

Hinweis: Stellen Sie sicher, dass Node.js Version 18 oder höher auf Ihrem System installiert ist.

Verwendung

Entwicklung

So starten Sie die Anwendung im Entwicklungsmodus:

npm start

Die Anwendung ist unter http://localhost:3000 erreichbar.

Build

So erstellen Sie einen Production-Build:

npm run build

Die optimierten Dateien werden im build-Ordner generiert.

Tests

Das Projekt verwendet Jest und React Testing Library für Unit-Tests.

Tests ausführen

# Alle Tests ausführen
npm test

# Tests im Watch-Modus ausführen
npm test -- --watch

# Coverage-Bericht generieren
npm test -- --coverage

Behebung von Testproblemen

Wenn Sie den Fehler TransformStream is not defined erhalten:

Dieser Fehler tritt bei neueren MSW-Versionen in Node.js auf. Mögliche Lösungen:

// Lösung 1: Polyfill in jest.setup.js hinzufügen
const { ReadableStream, TransformStream, WritableStream } = require('web-streams-polyfill');
global.ReadableStream = ReadableStream;
global.TransformStream = TransformStream;
global.WritableStream = WritableStream;

// Lösung 2: Ältere MSW-Version verwenden
npm install msw@^1.3.2

Deployment

So deployen Sie die Anwendung auf einem Production-Server:

# Anwendung bauen
npm run build

# Die Dateien im 'build'-Ordner sind bereit für das Deployment
# Sie können von einem statischen Webserver wie Nginx bereitgestellt werden

Umgebungsvariablen

Erstellen Sie eine .env-Datei im Projektroot für die Konfiguration:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_STRIPE_PUBLIC_KEY=Ihr_öffentlicher_Stripe_Key