next tailwind amazona

Construya el sitio web de comercio electrónico de NextJS como Amazon

• Tech: NextJS 13, Next Auth 4
• UI: Tailwind, Chart.js, React Chartjs
• DB: MongoDB, Mongoose
• Pago: PayPal, Stripe
• Alojamiento de contenido: Cloudinary
• Despliegue: Github, Vercel, MongoDB Atlas

Recursos

• Video de YouTube: https://youtu.be/_ibblyr5mrza
• Sitio web de demostración: https://nexttailwind-amazona.vercel.app
• Código fuente: https://github.com/basir/next-tailwind-amazona
• Curso completo: basir.thinkific.com

Lo que aprenderás

• Casics básicos de NextJS, como configurar el proyecto, navegar entre páginas y obtener datos.
• Temas avanzados de NextJS como enrutamiento dinámico, optimización de imágenes, SSG y SSR
• Marco CSS de Tailwind para crear un sitio web receptivo utilizando tema personalizado, animación y carrusel
• Reactjs, incluidos componentes de descomposición, API de contexto y ganchos
• Siguiente paquete de autenticación para autenticar a los clientes y usuarios administrativos
• MongoDB y Mongoose para guardar y recuperar datos como productos, pedidos y usuarios
• API de desarrollador de PayPal para realizar el pago en línea
• Implementar aplicaciones web en servidores como Vercel y Netlify

Curso completo

Obtenga este curso con un 90% de descuento en Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90

Ejecutar localmente

1. Repositorio

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

2. Crear archivo .env

   • duplicado .env.example y cambie el nombre a .env

3. Configurar MongoDB

   • MongoDB local
   • Instálelo desde aquí
   • En .env Actualización del archivo MongoDB_URI = MongoDB: // Localhost/Amazona
   • O Atlas Cloud MongoDB
   • Crear base de datos en https://cloud.mongodb.com
   • En .env File Update MongoDB_URI = MongoDB+Srv: // Your-DB-Connection

4. Instalar y ejecutar

     npm install
     npm run dev

5. Datos de semillas

   • Ejecute esto en el navegador: http: // localhost: 5000/api/semilla
   • Devuelve el correo electrónico y la contraseña de administración y 6 productos de muestra

6. Inicio de sesión de administrador

   • Ejecutar http: // localhost: 3000/inicio de sesión
   • Ingrese el correo electrónico y la contraseña de administración y haga clic en Iniciar sesión

Lecciones

1. Introducción
2. Instalación de herramientas
3. Crear la siguiente aplicación
4. Publicar en Github
5. Crear diseño del sitio web
   1. Crear componente de diseño
   2. Agregar encabezado
   3. Agregar sección principal
   4. Agregar pie de página
   5. Agregar clases de viento de cola
6. Listar productos
   1. Agregar data.js
   2. Agregar imágenes
   3. representar productos
7. Crear detalles del producto
   1. Crear página de productos
   2. crear 3 columnas
   3. Mostrar imagen en la primera columna
   4. Mostrar información del producto en la segunda columna
   5. Mostrar agregar a la acción del carrito en la tercera columna
   6. Agregar estilos
8. Manejar agregar al carrito
   1. Definir el contexto React
   2. Definir el estado de los artículos del carrito
   3. Crea ADDD a la acción del carrito
   4. Agregar reductor
   5. Crear proveedor de tiendas
   6. Manejar agregar al botón del carrito
9. Crear página del carrito
   1. Crea Cart.js
   2. Use el contexto para obtener artículos de carrito
   3. Lista de artículos en los artículos del carrito
   4. redirigir a la pantalla del carrito después de agregar al carrito
10. Actualizar la cantidad en el carrito
    1. Agregue el cuadro Seleccionar para la cantidad
    2. Cambio de cuadro de selección de mango
11. Guardar los artículos del carrito
    1. instalar el paquete JS-Cookie
    2. Guardar y retirar artículos de carrito en cookies
12. Crear formulario de inicio de sesión
    1. Instalar formulario de gancho react
    2. Crear cuadros de entrada
    3. Agregar botón de inicio de sesión
13. Conectarse a MongoDB
    1. Instalar Mongoose
    2. Instale MongoDB o use Atlas MongoDB
    3. Guardar URL de conexión en el archivo .env
    4. Crear archivo DB utils
    5. Crear usuarios de muestra
14. Crear API de inicio de sesión
    1. Instalar el próximo autocontrol
    2. crear nextAuth.js
    3. implementar firmar
    4. Use firmar en el formulario de inicio de sesión
15. Agregar menú de usuario
    1. Verifique la autenticación del usuario
    2. Instale la cabeza sin cabeza
    3. Mostrar menú de usuario
16. Crear pantalla de envío
    1. Campos de dirección de visualización
    2. Guardar dirección en contexto
17. Crear pantalla de método de pago
    1. Métodos de pago de dispaltación
    2. Ahorre el método de pago en contexto
18. Productos de muestra de semillas
    1. Crear modelo de producto en Mongoose
    2. Insertar productos de muestra en MongoDB
19. Cargar productos MongoDB
    1. Cargar productos en la página de inicio de MongoDB
    2. Cargar productos en la página de productos de MongoDB
    3. Use la API del producto para verificar el recuento en stock en agregar al carrito
20. Crear pantalla de pedido de lugar
    1. Mostrar dirección de envío
    2. Método de pago de visualización
    3. Mostrar elementos de orden
    4. Implemento Crear orden
21. Crear pantalla de pedido
    1. Implementar la API de backend para los detalles del pedido
    2. Cargar datos de orden del backend
    3. Mostrar detalles del orden
22. Crear pantalla de registro
    1. Agregar API de registro
    2. Crear página de registro
    3. Llame a la API en el formulario Enviar
23. Orden de pago por PayPal
    1. Agregar botón PayPal
    2. manejar el pago
    3. Crear API de backend
    4. Actualizar el estado del pedido
24. Crear pantalla de historial de pedidos
    1. Crea API de mi pedido
    2. Crear componente de historial de pedidos
    3. Obtener pedidos y mostrarlos
25. Publicar en Vercel
    1. Crear cuenta de Vercel
    2. conectarse a Github
    3. Establezca siguiente auth y mongodb db en env vars
    4. Empuje el código a GitHub
26. Actualizar perfil de usuario
    1. Crear pantalla de perfil
    2. Mostrar información del usuario
    3. Manejo de actualización de información del usuario
27. Crear panel de administración
    1. Crear menú de administración
    2. Crear pantalla del tablero
    3. Implementar la API de resumen de administrador
28. Lista de pedidos para administrador
    1. Página Crear pedidos
    2. Crear API de pedidos
    3. Use API en la página
29. Entregar el pedido para administrador
    1. Crear API de entrega
    2. Agregar botón de entrega
    3. Implementar el controlador de clics
30. Lista de productos para administrador
    1. Crear página de productos
    2. Crear API de productos
    3. Use API en la página
31. Crear página de edición de productos
    1. Crear página de edición
    2. crear API para el producto
    3. Mostrar datos del producto en forma
32. Subir la imagen del producto
    1. Crear cuenta nube
    2. Obtener claves en la nube
    3. Crear API de carga
    4. Cargar archivos en la página Editar
33. Crear y eliminar productos
    1. Agregar botón Crear producto
    2. construir una nueva API de productos
    3. Agregar controlador para eliminar
    4. Implementar la API de eliminación
34. Lista de usuarios para admin
    1. Crear página de usuarios
    2. Crear API de usuarios
    3. Use API en la página
35. Agregar carrusel
    1. Crear productos destacados
    2. alimentar datos de carrusel
    3. Mostrar productos populares
36. Crear página de búsqueda
    1. Crear filtros
    2. listar productos
    3. Mostrar filtros