Acciones Ejecutar el comando npx shadcn-ui@latest add alert-dialog  Ejecutar npm i zustand   Instalar npm i react-confetti  Crear hooks/use-confetti-store.ts import { create } from "zus...

Formulario de Adjuntos Modificar components/FileUpload.tsx "use client"; import toast from "react-hot-toast"; import { UploadDropzone } from "@/lib/uploadthing"; import { ourFileRouter } fro...

Formulario de Categorias https://ui.shadcn.com/docs/components/combobox Instalar popover npx shadcn-ui@latest add popover y command npx shadcn-ui@latest add command Crear components/ui/comb...

Formulario descripción Instalar npx shadcn-ui@latest add textarea Crear app/(dashboard)/(routes)/teacher/courses/[uuid]/_components/DescriptionForm.tsx "use client"; import * as z from "zo...

Esquema de base de datos https://www.prisma.io/ instalar Prisma npm i -D prisma Ejecutar npx prisma init esto creara la carpeta prisma y el archivo schema.prisma, ademas de modificar el arch...

Layout dinamico Modificar app/components/NavbarRoutes.tsx para agregar los hooks necesarios para navegación dinámica "use client"; import { UserButton } from "@clerk/nextjs"; import { ModeTo...

Modo Claro y Oscuro https://ui.shadcn.com/docs/dark-mode/next Instalar npm install next-themes Crear components/providers/theme-provider.tsx "use client" import * as React from "react" i...

Configuración inicial https://ui.shadcn.com/ https://ui.shadcn.com/docs/installation/next Crear app de NextJS npx create-next-app@latest my-app --typescript --tailwind --eslint NextJS C...

Custom Hook Los hooks personalizados son muy útiles para limpiar su código. Puedes usar hooks de React dentro de tus hooks personalizados (después de todo, todas son funciones! 👍). Puede encapsula...

useEffect useEffect: El Hook de efecto te permite llevar a cabo efectos secundarios en componentes funcionales. ¿Qué hace useEffect? Al usar este Hook, le estamos indicando a React que el compone...