Frontend Applications

Jubiloop consists of two separate frontend applications, each serving a specific purpose.

Applications Overview

1. Web Application (apps/webapp/)

The main Jubiloop application for authenticated users to create and manage events.

• Framework: React 19 with TypeScript
• Routing: TanStack Router
• State Management: Zustand
• UI: shadcn/ui + Tailwind CSS
• Deployment: Cloudflare Pages

Learn more →

2. Marketing Site (apps/marketing/)

The public-facing website for showcasing Jubiloop features and attracting new users.

• Framework: Next.js 14 with TypeScript
• Rendering: Static Site Generation (SSG)
• Styling: Tailwind CSS
• Deployment: Cloudflare Pages

Learn more →

Shared Resources

Both applications share:

• UI components from packages/ui
• TypeScript types from the backend
• Tailwind configuration
• ESLint and Prettier settings

Development

# Run both frontend apps
npm run dev:frontend

# Run individually
npm run dev:webapp      # Web application only
npm run dev:marketing   # Marketing site only

Architecture Decisions

Why Two Separate Apps?

1. Performance: Marketing site can be fully static for best SEO
2. Independence: Teams can work on each app without conflicts
3. Optimization: Different build configs for different needs
4. Security: Authentication logic isolated to webapp

Technology Choices

• React for Webapp: Best for complex, interactive UIs
• Next.js for Marketing: Best for SEO and static content
• Cloudflare Pages: Unlimited projects on free tier, great performance