Curso: ReactJS y Laravel Directorio de Empresas

Desarrollo de una aplicación web FullStack 100% práctica, programa un directorio de empresas integrando Laravel para el BackEnd y React Js para el FrontEnd

  • Nivel Básico: Laravel Bootstrap PHP React Js
  • 9 Módulos | 37 Clases
  • Duración 7h 18m 37s
  • Código fuente descargable
  • Pago a través de Paypal

Temario

Lecciones por cada unidad de estudio con videos sobre el proceso de desarrollo y textos explicativos del código.

{ 1 }

Puesta en escena

1. Presentación

Presentación del Curso, temario, vista de código y demostración.

14:16

2. Base de datos

Diseño de la Base de datos además de la posibles relaciones de uno a varios para optimizar las consultas en la Base de Datos: Categorias, Empresas, Users

6:30

3. Instalación de Laravel y React JS

Pasos para la Instalación de Laravel 10 y React JS 18, integración para un funcionamiento óptimo, además de vincular Bootstrap para aplicar diseño CSS

20:08
{ 2 }

API Rest | BackEnd

4. Modelos y relaciones

Implementación de Modelos como User, Categoria y Empresa además de las relaciones de integridad referencial. Migración para obtener las tablas en MYSQL

14:12

5. Rutas y Controladores

Implementación de las Rutas protegidas y públicas para la API Rest y la creación de los Controladores vinculados a las rutas

17:11

6. Roles de Usuarios admin | client

Creación de Roles de Usuarios: admin y client con la instalación y configuración del paquete Spatie Laravel-permission para la autenticación en Laravel

5:06

7. Registro de usuarios

Implementación de la funcionalidad para permitir el Registro de usuarios controlando el rol, codificación y testing. Uso de la extensión ThunderClient

10:33

8. Login de usuarios

Método Login de usuarios en la Api Rest, acceso a los usuarios mediante la gestión de tokens con el paquete Sanctum de Laravel.

7:28

9. Logout de usuarios

Implementación del método Logout para destruir el token del usuario autenticado, y asi desconectar al usuario de la aplicación web.

6:42

10. CRUD User

Implementación de los métodos index, show y update para gestionar la tabla de user

14:33

11. CRUD Categoría

Implementación del CRUD: index, store, show, update y destroy en controlador CategoriaController para el modelo Categorías

18:12

12. CRUD Empresa

Implementación de los métodos CRUD index, store, show, update y destroy para el modelo Empresa en el EmpresaController

7:59
{ 3 }

Autenticación en React Js

13. Rutas y Layouts

Definiendo Rutas y Layouts en React JS para organizar las vistas del Rol Admin y las vistas del Rol Client; además de gestionar las rutas protegidas

17:04

14. AuthUser - Token

Implementación de las funciones para gestionar los tokens con sessionstorage en Javascript, tanto para guardar el token, el user y rol

13:43

15. Registro de usuarios

Registro de un usuario con el Rol Admin y Client en React JS

15:55

16. Login de usuarios

Login de un usuario con el Rol Admin y Client en React JS

13:20

17. Logout de usuarios

Logout de un usuario con el Rol Admin y Client en React JS

15:11
{ 4 }

Rol Admin | User

18. PanelAdmin

Implementación de un panel de administración sencilla para el usuario con el rol admin

7:25

19. UserAll mostrar usuarios

Implementación del componente para mostrar todos los usuarios con el rol client que se han registrado en el directorio de empresas

12:14

20. UserUpdate Aprobación del usuario

Implementar el componente UserUpdate para actualizar algunos datos del usuario como la aprobación del registro en la plataforma web.

14:46
{ 5 }

Rol Admin | Categoria

21. CategoriaAll mostrar categorias

Implementación del componente CategoriaAll para mostrar todas las categorías, además de los enlaces para crear, editar y eliminar una categoría

8:48

22. CategoriaStore Agregar una categoría

Implementación del componente CategoriaStore que permita agregar una nueva categoría por parte del Rol admin

11:26

23. CategoriaUpdate Actualizar Categoría

Implementación del componente CategoriaUpdate que permita actualizar algunos datos y/o imagen de Categoría

9:56

24. CategoriaDelete Borrar categoría

Implementación del componente CategoriaDelete que permita borrar una categoria de la base de datos diremp

5:47
{ 6 }

Rol Admin | Empresa

25. EmpresaAll mostrar empresas

Implementación del Componente EmpresaAll para mostrar todos los registros de la tabla empresas de la base de datos.

9:04

26. EmpresaUpdate aprobar empresa

Implementación del componente EmpresaUpdate para aprobar el registro de una empresa por parte del rol admin.

9:37
{ 7 }

Rol Client | Empresa

27. Panel Client

Panel de administración para el rol client para gestionar sus privilegios en el directorio de empresas.

4:52

28. EmpresaAll mostrar empresas

Implementación del componente EmpresaAll para mostrar todos los registros de las empresas que estén relacionadas con el usuario que tiene el rol client

8:46

29. EmpresaStore Agregar empresa

Implementación del componente EmpresaStore que permita agregar una nueva empresa al usuario con el rol client.

16:20

30. EmpresaUpdate Actualizar Empresa

Desarrollo del componente EmpresaUpdate que permita al rol client actualizar los datos de sus empresas y estos se almacenen en la BD.

14:32
{ 8 }

Páginas públicas

31. Rutas y Mockups

Definimos las rutas públicas en React JS como en la Api Rest y los diseños en mockups de las interfaces de nuestra aplicación web

10:06

32. Página Home

Diseño e implementación de la página principal que será la portada de nuestra aplicación web.

10:24

33. Componente Search

Implementación del componente Search para obtener las empresas según un texto ingresado

7:51

34. Componente Modal

Diseño e implementación de una ventana modal dinámica en React JS

14:34

35. Página Categorías

Diseño e implementación de la sección categorias donde mostraremos todas las categorías creadas por el rol admin

8:52

36. Página Categoría

Diseño e implementación de la sección Categoría para mostrar los datos de dicha categoría además de las empresas relacionadas con la categoría.

12:23
{ 9 }

Extras

38. Diseño con Bootstrap

Estamos en la etapa final donde vamos a agregar un poco de diseño a nuestro aplicación web usando el frameworks Bootstrap.

22:51

Descripción del curso

Es un curso avanzado en el cual vamos a desarrollar una aplicación web fullstack 100% práctica que permita gestionar un directorio de empresas. Con una distribución por lecciones, cada lección tiene un video y el código en detalle de la lección.

Con la adquisión del curso tiene acceso al código fuente completo del proyecto para ser descargado. Que le puede servir como guía en el desarrollo de sus propios proyectos.

No vamos a explicar fundamentos de React JS o Laravel, vamos de frente al grano.

¿Qué aprenderás?

En este curso aprenderás a desarrollar un Directorio de Empresas Administrable con el BackEnd en Laravel y el FrontEnd con React JS 

Las principales funcionalidades:

  • Integrar React JS en Laravel
  • Implementación de una API Rest para Autenticación y gestión de datos (CRUD)
  • Definir rutas publicas y privadas protegidas por un Token de autenticación
  • Uso de Layouts en React JS
  • Ventanas Modales en React JS
  • Buscador 
  • Formulario de envio de datos con imágenes
  • Peticiones http con Axios.JS

Requisitos

Requisitos tentativos para llevar el curso en mención:

  • Conocimientos en el diseño y arquitectura de Base de Datos en MySql
  • Conocimientos intermedios en el lenguaje de programación PHP
  • Conocimientos básicos en el desarrollo de aplicaciones web con Laravel
  • Conocimientos en el diseño de páginas web con HTML y CSS nivel intermedio
  • Conocimientos Intermedios en programación con el lenguaje de programación Javascript.
  • Conocimientos en el desarrollo de aplicaciones web con React JS.
  • Conocimientos en el funcionamiento de una API Rest.

FRAMEWORKS - LIBRERIAS:
- LARAVEL [10.*]
- REACT JS [18.*]
- BOOTSTRAP [5.*]


LENGUAJES:
- PHP 8.*
. MYSQL
- JAVASCRIPT
- HTML
- CSS 


HERRAMIENTAS:
- SISTEMA OPERATIVO: WINDOWS 10
- ENTORNO JAVASCRIPT : NODE.JS
- MANEJADOR DE PAQUETES PHP: COMPOSER
- SERVIDOR LOCAL: XAMPP
- NAVEGADOR WEB: GOOGLE CHROME
- EDITOR DE CÓDIGO: VISUAL STUDIO CODE

 

Código fuente

Disponible

  • Acceso al código fuente
  • Acceso a recursos gráficos
  • Formato descargable ZIP

2560

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023