Proyectos desarrollados con Nextjs

---

Un sistema de gestión de contenido (CMS) para blogs moderno, rápido y escalable, desarrollado con tecnologías de vanguardia. Esta aplicación permite a los usuarios crear, leer, actualizar y eliminar publicaciones de blog de manera intuitiva, con una interfaz de usuario limpia y responsiva.

Código    

Este proyecto demuestra cómo crear un sistema CRUD completo con Next.js 15, Drizzle ORM y MySQL/MariaDB usando únicamente JavaScript. La aplicación incluye todas las operaciones básicas (Crear, Leer, Actualizar, Eliminar) con una interfaz moderna y responsiva, aprovechando App Router y Server Components. Drizzle ORM ofrece autocompletado inteligente y consultas SQL type-safe, mientras que MySQL/MariaDB garantiza rendimiento óptimo y escalabilidad para producción.

Código    

Un carrito de compras moderno y responsivo construido con Next.js y Bootstrap 5. Permite gestionar productos de forma interactiva con funciones de incremento/decremento de cantidad, eliminación de items, cálculo automático de totales y una interfaz limpia con tipografía Inter. La aplicación está estructurada con componentes modulares reutilizables siguiendo las mejores prácticas de React y arquitectura escalable.

Código    

Implementación de un clon de YouTube Shorts utilizando Next.js y la librería react-intersection-observer. La aplicación permite la reproducción automática de videos al desplazarse por la lista, replicando la experiencia de usuario de los Shorts de YouTube.

Código    

El server Actions no evitar estar creando una Api Rest, ademas el server Actions puede funcional tanto lado servidor como cliente. Utilizar un servidor de acciones tiene varias ventajas.

Código    

Aprende a conectar MySQL a Next.js de manera sencilla y eficiente, para probar la base de datos de forma local.

Código    

Este proyecto demuestra cómo conectar una aplicación Next.js con una base de datos PostgreSQL utilizando el paquete pg. Con el fin de aprender a utilizar Next.js con una base de datos PostgreSQL.

Código    

Proyecto práctico para aprender a consumir APIs en Next.js usando SWR y Axios, evitando el uso manual de useEffect y useState. Mejorando la experiencia del usuario con datos siempre frescos y sin la necesidad de usar useEffect y useState en cada petición.

Código    

Aprende a consumir una Api en NextJs desde cero usando el método fetch de JavaScript, una tarea muy cotidiana en la vida de los desarrolladores.

Código    

Una aplicación web moderna para gestión de contactos desarrollada con Next.js 15, MySQL y Bootstrap 5. Incluye funcionalidades completas de CRUD (Crear, Leer, Actualizar, Eliminar) con una interfaz elegante. La aplicación está estructurada con componentes modulares reutilizables siguiendo las mejores prácticas de React y arquitectura escalable.

Código    

Aplicación desarrollada con Next.js 15 que muestra cómo consumir una API, construir el frontend de un e-commerce y utilizar un buscador con filtrado de productos, entre otras funcionalidades.

Código    

Aprende a implementar un sistema de filtrado dinámico con checkboxes en Next.js usando el paquete loading-request, ideal para listar y filtrar jugadores de la NBA de forma interactiva.

Código    

Aprende a integrar Bootstrap 5 en Next.js de manera sencilla y eficiente, para mejorar la experiencia del usuario.

Código    

Aplicación construida conNext.JS que muestra cómo resaltar bloques de código utilizando el paquete react-syntax-highlighter. Incluye un botón para copiar el código al portapapeles y un indicador visual de que el código ha sido copiado.

Código    

Nextjs Toast Notify es un paquete npm imprescindible para agregar notificaciones emergentes (toasts) a tus aplicaciones web con Next.js. Ideal para proporcionar retroalimentación visual clara y efectiva sin interrumpir la experiencia del usuario.

Código    

Un proyecto de chat en tiempo real construido con Next.js y Socket.io, que permite a los usuarios interactuar en una sala de chat dinámica. Utiliza socket.io-client en el frontend para gestionar la comunicación en tiempo real con el servidor. Implementa actualizaciones instantáneas de mensajes y soporte para múltiples usuarios. Perfecto para aplicaciones de chat colaborativo o interacción en vivo.

Código    

Un sistema completo de autenticación desarrollado con Next.js 15, MySQL y Bootstrap 5. Incluye registro de usuarios, login seguro con JWT, dashboard protegido y notificaciones modernas. La aplicación es bastante simple de usar y es perfecta para proyectos pequeños y medianos.

Código    

Sistema de Likes y Dislikes con Next.JS es una aplicación web interactiva que permite a los usuarios expresar sus preferencias mediante votos positivos y negativos, Permite a los usuarios interactuar con el contenido y visualizar la popularidad relativa de cada elemento.

Código    

Aprende a cargar imágenes en Next.js de manera sencilla y eficiente, además de listar todas las imágenes cargadas. Para mejorar la experiencia del usuario, incorporaremos react-toastify para generar alertas y react-top-loading-bar para mostrar una barra de progreso durante las operaciones.

Código    

Proyecto práctico para aprender a subir imágenes a Cloudinary desde una aplicación Next.js. Utilizando Cloudinary como servicio de almacenamiento en la nube, este proyecto demuestra cómo implementar una funcionalidad de carga de imágenes de manera sencilla y eficiente.

Código