Web blog Next.js 15


Web blog, creada con Next.js 15, Drizzle, Postgresql, Tailwind CSS y Jodit, un editor web para crear las entradas de blog.
Aqui tenemos una entrada de blog estandar, la aplicacion de blog no tiene subcategorias, solo categorias principales, que tendremos que crear en la opcion de menu Category.
El editor web utilizado es Jodit, aqui se puede componer el post que guardaremos en la base de datos.

Verify email
Sin verificacion de email, usuario se registra con login y password, ya puede acceder al backend con permisos de USUARIO, con los cuales puede, modificar su información personal, puede crear posts, pero no estan activos(no aparecen en el blog de la web), cambiar su clave, borrar la cuenta, y puede activar two factor.
Con verificación de email, usuario se registra con login y password, en este momento se informa que la cuenta no esta activa mostrando un link, verify your email.

Cuando el usuario presiona el enlace Verify your email, nos muestra esta pantalla

hacemos click en Send mail, enviamos a nuestro email un enlace junto con un token(JWT), tendremos un tiempo determinado en hacer click en el enlace,
Pulsamos en el enlace que nos llega, se abre un navegador y este acccede a la direccion URL del enlace, se muestra un banner informando que la verificacion tuvo exito, se muestra un link a login.
Two Factor Authentication(2FA)
Cada usuario podra activar esta caracteristica desde la opcion de menú Security del Dashboard, cuando lo considere oportuno.

Una vez activada, nos muestra el QR(TOPT) y un secreto de 32 bytes, que pasaremos a secreto.base32 y lo guardaremos en la base de datos.

Desde un autenticador como FreeOTP+, Google Authenticator, escaneamos el QR que tenemos en pantalla, lo necesitaremos para hacer login nuevamente.
Tambien puedes utilizar(esto desde el escritorio), OTPClient que soporta: Time-based One-time Passwords (TOTP) and HMAC-Based One-Time Passwords (HOTP), presionamos [+] y opcion de menu Manually, introducimos el secreto que se muestra por pantalla(Dashboard).
Ahora que tenemos activado two factor, cuando hagamos login nuevamente, utilizaremos el autenticador preferido que nos genera el token necesario.

Manager de posts
Nos muestra todos los posts, si el usuario tiene Rol: ADMIN, si es Rol: USER, solo sus posts. Solo Rol: ADMIN puede activar, modificar y borrar los posts, creados por USER o ADMIN.

Conclusión
Este software es una base de código(Next.js 15.5.4), con diseño full-stack( funcionalidad frontend, backend integrada) y responsivo, solo en los post que muestran código, el responsivo muestra un scroll, se deja así intencionadamente, para que al copiar la configuración permanezca el formato correcto para los servicios del servidor.
En la autenticación se utilizan tokens con Jose(JWS) y OpenPGP, con cifrado parcial del token. Es una beta0.9, pero funcional, es ideal para desarrolladores que inician con Next.js y no quiren empezar de cero.
Otras características
- Integración de APIs: Django Rest(solo envío de correo)
- Servidor de correo: Postfix
- Calidad del código: Buena
- Seguridad: Media
- Código IA: 5% (la IA se utilizo al final del proyecto)
- Orientación IA: 20% - Importante
Algunos módulos utilizados en el proyecto
- headlessui
- radix-ui
- bcryptjs
- dotenvx
- jodit-react
- jose
- openpgp
- qrcode
- speakeasy
- zod
- framer-motion
Estructura de Directorio
- /app
- (frontend)
- (login)
- dashboard
- /components
- /lib
- /public
...
Related Posts
Dockerizar una aplicación Next.JS con Nginx y PostgreSQL
2025-09-21 00:00:00

Cifrar JSON Web Token con Flask
2025-03-17 00:00:00

Entorno de desarrollo local con Next.js, Drizzle, Nginx y PostgreSQL
2025-09-21 00:00:00
Popular Category
Subscribe to receive future updates
Lorem ipsum dolor sited Sed ullam corper consectur adipiscing Mae ornare massa quis lectus.
No spam guaranteed, So please don’t send any spam mail.