Skip to content

Latest commit

 

History

History
152 lines (109 loc) · 5.85 KB

README_DE.md

File metadata and controls

152 lines (109 loc) · 5.85 KB
Raw
Logo

View Demo · Report Bug · Request Feature

Table of Contents

Dieses Projekt ist eine E-Commerce-Plattform mit einer einfachen Benutzeroberfläche, die mit modernen Webtechnologien entwickelt wurde. Ich habe versucht, sie anzupassen, um dem Design der Online-Shop-Seite von Duolingo zu ähneln, zu Bildungszwecken. Fortgeschrittene Funktionen von React, React Router sowie Zustandsverwaltung und Seitenrouting-Fähigkeiten wurden genutzt. Diese Plattform ermöglicht es den Nutzern, Produkte zu erkunden, sie in ihren Warenkorb zu legen und Einkäufe zu tätigen, und bietet dabei eine benutzerfreundliche Oberfläche.

Screenshots

Duolingo Store!

Logo

Logo

Logo

(zurück zum Anfang)

Ziele und Funktionen

  • Benutzererfahrung priorisieren:: Eine Plattform schaffen, auf der Nutzer mühelos navigieren, Produkte finden und Einkäufe tätigen können.
  • Dynamische Inhaltsverwaltung:: Echtzeitaktualisierungen von Produkten und Warenkorbinhalten basierend auf der Nutzerinteraktion gewährleisten.
  • Responsives Design: Die Benutzeroberfläche so gestalten, dass sie sich nahtlos an verschiedene Geräte und Bildschirmgrößen anpasst.
  • Warenkorbverwaltung: Einen Bereich bereitstellen, in dem Nutzer Produkte in ihren Warenkorb legen, dessen Inhalte anzeigen und den Warenkorb verwalten können.
  • Produktauflistung: Produkte in einem Schaufenster präsentieren, wobei hervorgehobene oder rabattierte Artikel besonders betont werden.
  • Produktdetailseite: Detaillierte Informationen über ein Produkt anzeigen, einschließlich Beschreibung, Preis und Fotos.

(zurück zum Anfang)

Entwicklungsplan

  • Kategorien und Filter: Optionen, um Produkte nach Kategorien zu filtern.
  • Suche: Eine Suchfunktion, die es Nutzern ermöglicht, Produkte nach Name oder Kategorie zu finden.
  • Benutzersitzung: Die Möglichkeit für Nutzer, Konten zu erstellen, sich anzumelden und Sitzungen zu verwalten.
  • Bestellverwaltung: Ein Bereich, in dem Nutzer ihre Bestellhistorie einsehen und den Status aktueller Bestellungen verfolgen können.

(zurück zum Anfang)

Technologien

  • HTML
  • Tailwind CSS
  • JavaScript
  • React
  • React Router
  • Vite
  • Git
  • Vercel

(zurück zum Anfang)

Schriftarten & Fotos

  • Nunito
  • Google Font
  • Fontawesome Icons
  • Duolingo Product Photos

(zurück zum Anfang)

Was ich gelernt habe

  • React und React Router: Ich habe sowohl grundlegende als auch fortgeschrittene Funktionen dieser Bibliotheken beherrscht, wodurch ich in der Lage bin, Single Page Applications (SPAs) effektiv zu entwickeln.
  • Zustandsverwaltung: Ich habe gelernt, wie man den Anwendungszustand effektiv verwaltet und dynamisch auf Benutzerinteraktionen reagiert.
  • Prinzipien des responsiven Designs: Durch die Verwendung von Tailwind CSS und modernen Layout-Techniken habe ich meine Fähigkeit verbessert, Benutzeroberflächen zu entwerfen, die nahtlos auf allen Geräten funktionieren und den erforderlichen Designs entsprechen.

Herausforderungen

  • Das Schwierigste bei der Entwicklung des Projekts war für mich, die Produkte aktuell in den Warenkorb zu legen und die Anzahl der Produkte im Warenkorb zu aktualisieren. Ich kann sagen, dass ich die meiste Zeit dafür aufgewendet habe.

(zurück zum Anfang)

Erste Schritte

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Clone the project:

git clone git@github.com:mkamburdev/Zuolingo.git

Go to the project directory:

cd Zuolingo

Install the required packages:

npm install

Launch the application:

npm run dev

(zurück zum Anfang)

Demo

https://zuolingo.vercel.app

(zurück zum Anfang)

Kontakt

Muhammed Kambur - @mkambur - info@mkambur.com

(zurück zum Anfang)