spectrum store

Spectrum Store

Spectrum Store | Eine robuste E-Commerce-Plattform, die auf Next.js, TypeScript und Shadcn basiert

Es nutzt die Fake Store API und verfügt über ein Admin-Dashboard und eine JWT-Authentifizierung.

Es wurde mit Schwerpunkt auf Sicherheit entwickelt und implementiert Best Practices für Routing und Serveraktionen.

Demo ansehen. Fehler melden. Anforderungsfunktion

---

Merkmale

Technik

• Nächste js 14 Letzte Funktionen

• Nächste js- Serveraktionen + Axios + Zod

• React-Hook-Formular + Validierung mit zod für Client und Server

• Authentifizierungs- JWT + Cookies + Autorisierungsdatenschicht + Middleware

Hauptsächlich

• Anmeldeseite mit JWT -Authentifizierung + Abmeldung

• Startseite mit Rasterlayout

• Produktseite mit Anzeige aller Produkte mit Kategoriefilter

• Produktdetailseite mit der Schaltfläche „Bewertung“ , „Preise“ und „Warenkorb hinzufügen“ .

• Einkaufswagenschublade (zum Einkaufswagen hinzufügen, aus dem Einkaufswagen entfernen)

• Globale Suchfunktion

• Theme Toggler (Hell-/Dunkel-Modus)

• Animationen und Skelett werden geladen

• Admin-Dashboard mit CRUD-Operationen für Produkte, Paginierung und Suchdiagramme

• Sicherheit im Blick : Authentifizierung (JWT + Cookies) und Autorisierungsdatenschicht + Middleware und Serveraktionen mit Validierung

• Optimierte SEO und Leistung : Das Projekt ist für SEO und Leistung optimiert, indem die neuesten Next.js-Funktionen und Best Practices für Meta- Tags und Next/Image- und Sitemaps verwendet werden.

• Responsives Design

Notiz

• Sie können sich mit jedem Fakestoreapi -Benutzer anmelden

• Verwenden Sie für die Administratorrolle nur die Standardwerte

• Benutzername : mor_2314

• Passwort : 83r5^_

• Sie können das Admin-Dashboard öffnen und CRUD für stolze Produkte ausführen, indem Sie die folgenden Schritte ausführen:

• Stellen Sie sicher, dass Sie sich mit dem Administratorkonto anmelden ( mor_2314 ).

• Klicken Sie auf das Benutzersymbol

• Klicken Sie auf Dashboard

Erste Schritte

Führen Sie zunächst den Entwicklungsserver aus:

1. Klonen oder Forken Sie das Repo

    Git-Klon https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. Abhängigkeiten installieren

    npm installieren

3. Benennen Sie die Datei .env.example in .env um

4. Starten Sie den Server

    npm run dev

Öffnen Sie http://localhost:3000 mit Ihrem Browser, um das Ergebnis anzuzeigen.

Sie können mit der Bearbeitung der Seite beginnen, indem Sie app/page.tsx ändern. Die Seite wird automatisch aktualisiert, wenn Sie die Datei bearbeiten.

Bereitstellung auf Vercel

Der einfachste Weg, Ihre Next.js-App bereitzustellen, ist die Verwendung der Vercel-Plattform der Entwickler von Next.js.

Weitere Informationen finden Sie in unserer Next.js-Bereitstellungsdokumentation.

Mitwirken

Beiträge machen die Open-Source-Community zu einem so wunderbaren Ort zum Lernen, Inspirieren und Schaffen. Jeder Beitrag, den Sie leisten, wird sehr geschätzt .

Wenn Sie einen Vorschlag haben, der dies verbessern könnte, forken Sie bitte das Repo und erstellen Sie eine Pull-Anfrage. Sie können ein Problem auch einfach mit dem Tag „Verbesserung“ eröffnen. Vergessen Sie nicht, dem Projekt einen Stern zu geben! Danke noch einmal!

1. Forken Sie das Projekt

2. Erstellen Sie Ihren Feature-Zweig ( git checkout -b feature/AmazingFeature )

3. Übernehmen Sie Ihre Änderungen ( git commit -m 'Add some AmazingFeature' )

4. Push to the Branch ( git push origin feature/AmazingFeature )

5. Öffnen Sie eine Pull-Anfrage

Lizenz

Verteilt unter der MIT-Lizenz. Weitere Informationen finden Sie unter LICENSE.txt .