Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Desarrolla un Ecommerce con Laravel y Vite + React
Rating: 3.0 out of 5(2 ratings)
14 students

Desarrolla un Ecommerce con Laravel y Vite + React

Construye un E-commerce Moderno con Laravel, React y Vite desde Cero
Created byReynaldo devR
Last updated 9/2025
Spanish

What you'll learn

  • Desarrollo Backend con Laravel
  • Frontend con React y Vite
  • Base de Datos con MariaDB/MySQL
  • Integración Backend-Frontend

Explore related topics

Course content

1 section • 27 lectures • 8h 23m total length

  • Instalar Laragon y Crear Proyecto con Laravel 116:32

    Enlace de Laragon (Actualmente Laragón ya es de paga):: https://laragon.org/download/ Pero les comparto el instalador de Laragon V6.0.0 (gratis) que se está utilizando el video:: https://reytech.notion.site/Recursos-27963467be3c80e49a9cf04f304be55f?pvs=73

  • Crear la Base de Datos y sus tablas | Models y Migrations15:13
  • Crear Relaciones Entre las Tablas, Crear Tablas Pivot19:33
  • Crear el Login del Administrador24:11

    Comando para correr el seeder:: php artisan db:seed

    Comando para crear el AdminController:: php artisan make:controller \Admin\AdminController

    Comando para crear el AdminMiddleware:: php artisan make:middleware AdminMiddleware

    Comando para crear el AuthAdminRequest:: php artisan make:request AuthAdminRequest

  • Crear el Dashboard y la Función de Cerrar Sesión17:54
  • CRUD - Administrar Colores de los Productos | Sweet Alert27:13

    COMANDOS::

    Controlador ColorController::

    php artisan make:controller \Admin\ColorController --model=Color

    Ver las rutas::

    php artisan route:list

    Request AddColorRequest::

    php artisan make:request AddColorRequest

    Request UpdateColorRequest::

    php artisan make:request UpdateColorRequest

  • CRUD Administrar los Tamaños de los Productos | Sweet Alert12:48

    Comandos::

    Controlador asociado a un modelo de tamaño::

    php artisan make:controller \Admin\SizeController --model=Size

    Solicitud de validación para añadir tamaños::

    php artisan make:request AddSizeRequest

    Solicitud de validación para actualizar tamaños::

    php artisan make:request UpdateSizeRequest


  • CRUD Administrar los Cupones de Descuento18:40

    Comandos

    Crear el controlador asociado a un modelo de cupón::

    php artisan make:controller \Admin\CouponController --model=Coupon

    Solicitud de validación para añadir cupones::

    php artisan make:request AddCouponRequest

    Solicitud de validación para actualizar cupones::

    php artisan make:request UpdateCouponRequest





  • CRUD Administrar los Productos Part. 130:10

    Comandos:

    Controlador asociado al modelo Product::

    php artisan make:controller \Admin\ProductController --model=Product

    Solicitud de validación para añadir productos ::

    php artisan make:request AddProductRequest

    Solicitud de validación para actualización::

    php artisan make:request UpdateProductRequest


  • CRUD Administrar los Productos Part. 224:07

    Comandos::

    Almacenar archivos públicos::

    php artisan storage:link

  • Crear mi primera API, Rutas y Controlador8:10

    Comandos:

    Crear el controlador ProductController::

    php artisan make:controller \Api\ProductController


    Crear el resource ProductResource::

    php artisan make:resource ProductResource


    Instalar la API::

    php artisan install:api

  • Crear el Frontend con Vite y React - Mostrar los datos de los productos17:06

    Comandos::

    Crear el proyecto de Frontend::

    npm create vite@latest


    Paquetes::

    npm install bootstrap bootstrap-icons react-router-dom axios react-toastify


    Correr el servidor de Laravel

    php artisan serve


    eliminar public/storage::

    rm public/storage


    crear public/storage::

    php artisan storage:link

  • Mostrar los Productos en el Frontend18:19
  • Filtrar Productos por Color, Tamaño y Búsqueda en el Frontend18:56

    Comandos::

    Retardador de cambios::

    npm i use-debounce

    Enlace del comado::

    https://www.npmjs.com/package/use-debounce

  • Crear Notificación Alert, Spinner y Botón "Cargar Más"10:08

    Comandos

    Spinner::

    npm install react-loader-spinner --save

    Fuente:: https://www.npmjs.com/package/react-loader-spinner

  • Detalles del Producto17:31

    Comandos

    Paquete convertir HMTL a React::

    npm i html-to-react

    Fuente: https://www.npmjs.com/package/html-to-react


    Paquete galería de imagenes::

    npm i react-image-gallery

    Fuente: https://www.npmjs.com/package/react-image-gallery

  • Agregar Productos al Carrito de Compras26:35
  • Mostrar los Productos del Carrito de Compras18:35
  • Componente de Pago12:23
  • Crear el Registro y Login para los Usuario23:59

    Comando para crear el controlador::

    php artisan make:controller \Api\UserController


    Comando para crear el Request::

    php artisan make:request StoreUserRequest


    php artisan make:request AuthUserRequest


    Comando para crear el Resource::

    php artisan make:resource UserResource

  • Mostrar las Reglas de Validación en el Registro y el Login22:20
  • Crear el Componente del Cupón de Descuento19:52
  • Mostrar Datos del Usuario25:35
  • Actualizar Datos del Usuario11:36
  • Pasarela de Pago - Tarjeta - Tripe y Guardar los Pedidos25:47

    Comando para crear el controlador OrderController::

    php artisan make:controller \Api\OrderController


    Comando para instalar la librerías de stripe en el Backend::

    composer require stripe/stripe-php


    Plataforma de Stripe::

    https://dashboard.stripe.com/login


    Comando para instalar la librerías de stripe en el Frontend::

    npm install --save @stripe/react-stripe-js @stripe/stripe-js


    Repositorio::

    https://github.com/reytechcode/recursos-laravel-react-ecommerce

  • Gestión los Pedidos en el Backend17:32

    Comandos

    Comando para crear el Controlador Order::

    php artisan make:controller \Admin\OrderController


    Comando para crear el Recurso Order::

    php artisan make:resource OrderResource


    Comando para crear la migración::

    php artisan make:migration add_color_and_size_to_orders_table


    Comando para correr la migración::

    php artisan migrate

  • Frontend - Los Pedidos del Cliente12:22

Requirements

  • Laravel básico

Description

En este curso práctico y exhaustivo, aprenderás a desarrollar un e-commerce completo utilizando las tecnologías más modernas y populares en el mundo del desarrollo web. El proyecto se estructurará utilizando Laravel como backend, React como frontend, y Vite como herramienta de build para React. La base de datos será gestionada con MariaDB/MySQL , proporcionando una solución robusta y escalable.


Objetivos del Curso:

  1. Dominar Laravel : Aprenderás a trabajar con Laravel, uno de los frameworks PHP más populares, para construir APIs RESTful y manejar la lógica del backend.

  2. Desarrollar con React : Dominarás React, la biblioteca JavaScript más utilizada para crear interfaces de usuario interactivas y dinámicas.

  3. Integrar Laravel y React : Aprenderás cómo integrar ambas tecnologías para crear una aplicación completa, donde Laravel actúa como backend y React como frontend.

  4. Utilizar Vite : Aprovecharás Vite, la herramienta oficial de build de React, para mejorar la velocidad de desarrollo y optimizar el rendimiento del frontend.

  5. Gestionar la Base de Datos : Implementarás MariaDB/MySQL para almacenar y gestionar datos de productos, usuarios, carritos, pedidos, etc.

  6. Crear una Experiencia de Usuario Única : Diseñarás y desarrollarás una interfaz de usuario moderna y responsive que permita a los usuarios navegar fácilmente por el sitio, buscar productos, filtrar por categorías, tamaños y colores, y realizar compras.


Who this course is for:

  • Todos

Report abuse