Inicio>Relacionado con la programación>Otro código fuente
Descargar

Sitio web de comercio electrónico de Amazona

amazona

Tutorial de React & Node: comercio electrónico completo en 9 horas [2021]

Bienvenido a mi tutorial de React and Node para crear un sitio web de comercio electrónico completamente funcional exactamente como Amazon. Abra su editor de código y sígame durante las próximas horas para crear un sitio web de comercio electrónico utilizando la pila MERN (MongoDB, ExpressJS, React y Node.JS).

Sitio web de demostración

  • Heroku: https://react-amazona.herokuapp.com

  • Espejo Heroku: https://react-amazona-mirror.herokuapp.com

aprenderás

  • HTML5 y CSS3: elementos semánticos, CSS Grid, Flexbox

  • Reaccionar: componentes, accesorios, eventos, ganchos, enrutador, Axios

  • Redux: Tienda, Reductores, Acciones

  • Nodo y Express: API web, analizador corporal, carga de archivos, JWT

  • MongoDB: mangosta, agregación

  • Desarrollo: ESLint, Babel, Git, Github,

  • Despliegue: Heroku

  • Vea el tutorial de React y Node

Ejecutar localmente

1. Clonar repositorio 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. Configurar MongoDB

  • Mongo DB local

    • Instálalo desde aquí

    • Crear archivo .env en la carpeta raíz

    • Establecer MONGODB_URL=mongodb://localhost/amazona

  • Atlas Nube MongoDB

    • Cree una base de datos en https://cloud.mongodb.com

    • Crear archivo .env en la carpeta raíz

    • Establezca MONGODB_URL=mongodb+srv://su-conexión-db

3. Ejecutar el servidor 

$ npm install
$ npm start

4. Ejecute la interfaz 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. Usuarios y productos de semillas

  • Ejecute esto en Chrome: http://localhost:5000/api/users/seed

  • Devuelve el correo electrónico y la contraseña del administrador.

  • Ejecute esto en Chrome: http://localhost:5000/api/products/seed

  • Crea 6 productos de muestra.

6. Inicio de sesión de administrador

  • Ejecute http://localhost:3000/signin

  • Ingrese el correo electrónico y la contraseña del administrador y haga clic en iniciar sesión

Apoyo

  • Preguntas y respuestas: https://webacademy.pro/amazona

  • Contactar al instructor: Basir

Lecciones

  1. Introducción a este curso.

    1. lo que construirás

    2. lo que aprenderás

    3. quiénes son las audiencias

  2. Instalar herramientas

    1. Editor de código

    2. Navegador web

    3. Extensión de código VS

  3. Plantilla de sitio web

    1. crear carpeta amazona

    2. crear carpeta de plantilla

    3. crear index.html

    4. agregar código HTML predeterminado

    5. enlace a estilo.css

    6. crear encabezado, principal y pie de página

    7. elementos de estilo

  4. Mostrar productos

    1. crear productos div

    2. agregar atributos de producto

    3. agregar enlace, imagen, nombre y precio

  5. Crear aplicación de reacción

    1. Interfaz de aplicación npx create-react-app

    2. inicio de npm

    3. Eliminar archivos no utilizados

    4. copiar el contenido index.html a App.js

    5. copiar el contenido de style.css a index.css

    6. reemplazar clase con nombre de clase

  6. Compartir código en Github

    1. Inicializar el repositorio de git

    2. Confirmar cambios

    3. Crear cuenta de github

    4. Crear repositorio en github

    5. conectar el repositorio local al repositorio de github

    6. enviar cambios a github

  7. Crear calificación y componente de producto

    1. crear componentes/Rating.js

    2. crear clasificación div

    3. estilo div.rating, intervalo y último intervalo

    4. Crear componente de producto

    5. Usar componente de calificación

  8. Pantalla de creación de producto

    1. Instalar reaccionar-enrutador-dom

    2. Utilice BrowserRouter y Route para la pantalla de inicio

    3. Crear HomeScreen.js

    4. Agregue el código de lista de productos allí

    5. Crear ProductScreen.js

    6. Agregue una nueva ruta desde los detalles del producto a App.js

    7. Cree 3 columnas para imagen, información y acción del producto.

  9. Crear servidor Node.JS

    1. ejecute npm init en la carpeta raíz

    2. Actualizar paquete.json tipo de conjunto: módulo

    3. Agregar .js a las importaciones

    4. instalación npm expresa

    5. crear servidor.js

    6. agregar el comando de inicio como nodo backend/server.js

    7. requerir expreso

    8. Crear ruta para / regresar el backend está listo.

    9. mover productos.js del frontend al backend

    10. crear ruta para /api/products

    11. devolver productos

    12. ejecutar inicio npm

  10. Cargar productos desde el backend

    1. editar HomeScreen.js

    2. definir productos, carga y error.

    3. crear efecto de uso

    4. define fetchData asíncrono y llámalo

    5. instalar axio

    6. obtener datos de /api/products

    7. mostrarlos en la lista

    8. crear componente de carga

    9. crear componente de cuadro de mensaje

    10. usarlos en la pantalla de inicio

  11. Instale ESlint para código Linting

    1. instalar la extensión VSCode eslint

    2. instalación npm -D eslint

    3. ejecute ./node_modules/.bin/eslint --init

    4. Crear ./frontend/.env

    5. Agregar SKIP_PREFLIGHT_CHECK=true

  12. Agregar Redux a la pantalla de inicio

    1. npm instala redux reacciona-redux

    2. Crear tienda.js

    3. estadoinit= {productos:[]}

    4. reductor = (estado, acción) => cambiar LOAD_PRODUCTS: {productos: acción.payload}

    5. exportar createStore predeterminado (reductor, initState)

    6. Editar pantalla de inicio.js

    7. shopName = useSelector(estado=>estado.productos)

    8. despacho constante = useDispatch()

    9. useEffect(()=>dispatch({tipo: LOAD_PRODUCTS, carga útil: datos})

    10. Agregar tienda a index.js

  13. Agregar Redux a la pantalla del producto

    1. crear detalles del producto constantes, acciones y reductores

    2. agregar reductor a store.js

    3. usar acción en ProductScreen.js

    4. agregue /api/product/:id a la API de backend

  14. Manija del botón Agregar al carrito

    1. Manejar Agregar al carrito en ProductScreen.js

    2. crear CartScreen.js

  15. Implementar la acción Agregar al carrito

    1. crear constantes, acciones y reductores addToCart

    2. agregar reductor a store.js

    3. usar acción en CartScreen.js

    4. renderizar cartItems.length

  16. Pantalla de construcción de carrito

    1. cree 2 columnas para los artículos del carrito y la acción del carrito

    2. cartItems.length === 0? el carrito está vacío

    3. mostrar imagen del artículo, nombre, cantidad y precio

    4. Botón Continuar con el pago

    5. Implementar la acción de eliminar del carrito

  17. Implementar la acción Quitar del carrito

    1. crear constantes, acciones y reductores removeFromCart

    2. agregar reductor a store.js

    3. usar acción en CartScreen.js

  18. Crear usuarios de muestra en MongoDB

    1. npm instala mangosta

    2. conectarse a mongodb

    3. crear config.js

    4. npm instala dotenv

    5. exportar MONGODB_URL

    6. crear modelos/userModel.js

    7. crear esquema de usuario y modelo de usuario

    8. crear ruta de usuario

    9. Datos de muestra de semillas

  19. Crear productos de muestra en MongoDB

    1. crear modelos/productModel.js

    2. crear productSchema y productModel

    3. crear productoRuta

    4. Datos de muestra de semillas

  20. Crear backend de inicio de sesión

    1. crear/iniciar sesión api

    2. comprobar correo electrónico y contraseña

    3. generar token

    4. instalar el token web json

    5. instalar dotenv

    6. devolver token y datos

    7. pruébalo usando cartero

  21. Pantalla de inicio de sesión de diseño

    1. crear pantalla de inicio de sesión

    2. renderizar campos de correo electrónico y contraseña

    3. crear constantes de inicio de sesión, acciones y reductores

    4. Actualizar encabezado según el inicio de sesión del usuario

  22. Implementar la acción de inicio de sesión

    1. crear constantes de inicio de sesión, acciones y reductores

    2. agregar reductor a store.js

    3. usar acción en SigninScreen.js

  23. Crear pantalla de registro

    1. crear API para /api/users/register

    2. insertar nuevo usuario a la base de datos

    3. devolver información de usuario y token

    4. crear pantalla de registro

    5. Agregar campos

    6. Campos de estilo

    7. Agregar pantalla a App.js

    8. crear acción de registro y reductor

    9. comprobar la validación y crear usuario

  24. Crear pantalla de envío

    1. crear el componente CheckoutSteps.js

    2. crear campos de envío

    3. implementar constantes de envío, acciones y reductores

  25. Crear pantalla de pago

    1. crear campos de pago

    2. implementar constantes de envío, acciones y reductores

  26. Pantalla Realizar pedido de diseño

    1. campos de resumen de orden de diseño

    2. acción de orden de diseño

  27. Crear API para realizar pedidos

    1. API de creación de pedidos

    2. crear modelo de pedido

    3. crear ordenEnrutador

    4. crear ruta de pedido posterior

  28. Implementar la acción Realizar pedido

    1. manejar hacer clic en el botón realizar pedido

    2. crear constantes de orden de lugar, acción y reductor

  29. Crear pantalla de pedido

    1. compilar API de pedidos para /api/orders/:id

    2. crear OrderScreen.js

    3. acción de detalles del pedido de envío en useEffect

    4. cargar datos con useSelector

    5. mostrar datos como la pantalla de realizar pedido

    6. crear detalles de orden constante, acción y reductor

  30. Agregar botón de PayPal

    1. obtener identificación de cliente de paypal

    2. configúrelo en el archivo .env

    3. crear formulario de ruta /api/paypal/clientId

    4. crear getPaypalClientID en api.js

    5. agregar script de pago de PayPal en OrderScreen.js

    6. mostrar el botón de paypal

  31. Implementar pago de orden

    1. actualizar el pedido después del pago

    2. crear orden de pago en api.js

    3. crear ruta para /:id/pay en orderRouter.js

    4. volver a presentar después de la orden de pago

  32. Mostrar historial de pedidos

    1. crear API de pedidos de clientes

    2. crear API para getMyOrders

    3. mostrar pedidos en la pantalla de perfil

    4. órdenes de estilo

  33. Mostrar perfil de usuario

    1. crear API de detalles de usuario

    2. mostrar información del usuario

  34. Actualizar perfil de usuario

    1. crear api de actualización de usuario

    2. actualizar información de usuario

  35. Crear vista de administrador

    1. Crear menú de administración

    2. Crear middleware de administración en el backend

    3. Crear ruta de administrador en el frontend

  36. Listar productos

    1. Pantalla Crear lista de productos

    2. Agregar reductor a la tienda

    3. mostrar productos en la pantalla

  37. Crear producto

    1. construir crear API de producto

    2. construir el botón Crear producto

    3. definir producto crear constante, acción y reductor

    4. usar acción en la pantalla de lista de productos

  38. Crear pantalla de edición de producto

    1. crear pantalla de edición

    2. definir estado

    3. crear campos

    4. cargar detalles del producto

    5. agregar a rutas

  39. Actualizar producto

    1. definir API de actualización

    2. definir la constante de actualización del producto, la acción y el reductor

    3. usar acción en la pantalla de edición de producto

  40. Subir imagen del producto

    1. npm instala multer

    2. definir el enrutador de carga

    3. crear carpeta de cargas

    4. Manejar la interfaz

  41. Eliminar producto

    1. crear eliminar api en el backend

    2. crear eliminar constantes, acción y reductor

    3. Úselo en la pantalla de lista de productos

  42. Listar pedidos

    1. crear API de lista de pedidos

    2. crear pantalla de lista de pedidos

    3. Agregar reductor a la tienda

    4. mostrar productos en la pantalla

  43. Eliminar pedido 2. crear acción de eliminación de pedido y reductor 3. agregar acción de eliminación de pedido a la lista de pedidos

  44. Entregar pedido

    1. crear acciones constantes y reductores para entregar el pedido

    2. agregar acción de entrega de pedido a la pantalla de detalles del pedido

  45. Publicar en Heroku

    1. Crear repositorio git

    2. Crear cuenta heroku

    3. instalar Heroku CLI

    4. inicio de sesión heroku

    5. aplicaciones heroku: crear amazona

    6. Edite package.json para compilar el script

    7. Crear archivo de perfil

    8. Crear base de datos de atlas mongodb

    9. Establecer la conexión de la base de datos en las variables env de heroku

    10. Comprométete y empuja

  46. Listar usuarios

    1. construir API para usuarios de la lista

    2. Crear pantalla de lista de usuarios

    3. crear detalles de orden constante, acción y reductor

  47. Eliminar usuarios

    1. construir API para eliminar usuarios

    2. crear detalles de orden constante, acción y reductor

    3. Usar acción en UserListScreen

  48. Editar usuario

    1. construir API para usuarios de actualización

    2. crear interfaz de usuario de pantalla de edición

  49. Implementar vista de vendedor

    1. agregar menú del vendedor

    2. crear ruta de vendedor

    3. listar productos para el vendedor

    4. listar pedidos para el vendedor

    5. agregar vendedor a la lista de productos y a la pantalla de detalles

  50. Crear página de vendedor

    1. crear página de vendedor

    2. actualizar el componente del producto y la pantalla del producto

    3. actualizar rutas de productos

  51. Añadir carrusel de mejores vendedores

    1. instalar carrusel de reacción

    2. implementar acciones y reductores para los más vendidos

    3. use el carrusel de reacción con datos en la pantalla de inicio

  52. Forzar pedidos de artículos de un vendedor

    1. actualizar la acción addToCart para comprarle a un vendedor en un pedido

  53. Crear cuadro de búsqueda y pantalla de búsqueda

    1. crear barra de búsqueda en Header.js

    2. agregar estilo

    3. manejar el formulario de envío

    4. editar la URL de análisis para obtener la cadena de consulta

    5. actualizar la API de la lista de productos para buscar por nombre

  54. Agregar filtro de búsqueda avanzada 1. filtrar por categoría 2. filtrar por rango de precios 3. filtrar por calificación promedio

  55. Completa búsqueda avanzada 1. filtrar por precio 2. filtrar por calificación 3. ordenar por precio, calificación, ...

  56. Calificar y revisar productos 1. calificar productos 2. crear acciones y reductores

  57. Elija la dirección en Google Map 1. cree las credenciales del mapa de Google 2. actualice el archivo .env con la clave de API de Google 3. cree una API para enviar la API de Google a la interfaz 4. cree una pantalla de mapa 5. busque la API de Google 6. getUserLocation 7. instale @react- google-maps/api 8. úselo en la pantalla de envío 9. aplique el mapa a la pantalla de pago

  58. Corrección de errores: ejecución local sin problemas

    1. agregar información del vendedor a data.js

    2. datos del producto inicial con información de administrador como vendedor

    3. arreglar isSeller e isAdmin al actualizar usuario

    4. eliminar la autenticación de los detalles del usuario

  59. Implementar paginación

    1. agregar paginación al enrutador del producto en el backend

    2. aplicar el número de página a las acciones y reductores en la interfaz

    3. mostrar números de página en la pantalla de búsqueda

  60. Recibo del pedido por correo electrónico mediante mailgun 1. cree una cuenta de mailgun 2. agregue y verifique su dominio en mailgun 3. instale mailgun-js 4. establezca la clave api en el archivo env 5. cambie la orden de pago en orderRouter 6. envíe el correo electrónico

  61. Crear pantalla de panel

    1. Crear datos de gráficos en el backend

    2. Pantalla de creación de gráficos

  62. Implementar chat en vivo con clientes

    1. use socket io para crear backend

    2. crear componente de cuadro de chat

    3. crear pantalla de soporte

  63. Actualice a React 17, Router 6, Mongoose 6

    1. backend

    2. Desinstalar e instalar todos los paquetes.

    3. eliminar opciones en mongoose connect

    4. envolver mailgun en try catch en ordenRouter

    5. Interfaz

    6. Desinstalar e instalar todos los paquetes.

    7. eliminar en el cuadro de búsqueda

    8. envolver todo en

    9. reemplazar con <elemento de ruta={}>

    10. reemplazar con <elemento de ruta={ }/>

    11. reemplazar y también

    12. Actualizar PrivateRoute, AdminRoute y SellerRoute

    13. reemplace push() con navegar() de useNavigate

    14. reemplace props.match.params.id con const params = useParams();

    15. reemplace props.location.search con const {buscar} = useLocation(); y URLSearchParams

    16. reemplace props.match.path con const {pathname} = useLocation();

    17. poner userInfo en useEffect en ChatBox, SupportScreen

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo