HizliSepet

Aplicación de comercio electrónico móvil de código abierto de pila completa hecha con MongoDB, Express, React Native y NodeJS

• Configuración y configuración
• Características clave
• Tecnologías utilizadas
  • Frontend (móvil)
  • Backend
  • Base de datos
• ? Maquetas
• ? Video del proyecto
• Autor
• Licencia

Configuración y configuración

Para ejecutar este proyecto localmente, simplemente bifurca y clone el repositorio o descargue como zip y descomprimido en su máquina.

• Abra el proyecto en su editor de código preferido.
• Vaya al terminal -> nuevo terminal (si está utilizando el código VS)
• Primero debe ejecutar el servidor NGROK. Este servidor no debe cerrarse para el trabajo del proyecto
• Luego abra un terminal diferente. Dividiera su terminal por la mitad (ejecute servidor en un terminal y cliente en el otro)

Ngrok es un software que nos permite abrir nuestras aplicaciones que ejecutamos en Localhost en nuestra propia computadora, sobre la nube, debajo del subdominio XXX.NGROK.IO. Configuración de Ngrok.

1- para exponer el servidor usando ngrok;

 $ ngrok http 5000

• Luego copie la URL NGROK en el servidor que se ejecuta
• CD Cliente y Pegar ngrok_url en .env debajo ./client
• Ahora se garantiza la conexión con el cliente

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

2- en un terminal diferente;

En la primera mitad de la terminal

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

En la segunda mitad de la terminal

• CD Servidor y Establecer variables de entorno en config.env debajo ./config/env
• Cree su URL de conexión MongoDB, que usará como su Mongo_uri
• Suministrar las siguientes credenciales

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

Características clave

• ✔️ Registro e inicio de sesión del usuario
• ✔️ Autenticación usando tokens JWT
• ✔️ favorito, comente y agregue productos al carrito
• ✔️ Seleccione productos de acuerdo con la información de color y tamaño y agrégalos al carrito
• ✔️ que muestra los últimos productos que ha visto y recomendaciones de productos similares
• ✔️ Página de categorías de productos y visualización de subcategorías
• ✔️ Buscar productos por nombre, marca y categoría
• ✔️ Aumentar, disminuir o eliminar la cantidad de cada artículo en el carro
• ✔️ Recibir pedidos seleccionando la dirección de entrega y la tarjeta bancaria
• ✔️ Página de detalles que muestra todos los pedidos realizados y el último estado de los productos (tiempo de envío, fecha de entrega) para cada pedido
• ✔️ Páginas de cambio de correo electrónico y contraseña
• ✔️ Se prestó atención al manejo de errores
• Olvidé la página de contraseña y restablecimiento de contraseña
• Agregar fotos a los comentarios
• Iniciar sesión con la cuenta de Google
• Creación de una página personalizada para cada marca
• Adición del sistema de pago (Stripe)
• Las solicitudes a veces se procesan lentamente y causan problemas cuando se disparan al mismo tiempo (¿podría la arquitectura de microservicio ser la solución?)

Tecnologías utilizadas

Este proyecto fue creado utilizando las siguientes tecnologías.

Frontend (móvil)

• React JS - Biblioteca JavaScript que se utiliza para construir interfaces de usuario específicamente para aplicaciones de una sola página
• React Hooks: para administrar y centralizar el estado de aplicación
• React Native: un marco de desarrollo de aplicaciones móviles multiplataforma
• React Navigation V6 - Enrutamiento y navegación para aplicaciones nativas de Expo y React
• Axios - para hacer llamadas de API
• React-Native-Bouncy Checkbox 7.2.1
• react-native-element-textInput 2.2.0
• React-Native-Gesture-Bottom-hoja 1.1.0
• Indicadores react-nativos 0.17.0
• React-nativo-modal 13.0.1
• React-Native-Popup-Menu 0.16.1
• React-Native-Progress 5.0.0
• React-Native-Ratings 8.1.0
• react-nativo-safe-área-contexto 4.4.1
• React-nativo-simple-dialogs 1.5.0
• React-Native-Step-Indicator 1.0.3
• react-nativo-tostado-mensaje 2.1.6
• react-textarea-AUTOSIZE 2.1.6

Backend

• Nodo JS: un entorno de tiempo de ejecución para ayudar a construir aplicaciones de servidor rápida usando JS
• Express JS -El servidor para manejar y enrutar solicitudes HTTP
• Mongosos: para modelar y mapear datos de MongoDB a JavaScript
• Express-Async-Handler: middleware simple para manejar excepciones dentro de las rutas de Async Express y pasarlas a sus manejadores de error expreso
• JSONWebToken - para la autenticación
• BCRYPTJS - Para el cifrado de datos
• dotenv - módulo de dependencia cero que carga variables de entorno
• multer - node.js middleware para cargar archivos
• CORS: proporciona un middleware de conexión/expreso
• uuid - para generador de identificación aleatorio

Base de datos

• MongoDB: proporciona un servicio en la nube gratuito para almacenar colecciones MongoDB.

Maquetas

Autor

• Github: @Muhammet-Yildiz

• LinkedIn: @Muhammet-yildiz

• Correo electrónico: [email protected]

• Si te gusta el proyecto, no te olvides de dar a Star

Licencia

 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.

Video del proyecto

Hizlisepet.mp4