HizliSepet

Full Stack Open Source Mobile E-Commerce-Anwendung mit MongoDB, Express, React Native und NodeJS

• Konfiguration und Setup
• Schlüsselmerkmale
• Technologien verwendet
  • Frontend (Mobile)
  • Backend
  • Datenbank
• ? Modell
• ? Projektvideo
• Autor
• Lizenz

Konfiguration und Setup

Um dieses Projekt lokal auszuführen, geben Sie einfach das Repository auf und klonen Sie sie als Zip und Entpeak auf Ihrem Computer.

• Öffnen Sie das Projekt in Ihrem bevorzugten Code -Editor.
• Gehen Sie zum Terminal -> Neues Terminal (wenn Sie VS -Code verwenden)
• Zuerst müssen Sie den NGROK -Server ausführen. Dieser Server sollte nicht für die Projektarbeit geschlossen werden
• Dann ein anderes Terminal öffnen. Teilen Sie Ihr Terminal in zwei Hälften (führen Sie den Server in einem Terminal und Client in der anderen).

NGROK ist eine Software, mit der wir unsere Anwendungen öffnen können, die wir auf Localhost auf unserem eigenen Computer über der Cloud unter der Subdomäne von XXX.NGROK.IO ausführen. Ngrok Setup.

1- Um den Server mit NGROK freizulegen;

 $ ngrok http 5000

• Kopieren Sie dann die NGROK -URL auf dem ausführenden Server
• CD -Client und Einfügen von ngrok_url in .env unter ./client
• Jetzt ist die Verbindung mit dem Kunden sichergestellt

 NGROK_URL  = "http://_______.ngrok.io"

2- in einem anderen Terminal;

In der ersten Hälfte des Terminals

 $ cd Client
$ npm install (to install client-side dependencies)
$ expo r -c

In der zweiten Hälfte des Terminals

• CD -Server- und Set -Umgebungsvariablen in config.env unter ./config/env
• Erstellen Sie Ihre MongoDB -Verbindungs ​​-URL, die Sie als mongo_uri verwenden werden
• Liefern Sie die folgenden Anmeldeinformationen

 #  ---  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)

Schlüsselmerkmale

• ✔️ Benutzerregistrierung und Anmeldung
• ✔️ Authentifizierung mit JWT -Token
• ✔️ Favorit, Kommentar und fügen Sie Produkte in den Warenkorb hinzu
• ✔️ Wählen Sie Produkte nach Farb- und Größeninformationen aus und fügen Sie sie dem Wagen hinzu
• ✔️ Zeigen Sie die neuesten Produkte, die Sie sich angesehen haben, und ähnliche Produktempfehlungen
• ✔️ Produktkategorien Seite und Anzeige von Unterkategorien
• ✔️ Suchen Sie nach Produkten nach Namen, Marke und Kategorie
• ✔️ Erhöhen, verringern oder löschen Sie die Menge jedes Elements im Karren
• ✔️ Empfangsbestellungen durch Auswahl der Lieferadresse und Bankkarte
• °
• ✔️ E -Mail- und Passwort ändern Seiten
• ✔️ Die Aufmerksamkeit wurde auf Fehlerbehandlungen geschenkt
• Seite Passwort vergessen und Passwort zurücksetzen
• Hinzufügen von Fotos zu Kommentaren hinzufügen
• Melden Sie sich mit Google -Konto an
• Erstellen einer benutzerdefinierten Seite für jede Marke
• Zugabe von Zahlungssystem (Streifen)
• Anfragen werden manchmal langsam verarbeitet und verursachen Probleme, wenn sie gleichzeitig abgefeuert werden (könnte die Microservice -Architektur die Lösung sein?)

Technologien verwendet

Dieses Projekt wurde mit den folgenden Technologien erstellt.

Frontend (Mobile)

• React JS - JavaScript -Bibliothek, die zum Erstellen von Benutzeroberflächen speziell für einseitige Anwendungen verwendet wird
• Reagieren Sie Hooks - zum Verwalten und Zentralisieren von Anwendungszustand
• React Native - ein plattformübergreifender Framework für mobile Anwendungsentwicklung
• React Navigation V6 - Routing und Navigation für Expo- und React Native Apps
• Axios - zum Tätigen von API -Anrufen
• React-native-Bouncy-Checkbox 7.2.1
• React-Native-Element-Textinput 2.2.0
• React-Native-Reter-Bottom-Blatt 1.1.0
• React-nativ-Indikatoren 0.17.0
• React-Native-Modal 13.0.1
• React-nativ-popup-menu 0.16.1
• React-Native-Progress 5.0.0
• React-Native-Ratings 8.1.0
• React-native-safe-Gebietskontext 4.4.1
• React-nativ-sifple-dialogs 1.5.0
• React-Native-Step-Indicator 1.0.3
• React-Native-Journal-Message 2.1.6
• react-textarea-autoze 2.1.6

Backend

• Knoten JS - Eine Laufzeitumgebung, mit der schnelle Serveranwendungen mit JS erstellt werden können
• Express JS -Der Server zum Umgang und Routing von HTTP -Anforderungen
• Mongoose - zum Modellieren und Zuordnen von MongoDB -Daten an JavaScript
• Express-async-Handler-Einfache Middleware zum Umgang mit Ausnahmen innerhalb von Async Express-Routen und übertragen Sie sie an Ihre Express-Fehlerhandler
• JSONWEBTOKE - zur Authentifizierung
• Bcryptjs - Für die Datenverschlüsselung
• DOTENV - Null -Abhängigkeitsmodul, das Umgebungsvariablen lädt
• Multer - node.js Middleware zum Hochladen von Dateien
• CORs - Bietet eine Connect/Express Middleware
• UUID - für den zufälligen ID -Generator

Datenbank

• MONGODB - Es bietet einen kostenlosen Cloud -Service, um MongoDB -Sammlungen zu speichern.

Modell

Autor

• Github: @Muhammet-Yildiz

• LinkedIn: @Muhammet-Yildiz

• E -Mail: [email protected]

• Wenn Sie das Projekt mögen, vergessen Sie nicht, Stern zu geben

Lizenz

 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.

Projektvideo

Hislisepet.mp4