Übungsprojekt: Soziales Netzwerk mit React und TypeScript

Dieses Projekt ist ein Lernkurs zur Entwicklung eines modernen sozialen Netzwerks mit React und TypeScript. Das Projekt befindet sich in der aktiven Entwicklung und derzeit sind folgende Funktionen implementiert:

Einrichtung der Umgebung mit Webpack und TypeScriptt

• Integration von TypeScript zur Verbesserung der Typisierung des Codes.
• Dekonstruktion und Konfiguration der Webpack-Konfigurationsdateien zur Verwaltung verschiedener Aspekte des Projekts.

Lokale Entwicklung mit Webpack-dev-server

• Einrichtung eines lokalen Entwicklungsservers mit automatischer Neuladefunktion bei Änderungen.

Integration von React und Stilkonfiguration mit CSS Modules

• Einführung von React in das Projekt und Konfiguration der Stilübernahme mit CSS Modules.

Routing und Ladeoptimierung mit React Router

• Реализация маршрутизации с использованием React Router.Implementierung der Routenverwaltung mit React Router.
• Einführung von Code-Splitting und Lazy Loading für eine effiziente Code-Ladung der Anwendung.

Organisation der Stile und Unterstützung von Themen

• Strukturierung der Stile und Einführung der Unterstützung für Themen zur einfachen Anpassung des Erscheinungsbilds der Anwendung.

Organisation des Dateisystems nach der FSD-Methodik

• Strukturierung des Projekts unter Verwendung der Feature-Sliced Design (FSD) Methodik zur Vereinfachung der Code-Navigation und Verbesserung der Skalierbarkeit des Projekts.

Internationalisierung mit i18n und Übersetzungs-Plugins

• Implementierung von Internationalisierungsmechanismen mit i18n und entsprechenden Übersetzungs-Plugins.

Testen mit Jest

• Einrichtung der Testumgebung mit Jest und Schreiben von grundlegenden Tests zur Überprüfung der Anwendungsfunktionalität.

Fehlerbehandlung mit ErrorBoundary

• Einführung von ErrorBoundary zur Fehlerbehandlung in React-Komponenten und zur Vermeidung von Anwendungsabstürzen.

Analyse der Größe und Optimierung der Builds mit BundleAnalyzer

• Verwendung von BundleAnalyzer zur Analyse der Größe und Struktur der Anwendungs-Builds zur Optimierung.

Voraussetzungen

• Node.js
• npm

Installation

1. Klonen Sie das Repository:

   git clone https://github.com/ya-aliina/social-network.git

2. Installieren Sie die Abhängigkeiten:

   npm install

Skripte

• Starten des Entwicklungsservers:

  npm start

• Erstellen einer Entwicklungs-Build:

  npm run build:dev

• Erstellen einer Produktions-Build:

  npm run build:prod

• Linting von TypeScript-Dateien:

  npm run lint:ts
  npm run lint:ts:fix

• Linting von SCSS-Dateien:

  npm run lint:scss
  npm run lint:scss:fix

• Ausführen von Tests:

  npm test