spectrum store

Magasin de spectre

Magasin de spectre | Une plate-forme de commerce électronique robuste optimisée par Next.js, TypeScript et Shadcn

Cela exploite l'API Fake Store, il comprend un tableau de bord d'administration et une authentification JWT.

Conçu en mettant l'accent sur la sécurité, il met en œuvre les meilleures pratiques en matière de routage et d'actions du serveur.

Voir la démo . Signaler un bug. Fonctionnalité de demande

---

Caractéristiques

Technique

• Suivant js 14 Dernières fonctionnalités

• Actions du serveur js suivant + Axios + Zod

• Formulaire de hook React + Validation avec zod pour le client et le serveur

• Authentification JWT + Cookies + Autorisation Couche de DONNÉES + Middleware

Principal

• Page de connexion avec authentification JWT + déconnexion

• Page d'accueil avec disposition en grille

• Page produit affichant tous les produits avec filtre de catégorie

• Page de détails du produit avec bouton d'évaluation , de tarification et d'ajout de panier

• Tiroir de panier (ajouter au panier, retirer du panier)

• Fonctionnalité de recherche globale

• Basculeur de thème (mode clair/sombre)

• Chargement des animations et du squelette

• Tableau de bord d'administration avec opérations CRUD pour les produits, la pagination et la recherche de graphiques

• Sécurité à l'esprit : Authentification (JWT + Cookies) & Autorisation DATA Layer + Middleware & Actions Serveur avec validation

• SEO et performances optimisés : le projet est optimisé pour le référencement et les performances en utilisant les dernières fonctionnalités Next.js et les meilleures pratiques pour les balises méta et les plans de site Next/Image &&.

• Conception réactive

Note

• vous pouvez utiliser n'importe quel utilisateur fakestoreapi pour vous connecter

• pour le rôle d'administrateur , utilisez uniquement les valeurs par défaut

• nom d'utilisateur : mor_2314

• mot de passe : 83r5^_

• Vous pouvez ouvrir le tableau de bord d'administration et effectuer du CRUD sur les produits en suivant ces étapes :

• assurez-vous de vous connecter avec le compte administrateur ( mor_2314 )

• cliquez sur l'icône utilisateur

• cliquez sur le tableau de bord

Commencer

Tout d'abord, exécutez le serveur de développement :

1. Cloner ou forker le dépôt

    git clone https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. Installer les dépendances

    installation npm

3. renommer le fichier .env.example en .env

4. Démarrer le serveur

    npm exécuter le développement

Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Vous pouvez commencer à éditer la page en modifiant app/page.tsx . La page se met à jour automatiquement au fur et à mesure que vous modifiez le fichier.

Déployer sur Vercel

Le moyen le plus simple de déployer votre application Next.js consiste à utiliser la plateforme Vercel des créateurs de Next.js.

Consultez notre documentation de déploiement Next.js pour plus de détails.

Contribuer

Les contributions sont ce qui fait de la communauté open source un endroit si formidable pour apprendre, inspirer et créer. Toutes les contributions que vous apportez sont grandement appréciées .

Si vous avez une suggestion pour améliorer cela, veuillez créer le dépôt et créer une pull request. Vous pouvez aussi simplement ouvrir un ticket avec la balise « amélioration ». N'oubliez pas de donner une étoile au projet ! Merci encore!

1. Forkez le projet

2. Créez votre branche de fonctionnalités ( git checkout -b feature/AmazingFeature )

3. Validez vos modifications ( git commit -m 'Add some AmazingFeature' )

4. Pousser vers la branche ( git push origin feature/AmazingFeature )

5. Ouvrir une demande de tirage

Licence

Distribué sous licence MIT. Voir LICENSE.txt pour plus d'informations.