baderidris/nuxt-portfolio repository overview

⁠baderidris/nuxt-portfolio

Welcome to the official Docker Hub repository for the Nuxt 4 Full-Stack Portfolio — a production-grade, fully containerized application built for developers who want a battle-tested reference architecture they can clone, study, and ship.

⁠Overview

This isn't just a portfolio template — it's a full-stack monorepo that runs equally well as a web app (SSR/SSG), a mobile app (Capacitor / Ionic), and a desktop app (Electron). Every major subsystem — authentication, real-time communication, email delivery, blog/CMS, database backups, and reverse-proxy SSL — ships as a single cohesive Docker Compose stack.

The project is fully internationalized across Arabic, Spanish, and English (ar / es / en), with responsive layouts tested on both mobile and desktop clients.

⁠What's Inside

⁠🔐 Authentication & Authorization

• Email/password registration and login with accessToken + refreshToken rotation
• Third-party OAuth via Google and Facebook
• Role-based access control (admin / user) guarding /content/admin, /dashboard, /login, /register, and all sensitive API routes

⁠💬 Real-Time Communication

• WebRTC peer-to-peer video and audio calling inside /dashboard
• Real-time chat over Socket.IO with full message persistence
• Full-stack seamless logging via Socket.IO for live debugging across the entire stack

⁠📰 Blog / Posts System with Full SEO

• Articles and posts stored in PostgreSQL via Prisma ORM, designed following data-intensive application principles (inspired by Designing Data-Intensive Applications by Martin Kleppmann) — chosen for relational integrity and query performance over document storage
• MongoDB handles all user-facing concerns: authentication sessions, role management, real-time chat history, and user profiles
• Server-rendered pages include ogImage and ogUrl meta tags for rich social previews and AI-readable structured metadata
• Blog admin routes protected by role-based middleware

⁠🌍 Internationalization (i18n)

• Full Arabic / Spanish / English (ar / es / en) support across all pages
• RTL layout handled correctly for Arabic
• Responsive and tested on both mobile and desktop viewports

⁠🎮 3D Interactive Experience — /projects/train

• A dedicated Three.js scene showcasing what the project learned through Three.js + Blender workflows
• The Blender level design file (.blend) is shipped directly in the repo at app/assets/three/resources — fully open for study and modification
• Custom GLSL shaders included (~4% of the codebase)

⁠📬 Self-Hosted Mail Server

• Fully authorized Postfix + Dovecot mail stack included in the compose file
• MTA-STS policy served via Nginx for mail transport security
• Transactional email (password reset, notifications) works out of the box

⁠🗄️ Multi-Database Architecture

• MongoDB (with Mongoose) for user auth, sessions, roles, real-time chat history, and admin operations
• PostgreSQL via Prisma ORM for blog posts and relational content — designed with the reliability principles of data-intensive systems in mind
• Redis for session caching, Socket.IO adapter, and rate-limiting

⁠💾 Automated Database Backups

• tiredofit/db-backup container backs up both PostgreSQL and MongoDB on a configurable schedule
• ZSTD-compressed snapshots stored on a persistent volume
• Retention and cleanup periods fully configurable via environment variables

⁠🔒 Security Hardening

• Certbot (Let's Encrypt) SSL with automated renewal via cron
• Fail2Ban with custom jails and filters against brute-force and DDoS attacks
• Nginx reverse proxy with hardened headers and rate limiting
• Docker Swarm-ready (replicas: 2, rolling update policy)

⁠📱 Multi-Platform Distribution

• CapacitorJS + Ionic for Android and iOS (tested with SSR + deep-link support)
• Electron for Windows, macOS, and Linux desktop builds
• Platform-specific .env files (.env.capacitor, .env.electron) isolate configuration per target

⁠Quick Start

services:
  app:
    image: baderidris/nuxt-portfolio:latest
    restart: always
    volumes:
      - ./.data:/app/.data
      - ./.env:/app/.env
      - ./.env.production:/app/.env.production
    environment:
      - PORT=3000
      - NODE_ENV=production
    depends_on:
      - mongo
      - postgres
    command: bun start
    networks:
      - app-network

  mongo:
    image: mongo:8-jammy
    restart: always
    environment:
      - MONGO_INITDB_ROOT_USERNAME=your_user
      - MONGO_INITDB_ROOT_PASSWORD=your_password
    volumes:
      - mongo-db:/data/db
    networks:
      - app-network

  postgres:
    image: postgres:18-alpine
    restart: always
    environment:
      POSTGRES_PASSWORD: your_password
      POSTGRES_DB: articles
    volumes:
      - psql-data:/var/lib/postgresql
    networks:
      - app-network

  redis:
    image: redis:alpine
    restart: always
    networks:
      - app-network

volumes:
  mongo-db:
  psql-data:

networks:
  app-network:
    driver: bridge

For the full production stack including Nginx, Certbot, Postfix/Dovecot, Fail2Ban, and automated DB backups — including the final SSL layer via compose.ssl.yaml — refer to the detailed setup guide in the GitHub repository README⁠.

⁠Configuration

Use the appropriate prefix for Nuxt runtime config variables:

# Public (exposed to client)
NUXT_PUBLIC_ORIGIN_URL="https://example.com"

# Private (server-only)
NUXT_MAIL_HOST="smtp.example.com"
NUXT_SESSION_SECRET="a-long-random-secret"

Copy .env.example from the repo and fill in all required values before first run. For Prisma migrations run:

bunx prisma migrate deploy
bunx prisma generate

📖 Nuxt runtime config docs: nuxt.com/docs/guide/going-further/runtime-config⁠

⁠Services at a Glance

⁠Acknowledgments

If this project saves you time or teaches you something new, please consider:

• ⭐ Starring the repo on GitHub⁠
• 💬 Joining the discussion at GitHub Discussions⁠
• ☕ Supporting the project on Patreon⁠

Happy coding!