Crea un Dashboard Empresarial: Guía Paso a Paso con NextJS 14, React, Ta...

Crea un Dashboard Empresarial: Guía Paso a Paso con NextJS 14, React, Tailwind CSS, Shadcn, ClerkJS

25.954 visualizaciones 23 jun 2024

¡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   ⭐️ Acceso al código y actualizaciones: https://www.tarredev.com/projects/das... 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!