Application de commerce électronique mobile Open Source Full Stack Fabriqué avec MongoDB, Express, React Native et Nodejs
- Configuration et configuration
- Caractéristiques clés
- Technologies utilisées
- Frontend (mobile)
- Backend
- Base de données
- ? Maquette
- ? Vidéo de projet
- Auteur
- Licence
Configuration et configuration
Afin d'exécuter ce projet localement, fourchez simplement et clonez le référentiel ou téléchargez comme zip et dézip sur votre machine.
- Ouvrez le projet dans votre éditeur de code préféré.
- Accédez à Terminal -> Nouveau terminal (si vous utilisez VS Code)
- Vous devez d'abord exécuter le serveur NGROK. Ce serveur ne doit pas être arrêté pour le travail de projet
- Ouvrez ensuite un terminal différent. Divisez votre terminal en deux (exécutez le serveur dans un terminal et client dans l'autre)
Ngrok est un logiciel qui nous permet d'ouvrir nos applications que nous exécutons sur LocalHost sur notre propre ordinateur, sur le cloud, sous le sous-domaine xxx.ngrok.io. Configuration Ngrok.
1- pour exposer le serveur à l'aide de ngrok;
- Copiez ensuite l'URL Ngrok sur le serveur en cours d'exécution
- CDI client et coller ngrok_url dans .env Under ./Client
- Maintenant, la connexion avec le client est assurée
NGROK_URL = "http://_______.ngrok.io"
2- dans un terminal différent;
Dans la première moitié du terminal
$ cd Client
$ npm install (to install client-side dependencies)
$ expo r -c
Dans la seconde moitié du terminal
- CD Server et définir des variables d'environnement dans config.env sous ./config/env
- Créez votre URL de connexion MongoDB, que vous utiliserez comme mongo_uri
- Fournir les informations d'identification suivantes
# --- Config.env ---
NODE_ENV = development
PORT =5000
MONGO_URI =
JWT_SECRET_KEY =
# --- Terminal ---
$ npm install (to install server-side dependencies)
$ npm start (to start the server)
Caractéristiques clés
- ✔️ Enregistrement et connexion des utilisateurs
- ✔️ Authentification à l'aide de jetons JWT
- ✔️ Favorite, commentez et ajoutez des produits au panier
- ✔️ Sélectionnez des produits en fonction des informations sur les couleurs et la taille et ajoutez-les au chariot
- ✔️ montrant les derniers produits que vous avez examinés et des recommandations de produits similaires
- ✔️ Catégories de produits Page et affichage des sous-catégories
- ✔️ Recherche de produits par nom, marque et catégorie
- ✔️ augmenter, diminuer ou supprimer la quantité de chaque élément dans le chariot
- ✔️ Recevoir les commandes en sélectionnant l'adresse de livraison et la carte bancaire
- ✔️ Page de détail affichant toutes les commandes passées et le dernier état des produits (heure d'expédition, date de livraison) pour chaque commande
- ✔️ Pages de changement de messagerie et de mot de passe
- ✔️ L'attention a été accordée à la gestion des erreurs
- Page de mot de passe oubliée et réinitialisation du mot de passe
- Ajout de photos aux commentaires
- Connectez-vous avec le compte Google
- Création d'une page personnalisée pour chaque marque
- Ajout de système de paiement (Stripe)
- Les demandes sont parfois traitées lentement et causent des problèmes lorsqu'ils sont licenciés en même temps (l'architecture microservice pourrait-elle être la solution ?.)
Technologies utilisées
Ce projet a été créé en utilisant les technologies suivantes.
Frontend (mobile)
- React JS - bibliothèque JavaScript utilisée pour créer des interfaces utilisateur spécifiquement pour les applications à une seule page
- React Hooks - pour gérer et centraliser l'état d'application
- React Native - Un cadre de développement d'applications mobiles multiplateforme
- React Navigation V6 - routage et navigation pour les applications natives EXPO et réagissent
- Axios - pour passer des appels API
- React-Native Bouncy-Checkbox
7.2.1 - react-native-element-textinput
2.2.0 - React-Native-Getture-Bottom-Sheet
1.1.0 - réactions-indicateurs-indicateurs
0.17.0 - réactif-natif-modal
13.0.1 - réactif-native-popup-menu
0.16.1 - React-Native-Progress
5.0.0 - réactions natives
8.1.0 - réactif-natif-safe-Area-Context
4.4.1 - réactif-natif-simple-dialogs
1.5.0 - réactif-natif-step-indicateur
1.0.3 - react-native-toast-message
2.1.6 - react-textarea-autosize
2.1.6
Backend
- Node JS - Un environnement d'exécution pour aider à créer des applications de serveur rapides à l'aide de JS
- Express JS -Le serveur pour la gestion et le routage des demandes HTTP
- Mongoose - Pour la modélisation et la cartographie des données MongoDB à JavaScript
- Express-async-Handler - Middleware simple pour gérer les exceptions à l'intérieur des itinéraires Async Express et les transmettre à vos gestionnaires d'erreur express
- JSONWEBToken - pour l'authentification
- bcryptjs - pour le cryptage des données
- Dotenv - module de dépendance zéro qui charge les variables d'environnement
- MULTER - Node.js Middleware pour le téléchargement de fichiers
- CORS - Fournit un middleware Connect / Express
- UUID - pour le générateur d'identification aléatoire
Base de données
- MongoDB - Il fournit un service cloud gratuit pour stocker les collections MongoDB.
Maquette
Auteur
Github: @ muhammet-yildiz
LinkedIn: @ Muhammet-Yildiz
Courriel: [email protected]
Si vous aimez le projet, n'oubliez pas de donner l'étoile
Licence
Copyright 2023 Muhammet Yıldız
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Vidéo de projet
Hizlisepet.mp4
