Nextjs y Pocketbase con Shadcn, Typesscript, Tailwindcss y V0.dev

22 thoughts on “Nextjs y Pocketbase con Shadcn, Typesscript, Tailwindcss y V0.dev”

• – 00:00:00 Introducción a Pocket base y su funcionalidad como backend as a service.
  – 00:01:30 Características principales de Pocket base, como base de datos en tiempo real y autenticación.
  – 00:03:20 Creación de un proyecto Next.js para integrar con Pocket base.
  – 00:04:01 Descarga e instalación de Pocket base para utilizar en el proyecto.
  – 00:04:33 Proceso de descompresión y preparación de Pocket base para su uso.
  – 00:05:31 Creación de colecciones y definición de campos en Pocket base.
  – 00:06:46 Registro de nuevos registros en las colecciones de Pocket base.
  – 00:08:11 Edición de colecciones para añadir nuevos campos, como imágenes, en Pocket base.
  – 00:09:09 Configuración de campos de imagen en Pocket base.
  – 00:10:01 Acceso a datos a través de la API en Pocket base.
  – 00:11:12 Instalación y configuración del cliente Pocket base para interactuar con la API.
  – 00:14:05 Creación de una carpeta en la aplicación para futuras interfaces.
  – 00:14:29 Instalación del paquete "chat c" para interfaces de tarjetas de productos.
  – 00:15:31 Configuración de fuentes y estilos en la aplicación con "chat c".
  – 00:16:36 Uso de la función "CN" para combinar clases de estilos en la aplicación.
  – 00:17:21 Personalización del tema y la fuente en la configuración de Tailwind.
  – 00:18:01 Creación de componentes básicos como la página de inicio y tarjetas de productos.
  – 00:19:30 Creación de un componente de tarjeta de producto con título, descripción y botón de compra.
  – 00:20:09 Conversión de la tarjeta en un componente y organización en una carpeta específica.
  – 00:22:00 Solución de problemas al mostrar imágenes externas en la aplicación.
  – 00:23:25 Integración de Pocketbase para obtener datos de productos desde el backend.
  – 00:25:03 Recorrido de los productos a partir de la propiedad items.
  – 00:26:06 Actualización de la petición para mostrar datos más actuales.
  – 00:27:26 Solución a problemas de caché al forzar la actualización de la petición.
  – 00:29:36 Explicación de la paginación y ajuste de la cantidad de elementos por página.
  – 00:30:42 Acceso a las imágenes de los productos a través de la dirección local.
  – 00:31:56 Concatenación de la dirección para acceder a las imágenes de los productos.
  – 00:33:47 Actualización del código para mostrar las imágenes de los productos.
  – 00:35:02 Resolución de problemas al actualizar las imágenes de los productos en la aplicación.
  – 00:36:08 Uso de b.de para generar interfaces gráficas con inteligencia artificial.
  – 00:37:19 Generación de una página de detalle de producto utilizando b.de.
  – 00:39:00 Obtención de datos de un producto desde Pocket base al renderizar la página de detalle.
  – 00:40:59 Introducción a la API preview y la obtención de datos de un solo producto.
  – 00:41:29 Obtención del ID del producto desde la URL y su uso en la consulta.
  – 00:42:05 Configuración de permisos de lectura para administradores en la interfaz.
  – 00:43:00 Actualización de la interfaz con los datos del producto seleccionado.
  – 00:44:36 Adición de un nuevo campo de estrellas para calificación de productos.
  – 00:46:09 Ejemplo de asignación de estrellas a productos.
  – 00:47:28 Configuración dinámica de estrellas en función de la calificación del producto.
  – 00:49:27 Creación de una colección de comentarios o reviews para los productos.
  – 00:50:31 Implementación de tema oscuro y navegación en la interfaz.
  – 00:51:15 Importación de componentes y configuración de navegación.
  – 00:51:39 Estilización de la interfaz con clases de Flexbox y contenedores.
  – 00:52:05 Implementación de un tema oscuro y claro con el paquete next teams.
  – 00:53:00 Creación de un botón para cambiar entre estilos de tema.
  – 00:54:09 Instalación del componente dropdown menu para el botón de cambio de estilos.
  – 00:55:02 Personalización del tema y adición de un botón de cambio de estilos en la navegación.
  – 00:56:29 Problemas con las relaciones de datos y expand en el ejemplo de Nex con Pocket base.
  – 00:56:41 Posibilidad de extender el proyecto backend con código de Go.
  – 00:57:20 Conclusiones finales y invitación a dejar dudas en los comentarios y anuncio de próximos videos.

• Hola Fazt, vi que tipaste el producto como "any", vi que por inferencia cada producto tiene el tipo "RecordModel" y por ende el array de items "RecordModel[ ]", sin embargo el tipo RecordModel no trae las propiedades de los productos, como el name, price, etc (en otras palabras las propiedades que definimos al crear la colección). Como le podría agregar tipado ???

• buen vídeo, aunque pensaba que ibas a integrar la autenticación

• Algo como esto es lo que estoy buscando ahorita, tienes algún tutorial de appwrite?

• Cuál es ese tema de vscode fazt? Saludos

• Se puede desplegar este proyecto con pocketbase en vercel?

• alternativas al pocketbase? buen video Fast!

• Pocketbase es escalable para entornos de produccion y manejar muchos datos?

• Siii por favor video de cosas mas avanzadas con pocketbase 🤩

• excelentísimo, gracias mister

• Que me recomiendas para desplegar un sitio web en js y HTML css de videojuegos? Como puedo hacerlo

• esto quedo raro "Nextjs y Nextjs"

• muy buen video fazt, cuando pueda lo veo

• Super ❤

• ¡Qué buen proyecto el de Pocketbase! ❤

• Fazt ese título jajajaja NextJs y NextJs (? Osea doble NextJs para más potencia 🚀 , se agradece el vídeo ❤

• Fazt, colocaste Nextjs dos veces

• excelente , llevaba tiempo esparando un video tuyo utilizando pocketbase con un frontend, lo intente con javascript vanilla y no supe integrarlo bien , muchas gracias ,eres un crack fast

• Fazt la calidad solo me sale en 360p a lo mejor youtube aun sigue procesandolo, gracias fatz saludos

• Fazt code estoy usando un movil y no hay sonido

• No hay sonido

• Recién sale, aun no lo veo pero ya le di like y lo guarde en favorito, gracias fazt 🎉

Comments are closed.