Crea un Dashboard Empresarial: Guía Paso a Paso con NextJS 14, React, Tailwind CSS, Shadcn, ClerkJS
6.9 هزار بار بازدید -
3 هفته پیش
-
¡Bienvenidos a un nuevo curso
¡Bienvenidos a un nuevo curso completo donde desarrollamos un dashboard empresarial desde cero! En este video, te guiaré a través de todo el proceso de creación de una plataforma de gestión empresarial con funciones avanzadas y un diseño totalmente responsive.
________
📢 Recursos Adicionales:
Discord para cualquier problema/error/bug: Discord: discord
⭐️ Acceso al código y actualizaciones: https://cursos.rafatarrega.com/dashbo...
Next.js: https://nextjs.org/
ShadCn: https://ui.shadcn.com/
BBDD: https://neon.tech/
Uploadthing: https://uploadthing.com/
Calendario: https://fullcalendar.io/
Despliegue: https://www.netlify.com/
________
📚 ¿Qué Aprenderás en Este Curso?
- 🌐 Next.js 14 & server actions
- 🎨 Componentes bonitos con Shadcn UI
- 🔐 Auth usando Clerk
- 🏠 Landing page con animaciones
- 📊 Admin dashboard gestionable
- 💾 PostgresDB using NeonDB
- 🚀 Deployment on Netlify
- 📱 Mobile responsive
- NextJS 14: Configuración y uso de la última versión de NextJS.
- React: Creación de componentes dinámicos y reutilizables.
- Tailwind CSS: Estilos modernos y adaptativos para tu aplicación.
- Shadcn: Uso de componentes personalizados, incluyendo modos claro y oscuro.
- Clerk: Implementación de sistemas de autenticación para login y registro.
- Gráficos y Calendario: Integración de gráficos interactivos y un calendario para reuniones.
- Gestión Empresarial: Crear, editar y gestionar empresas y contactos asociados.
- Creación de un calendario para gestionar citas.
- Despliegue en Producción: Subir el proyecto a un dominio público de manera gratuita con la plataforma de Netlify.
🛠️ Proceso Completo:
- Configuración del Proyecto: Instalación y configuración inicial de NextJS 14.
- Desarrollo del Frontend: Creación de la interfaz con NextJS y Tailwind CSS.
- Autenticación con ClerkJS: Configuración de login y registro de usuarios.
- Funcionalidades del Dashboard: Implementación de gráficos, calendario y gestión de empresas y contactos.
- Diseño Responsive: Adaptación de la web para dispositivos móviles, tablet y escritorio.
- Modo Claro y Oscuro: Integración de modos de visualización con Shadcn.
Despliegue: Publicación de la web en un dominio gratuito para acceso público.
______
📅 Temas del Video:
00:00:00 - Qué vamos a hacer en este curso
00:10:30 - Empezando proyecto
00:19:00 - Autenticación con Clerk
00:30:00 Configurando sistema de rutas y frontend de la home
02:23:00 Página de companies
02:42:30 Configurando uploadthing
02:56:30 Generando y configurando Base de datos con Neon.tech
02:59:00 Configurando Prisma y schemas
03:12:30 Creando endpoint para pasar datos a la Base de datos
03:25:12 Siguiendo con el front de la lista de empresas
03:48:30 Creando página companyId
05:05:30 Creando página de calendario
06:04:00 Página FAQS
06:11:00 Página Analytics
06:22:40 Desplegando proyecto en Netlify
¡No olvides suscribirte al canal y activar las notificaciones para más contenido como este! Si te gustó el video, dale like y comparte con tus amigos. Deja tus preguntas y comentarios abajo, estaré encantado de ayudarte. ¡Vamos a crear algo increíble juntos!
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟 Sígueme
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► https://www.udemy.com/user/rafatarre/
‣‣ Instagram ► https://www.instagram.com/tarredev/?h...
‣‣ Tik Tok ► TikTok: tarredev
________
📢 Recursos Adicionales:
Discord para cualquier problema/error/bug: Discord: discord
⭐️ Acceso al código y actualizaciones: https://cursos.rafatarrega.com/dashbo...
Next.js: https://nextjs.org/
ShadCn: https://ui.shadcn.com/
BBDD: https://neon.tech/
Uploadthing: https://uploadthing.com/
Calendario: https://fullcalendar.io/
Despliegue: https://www.netlify.com/
________
📚 ¿Qué Aprenderás en Este Curso?
- 🌐 Next.js 14 & server actions
- 🎨 Componentes bonitos con Shadcn UI
- 🔐 Auth usando Clerk
- 🏠 Landing page con animaciones
- 📊 Admin dashboard gestionable
- 💾 PostgresDB using NeonDB
- 🚀 Deployment on Netlify
- 📱 Mobile responsive
- NextJS 14: Configuración y uso de la última versión de NextJS.
- React: Creación de componentes dinámicos y reutilizables.
- Tailwind CSS: Estilos modernos y adaptativos para tu aplicación.
- Shadcn: Uso de componentes personalizados, incluyendo modos claro y oscuro.
- Clerk: Implementación de sistemas de autenticación para login y registro.
- Gráficos y Calendario: Integración de gráficos interactivos y un calendario para reuniones.
- Gestión Empresarial: Crear, editar y gestionar empresas y contactos asociados.
- Creación de un calendario para gestionar citas.
- Despliegue en Producción: Subir el proyecto a un dominio público de manera gratuita con la plataforma de Netlify.
🛠️ Proceso Completo:
- Configuración del Proyecto: Instalación y configuración inicial de NextJS 14.
- Desarrollo del Frontend: Creación de la interfaz con NextJS y Tailwind CSS.
- Autenticación con ClerkJS: Configuración de login y registro de usuarios.
- Funcionalidades del Dashboard: Implementación de gráficos, calendario y gestión de empresas y contactos.
- Diseño Responsive: Adaptación de la web para dispositivos móviles, tablet y escritorio.
- Modo Claro y Oscuro: Integración de modos de visualización con Shadcn.
Despliegue: Publicación de la web en un dominio gratuito para acceso público.
______
📅 Temas del Video:
00:00:00 - Qué vamos a hacer en este curso
00:10:30 - Empezando proyecto
00:19:00 - Autenticación con Clerk
00:30:00 Configurando sistema de rutas y frontend de la home
02:23:00 Página de companies
02:42:30 Configurando uploadthing
02:56:30 Generando y configurando Base de datos con Neon.tech
02:59:00 Configurando Prisma y schemas
03:12:30 Creando endpoint para pasar datos a la Base de datos
03:25:12 Siguiendo con el front de la lista de empresas
03:48:30 Creando página companyId
05:05:30 Creando página de calendario
06:04:00 Página FAQS
06:11:00 Página Analytics
06:22:40 Desplegando proyecto en Netlify
¡No olvides suscribirte al canal y activar las notificaciones para más contenido como este! Si te gustó el video, dale like y comparte con tus amigos. Deja tus preguntas y comentarios abajo, estaré encantado de ayudarte. ¡Vamos a crear algo increíble juntos!
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟 Sígueme
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► https://www.udemy.com/user/rafatarre/
‣‣ Instagram ► https://www.instagram.com/tarredev/?h...
‣‣ Tik Tok ► TikTok: tarredev
3 هفته پیش
در تاریخ 1403/04/03 منتشر شده
است.
6,961
بـار بازدید شده