Technology Stack

Jubiloop is built with a modern, scalable technology stack designed for rapid development and production reliability.

Frontend Stack

Web Application (React SPA)

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Routing: TanStack Router v1
• State Management: Zustand
• API Client: TanStack Query
• UI Components: shadcn/ui (Radix UI based)
• Styling: Tailwind CSS
• Testing: Vitest, React Testing Library

Marketing Site (Next.js)

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Static Export: For Cloudflare Pages

Backend Stack

API Server

• Framework: AdonisJS 6
• Language: TypeScript (ESM modules)
• Database ORM: Lucid ORM
• Authentication: Session-based (built-in)
• Validation: VineJS
• API Docs: Documented in API Reference

Data Layer

• Database: PostgreSQL 15
• Cache: Redis 7
• Session Store: Redis
• File Storage: Cloudflare R2 (S3-compatible)

Infrastructure

Development Tools

• Containerization: Docker & Docker Compose
• Reverse Proxy: Caddy (automatic HTTPS)
• Local SSL: mkcert certificates

Production Infrastructure

• Backend Hosting: DigitalOcean Droplets
• Frontend Hosting: Cloudflare Pages
• Database: Neon (managed PostgreSQL)
• CDN & DNS: Cloudflare
• SSL: Let's Encrypt via Caddy/Cloudflare

DevOps Tools

• CI/CD: GitHub Actions
• IaC: Terraform
• Config Management: Ansible
• Container Registry: GitHub Container Registry

Development Environment

Monorepo Tools

• Tool: Turborepo
• Package Manager: npm workspaces
• Node.js: v22 LTS (required)

Code Quality

• Linting: ESLint
• Formatting: Prettier
• Type Checking: TypeScript 5.7
• Git Hooks: Husky + lint-staged
• Commits: Conventional Commits

Shared Packages

• @jubiloop/ui - Shared UI components
• @jubiloop/eslint-config - ESLint configuration
• @jubiloop/typescript-config - TypeScript configuration

Architecture Decisions

Why Monorepo?

• Code Sharing: Share types, utilities, and components
• Atomic Changes: Update multiple apps in one commit
• Consistent Tooling: Same build tools and configurations
• Simplified Dependencies: One node_modules at root

Why AdonisJS?

• Batteries Included: Auth, ORM, validation out of the box
• TypeScript First: Excellent TypeScript support
• Developer Experience: Great DX with helpful error messages
• Performance: Fast and efficient

Why React + TanStack?

• Modern Stack: Latest React patterns and best practices
• Type Safety: Full TypeScript support
• Performance: File-based routing with code splitting
• Developer Experience: Fast refresh and great tooling

Why PostgreSQL + Redis?

• PostgreSQL: ACID compliance, complex queries, JSON support
• Redis: Fast caching, session storage, real-time features

Version Management

Runtime Versions

{
  "node": ">=22",
  "npm": ">=10.9.2",
  "typescript": "5.7.3"
}

Package Updates

• Security Updates: Applied immediately
• Minor Updates: Monthly review
• Major Updates: Quarterly planning

Security Considerations

Frontend Security

• CSP Headers: Configured in Cloudflare
• HTTPS Only: Enforced everywhere
• Input Validation: Client and server side
• XSS Protection: React's built-in escaping

Backend Security

• Authentication: JWT with refresh tokens
• Authorization: Role-based access control
• Rate Limiting: Configured per endpoint
• CORS: Strict origin checking
• SQL Injection: Prevented by ORM
• Password Hashing: Argon2

Infrastructure Security

• Secrets Management: GitHub Secrets + 1Password
• SSL/TLS: Cloudflare managed certificates
• Firewall: DigitalOcean + Cloudflare rules
• Updates: Automated security patches

Monitoring & Observability

Current Monitoring

• Application Logs: Docker container logs
• Uptime Monitoring: Basic health checks
• Error Tracking: Manual log inspection

Planned Monitoring (Coming Soon)

• Error Tracking: Sentry
  • Frontend JavaScript errors
  • Backend exception tracking
  • Performance monitoring
  • Release tracking
  • Free tier: 5K errors/month

Performance Optimizations

Frontend Performance

• Code Splitting: Route-based splitting
• Lazy Loading: Components and images
• Bundle Optimization: Tree shaking and minification
• CDN: Static assets served from Cloudflare

Backend Performance

• Query Optimization: Indexed queries, eager loading
• Caching Strategy: Redis for frequent queries
• Connection Pooling: Database connection management
• Response Compression: Gzip/Brotli

Monitoring (Planned)

• APM: Application Performance Monitoring
• Error Tracking: Sentry or similar
• Uptime Monitoring: StatusPage
• Analytics: Privacy-focused analytics