c shopping
Minimum MVP Publishing
Bonjour à tous! Bienvenue à C-Shopping, un voyage dans le monde du commerce électronique dévoilant les merveilles technologiques. Je suis "Ji Xiaopeng", l'auteur open source de C-shopping, et aujourd'hui, je vous présenterai une plate-forme de commerce électronique open source basée sur les dernières technologies. Explorons ensemble!
Liens de démonstration de projet en direct:
Project Gateway: https://github.com/huanghanzhilian/c-shopping.
React Application mobile d'application mobile:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn.
Si vous trouvez cela utile, donnez-moi une étoile. Ce sera un grand encouragement.
Arrière-plan:
Intention:
Résoudre les problèmes mentionnés en arrière-plan.
Objectif:
Créez un écosystème complet et bien conçu adapté au Web.
Tout d'abord, plongeons dans la technologie derrière C-Shopping. J'ai adopté une série de technologies de pointe, notamment Next.js, Tailwind CSS, Headless UI, Redux-Toolkit-RTK Query, JWT et Docker, entre autres. Cela garantit que ce projet est non seulement efficace mais aussi très évolutif. Nous nous engageons à aborder certains points de douleur des plates-formes de commerce électronique traditionnelles: manque d'esthétique, adaptation inadéquate à différents appareils et une interface monotone, entre autres. En adoptant les dernières technologies et principes de conception, C-Shopping crée une expérience de développement technique entièrement réactive pour les utilisateurs.
C-shopping priorise l'expérience utilisateur. Notre interface est non seulement belle mais aussi réactive, permettant aux utilisateurs de profiter facilement de faire du shopping sur n'importe quel appareil. Les fonctions de gestion du centre et des commandes personnelles rendent également votre expérience d'achat plus personnalisée et pratique.
L'un des moments forts de C-Shopping est l'adoption d'une série de technologies avancées, notamment Next.js, Tailwind CSS, UI sans tête, redux-toolkit-rtk, etc., offrant aux utilisateurs une performance et une expérience ultimes. Nous nous concentrons non seulement sur l'esthétique, mais nous recherchons également l'excellence dans la technologie.
Suivant.js Expérience rapide de la foudre
C-shopping utilise Next.js, ce qui signifie non seulement que la vitesse de chargement de la page Web est incroyablement rapide, mais elle prend également en charge le rendu côté serveur, offrant un niveau de douceur sans précédent.
? Design élégant CSS de vent arrière
En utilisant CSS à vent arrière, C-shopping injecte un sens du style. Chaque interface est exquise, faisant du shopping une fête visuelle.
? Liberté et flexibilité de l'interface utilisateur sans tête
C-shopping opte pour le style d'interface utilisateur sans tête, donnant aux utilisateurs plus de liberté pendant le processus d'achat. Ne se limite plus aux cadres d'interface utilisateur traditionnels, il ouvre plus de portes pour la personnalisation.
? Sécurité JWT sans soucis
La sécurité est primordiale! JWT est utilisé pour l'authentification des utilisateurs, offrant la garantie la plus forte pour votre comportement d'achat, vous permettant de faire du shopping en toute confiance.
? Déploiement parfait de Docker
C-shopping embrasse Docker, ce qui rend le déploiement de projet incroyablement simple. La conteneurisation permet à l'ensemble du projet de s'exécuter de manière transparente dans différents environnements.
Toolkit Redux et RTK Query State Management Art
C-shopping utilise la boîte à outils Redux et la requête RTK, ce qui rend la gestion de l'État plus détendue et agréable. Vous pouvez mieux suivre le flux de données dans l'application, en assurant la stabilité de l'expérience d'achat.
Maintenant, jetons un coup d'œil à certaines fonctionnalités de base de la bouchée C. De la navigation claire et des affichages de produits aux fonctionnalités de recherche et de panier d'achat pratiques, chaque détail a été soigneusement conçu pour offrir aux utilisateurs une expérience de magasinage agréable.
Côté utilisateur
| Module | Dispositifs de bureau | Appareils mobiles |
|---|---|---|
| Maison | ||
| Catégorie secondaire | ||
| Catégorie de troisième niveau | ||
| Détails du produit | ||
| Se connecter | ||
| Registre | ||
| Recherche | ||
| Panier | ||
| Vérifier | ||
| Profil utilisateur | ||
| Mes commandes | ||
| Mes critiques | ||
| Gestion des adresses | ||
| Visites récentes |
Côté administrateur
| Module | Dispositifs de bureau | Appareils mobiles |
|---|---|---|
| Se connecter | ||
| Centre d'administration | ||
| Gestion des utilisateurs | ||
| Gestion des catégories | ||
| Arbre de gestion de catégorie | ||
| Gestion des spécifications | ||
| Gestion des produits | ||
| Gestion des commandes | ||
| Gestion de l'examen | ||
| Gestion des curseurs | ||
| Gestion des bannières |
Structure du projet C-Shopping:
Explication de la structure clé:
? Application : code principal de l'application
? Composants : composants réagissables
? Aiders : fonctions et outils auxiliaires
? Crochets : crochets de réaction personnalisés
? Modèles : définitions de modèles de données
? Public : Ressources statiques, telles que des images, des polices, etc.
? Store : Configuration liée à la gestion de l'état redux
? Styles : Fichiers de style
? Utils : services publics généraux
...
Cette structure est conçue pour rendre le projet organisé, facile à maintenir et évolutif. Chaque section est divisée en fonction de
fonctionnalité et responsabilités, ce qui permet aux membres de l'équipe de comprendre et de collaborer plus facilement.
Environnement de développement
Cloner ou télécharger le référentiel en exécutant la commande suivante dans le terminal:
git clone https://github.com/huanghanzhilian/c-shopping.git
Installez les dépendances du projet à l'aide de NPM ou de fil:
npm install
ou
yarn
Veuillez créer un nouveau fichier .env à partir du fichier .env.example dans le répertoire racine du projet pour définir les variables d'environnement requises. Cette étape est cruciale (pour le téléchargement d'image vers 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>
Installez MongoDB sur votre machine locale.
Exécutez le projet:
npm run dev
Enregistrez un compte:
http://localhost:3000/register
Après avoir créé un compte, trouvez votre compte dans la base de données et modifiez le champ root vers True et le champ role à l'administration. Cela vous donne accès à toutes les fonctionnalités du tableau de bord d'administration:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Entrée administratrice: http: // localhost: 3000 / admin
Dans MongoDB, créez la catégorie racine:
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
})
Déploiement de Docker
Le répertoire racine du projet est déjà configuré avec Docker Compose. Après avoir installé Docker, exécutez simplement le déploiement:
docker compose up -d --build
Je suis un explorateur technologique, un apprenant impatient et un résolveur de problèmes.
我是一个技术的探索者 ， 一个渴望学习的人 ， 一个解决问题的人。
Suivez notre compte officiel de WeChat pour plus d'informations. N'hésitez pas à fournir des commentaires ou des suggestions en ouvrant un problème ou en laissant un message sur le compte officiel. Vous êtes également invités à m'ajouter sur WeChat pour une communication plus approfondie.
| Mon compte officiel WeChat | Mon WeChat |
|---|---|
Mit
Copyright (C) 2024 Jipeng Huang
C-shopping est un projet open-source, et nous nous réjouissons de plus de développeurs pour rejoindre notre communauté. Vous pouvez trouver le code source du projet sur notre référentiel GitHub, suggérer des améliorations ou contribuer au développement.
Si vous êtes intéressé par le projet, n'hésitez pas à rejoindre notre communauté et à contribuer à la croissance du projet.
