c shopping
Minimum MVP Publishing
Hallo zusammen! Willkommen im C-Shoping, eine Reise in die Welt des E-Commerce-Enthüllung der technologischen Wunder. Ich bin "Ji Xiaopeng", der Open-Source-Autor von C-Shopping, und heute werde ich Ihnen eine Open-Source-E-Commerce-Plattform vorstellen, die auf den neuesten Technologien basiert. Lassen Sie uns gemeinsam erkunden!
Projekt Live -Demo -Links:
Projektgateway: https://github.com/huanghannzhilian/c-shoping.
Reagieren Sie native mobile App -Anwendung:
Projektgateway: https://github.com/huanghannzhilian/c-shoping-rn.
Wenn Sie dies hilfreich finden, geben Sie mir bitte einen Stern. Es wird eine große Ermutigung sein.
Hintergrund:
Absicht:
Besprechen Sie die im Hintergrund genannten Probleme.
Objektiv:
Erstellen Sie ein komplettes, gut gestaltetes Ökosystem, das für das Web geeignet ist.
Lassen Sie uns zunächst mit der Technologie hinter dem C-Shoping eintauchen. Ich habe unter anderem eine Reihe hochmoderner Technologien angewendet, darunter Next.js, Tailwind CSS, Headless UI, Redux-Toolkit-RTK-Abfrage, JWT und Docker. Dies stellt sicher, dass dieses Projekt nicht nur effizient, sondern auch sehr skalierbar ist. Wir sind bestrebt, einige Schmerzpunkte traditioneller E-Commerce-Plattformen anzusprechen: mangelnde Ästhetik, unzureichende Anpassung an verschiedene Geräte und eine monotonische Schnittstelle. Durch die Einführung der neuesten Technologien und Designprinzipien schafft C-Shopping für Benutzer eine vollständig reaktionsschnelle technische Entwicklungserfahrung.
C-Shopping priorisiert die Benutzererfahrung. Unsere Benutzeroberfläche ist nicht nur schön, sondern auch reaktionsschnell, sodass Benutzer auf jedem Gerät problemlos einkaufen können. Das persönliche Zentrum und die Auftragsmanagementfunktionen machen Ihr Einkaufserlebnis auch personalisierter und bequemer.
Einer der Highlights des C-Shopping ist die Einführung einer Reihe fortschrittlicher Technologien, darunter Next.js, Tailwind CSS, Headless UI, Redux-Toolkit-RTK-Abfrage usw. und bietet den Benutzern eine ultimative Leistung und Erfahrung. Wir konzentrieren uns nicht nur auf Ästhetik, sondern streben auch nach Exzellenz in der Technologie.
Next.js angetriebene blitzschnelle Erfahrung
C-Shopping verwendet Next.js, was bedeutet, dass die Webseite nicht nur unglaublich schnell ist, sondern auch die serverseitige Darstellung unterstützt und ein beispielloses Maß an Glätte bietet.
? Rückenwind CSS Stylisches Design
Durch die Verwendung von Tailwind-CSS injiziert C-Shopping einen Sinn für Stil. Jede Schnittstelle ist exquisit und macht das Einkaufen zu einem visuellen Fest.
? Kopfloses UI -Freiheit und Flexibilität
C-Shopping entscheidet sich für den Kopf ohne Kopflosen UI-Stil und verleiht den Benutzern während des Einkaufsprozesses mehr Freiheit. Es wird nicht mehr auf herkömmliche UI -Frameworks beschränkt und öffnet mehr Türen für die Anpassung.
? JWT -Sicherheit ohne Sorgen
Sicherheit ist von größter Bedeutung! JWT wird für die Benutzerauthentifizierung verwendet und bietet die stärkste Garantie für Ihr Einkaufsverhalten und ermöglicht es Ihnen, Vertrauen einzukaufen.
? Docker Perfect Deployment
C-Shopping umfasst Docker und macht die Projekteinstellung unglaublich einfach. Durch die Containerisierung kann das gesamte Projekt in verschiedenen Umgebungen nahtlos ausgeführt werden.
Redux Toolkit und RTK Query State Management Kunst
C-Shopping verwendet Redux-Toolkit- und RTK-Abfrage, wodurch das Staatsmanagement entspannter und angenehmer wird. Sie können den Datenfluss in der Anwendung besser verfolgen und die Stabilität des Einkaufserlebnisses sicherstellen.
Schauen wir uns nun einige grundlegende Funktionen des C-Shopping an. Von klaren Navigations- und Produktdisplays bis hin zu bequemen Such- und Einkaufswagenfunktionen wurde jedes Detail sorgfältig entwickelt, um den Benutzern ein angenehmes Einkaufserlebnis zu bieten.
Benutzerseite
| Modul | Desktop -Geräte | Mobile Geräte |
|---|---|---|
| Heim | ||
| Sekundärkategorie | ||
| Kategorie der dritten Ebene | ||
| Produktdetails | ||
| Login | ||
| Registrieren | ||
| Suchen | ||
| Einkaufswagen | ||
| Kasse | ||
| Benutzerprofil | ||
| Meine Bestellungen | ||
| Meine Bewertungen | ||
| Adressmanagement | ||
| Jüngste Besuche |
Admin-Seite
| Modul | Desktop -Geräte | Mobile Geräte |
|---|---|---|
| Login | ||
| Administratorzentrum | ||
| Benutzerverwaltung | ||
| Kategorieverwaltung | ||
| Kategorieverwaltungsbaum | ||
| Spezifikationsmanagement | ||
| Produktmanagement | ||
| Auftragsmanagement | ||
| Überprüfungsmanagement | ||
| Slider -Management | ||
| Bannermanagement |
C-Shopping-Projektstruktur:
Schlüsselstruktur Erläuterung:
? App : Hauptcode der Anwendung
? Komponenten : Wiederverwendbare Reaktionskomponenten
? Helfer : Helferfunktionen und Tools
? Haken : benutzerdefinierte React -Haken
? Modelle : Datenmodelldefinitionen
? Öffentlich : Statische Ressourcen wie Bilder, Schriftarten usw.
? Speicher : Konfiguration im Zusammenhang mit Redux State Management
? Stile : Stildateien
? Utils : Allgemeine Versorgungsunternehmen
...
Diese Struktur ist so konzipiert, dass das Projekt organisiert, leicht zu warten und skalierbar ist. Jeder Abschnitt wird basierend auf geteilt
Funktionalität und Verantwortlichkeiten, die es den Teammitgliedern erleichtern, zu verstehen und zusammenzuarbeiten.
Entwicklungsumfeld
Klonen oder Laden Sie das Repository herunter, indem Sie den folgenden Befehl im Terminal ausführen:
git clone https://github.com/huanghanzhilian/c-shopping.git
Installieren Sie Projektabhängigkeiten mit NPM oder Garn:
npm install
oder
yarn
Bitte erstellen Sie eine neue .env -Datei aus .env.example -Datei im Projektroot -Verzeichnis, um die erforderlichen Umgebungsvariablen zu definieren. Dieser Schritt ist von entscheidender Bedeutung (für das Bild -Upload auf OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
Installieren Sie MongoDB auf Ihrem lokalen Computer.
Führen Sie das Projekt aus:
npm run dev
Registrieren Sie ein Konto:
http://localhost:3000/register
Finden Sie nach dem Erstellen eines Kontos Ihr Konto in der Datenbank und ändern Sie das root in True und das role an Admin. Diese Zuschüsse zu allen admin -Dashboard -Funktionen zugreifen:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Administratoreingang: http: // localhost: 3000/admin
Erstellen Sie in MongoDB die Stammkategorie:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
Docker -Bereitstellung
Das Projekt Root -Verzeichnis ist bereits mit Docker Compose konfiguriert. Führen Sie nach der Installation von Docker einfach die Bereitstellung aus:
docker compose up -d --build
Ich bin ein Technologie -Explorer, ein eifriger Lernender und ein Problemlöser.
我是一个技术的探索者 ， 一个渴望学习的人 ， 一个解决问题的人。 一个解决问题的人。
Folgen Sie unserem WeChat Official Account, um weitere Informationen zu erhalten. Fühlen Sie sich frei, Feedback oder Vorschläge zu geben, indem Sie ein Problem eröffnen oder eine Nachricht auf dem offiziellen Konto hinterlassen. Sie können mich auch für weitere Kommunikation in WeChat hinzufügen.
| Mein WeChat -offizielles Konto | Mein Wechat |
|---|---|
MIT
Copyright (C) 2024 Jipeng Huang
C-Shopping ist ein Open-Source-Projekt, und wir begrüßen mehr Entwickler, um sich unserer Community anzuschließen. Sie finden den Projektquellcode in unserem Github -Repository, schlagen Verbesserungen vor oder beitragen zur Entwicklung.
Wenn Sie an dem Projekt interessiert sind, können Sie sich unserer Community anschließen und zum Wachstum des Projekts beizutragen.
