A modern, immersive website for La Taverne des Aventuriers, a medieval-fantasy themed game bar located in Nantes, France.
La Taverne des Aventuriers is a unique board game bar in Nantes offering an immersive medieval-fantasy experience. This website serves as the digital gateway to the tavern, featuring an interactive menu, event calendar, game library integration, and a playful cocktail battle game.
Live Site: latavernedesaventuriers.fr
- Cocktail Battle: A fun, engaging game where users vote for their favorite cocktails
- Animated Navigation: Smooth scroll navigation with floating dock menu
- Rive Animations: High-quality knight animations for enhanced user experience
- Responsive Design: Optimized for all devices from mobile to desktop
- Landing Page: Hero section with immersive video background and medieval aesthetics
- Menu (Carte): Complete drinks menu with cocktails, mocktails, beers, wines, and food
- Events: Timeline of upcoming events with featured highlights
- Game Library: Integration with MyLudo for browsing available board games
- Contact: Interactive map and contact information
- Reservation: Direct booking integration
- About Us: Story and mission of the tavern
- Medieval-fantasy themed UI with custom fonts (Cardinal, Cardo, KC Obra Letra)
- Custom texture backgrounds and decorative elements
- Smooth animations using GSAP and Framer Motion
- SEO optimized with structured data and metadata
- Progressive Web App ready with manifest and favicons
- Next.js 15.5.4 - React framework with App Router
- React 19.2.0 - Latest React with concurrent features
- TypeScript 5.9.3 - Type-safe development
- Tailwind CSS 4.1.14 - Utility-first CSS framework
- FontAwesome 7.1.0 - Icon library
- Lucide React - Additional icon set
- Framer Motion - Animation library
- GSAP - Advanced animations
- PocketBase 0.26.2 - Backend as a service
- Server-side data fetching with Next.js Server Actions
- Secure API routes with revalidation strategies
- Rive - Advanced interactive animations
- Vimeo Player - Video integration
- Next.js Image optimization
- Biome - Fast linter and formatter (ESLint + Prettier replacement)
- pnpm - Efficient package manager
- Zustand - Lightweight state management
- Node.js
^18.20.2 || >=20.9.0 - pnpm
^9 || ^10
- Clone the repository
git clone <repository-url>
cd la-taverne-des-aventuriers- Install dependencies
pnpm install-
Environment variables Create a
.env.localfile with required variables (contact the team for credentials) -
Run development server
pnpm devOpen http://localhost:3000 to view the application.
# Start development server with Turbopack
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Format code with Biome
pnpm format
# Lint code with Biome
pnpm lint
# Run both format and lint
pnpm check
# Type checking
pnpm tscThis project uses Biome for code quality, which provides:
- ⚡ Lightning-fast linting (ESLint replacement)
- 🎨 Automatic code formatting (Prettier replacement)
- 🔒 Type-safe imports and exports
- 📝 Consistent code style across the project
Run checks before committing:
pnpm checkla-taverne-des-aventuriers/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── actions/ # Server Actions
│ │ │ ├── services/ # Data fetching services
│ │ │ └── AuthService.ts # Authentication
│ │ ├── fonts/ # Custom font files
│ │ ├── styles/ # Global styles
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── carte/ # Menu page
│ │ ├── evenements/ # Events page
│ │ ├── bibliotheque-de-jeux/ # Game library
│ │ ├── contact/ # Contact page
│ │ ├── reservation/ # Reservation page
│ │ └── battle/ # Cocktail battle game
│ ├── components/ # React components
│ │ ├── Global/ # Shared components (Navbar, Footer, etc.)
│ │ ├── Landing/ # Landing page components
│ │ ├── Menu/ # Menu-related components
│ │ ├── Events/ # Event components
│ │ ├── Contact/ # Contact page components
│ │ ├── CocktailBattle/ # Battle game components
│ │ ├── animation/ # Animation components
│ │ └── ui/ # Reusable UI components
│ ├── lib/ # Utilities and helpers
│ └── utils/ # Additional utilities
├── public/ # Static assets
│ └── assets/
│ ├── images/ # Images and graphics
│ ├── videos/ # Video files
│ ├── icons/ # Favicons and PWA icons
│ └── animation/ # Rive animation files
├── biome.json # Biome configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── nixpacks.toml # Deployment configuration
The project is optimized for deployment with Nixpacks. Configuration is available in nixpacks.toml.
# Create optimized production build
pnpm build
# Test production build locally
pnpm startEnsure all required environment variables are set in your deployment platform:
- PocketBase connection details
- API keys for third-party services
- Analytics tracking IDs
- Cardinal: Medieval-style display font for headings
- Cardo: Elegant serif font for body text
- KC Obra Letra: Hand-drawn style for decorative text
- Brown tones: Primary text and backgrounds
- Red accents: Call-to-action and highlights
- Cream/White: Light backgrounds and overlays
Following Tailwind's default breakpoints:
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px2xl: 1536px
- Server-side data fetching for sensitive operations
- Image optimization with Next.js Image component
- Lazy loading and code splitting
- ISR (Incremental Static Regeneration) with 10-second revalidation
- Secure PocketBase integration (server-side only)
- SEO optimization with metadata and structured data
- Follow the existing code style (enforced by Biome)
- Write type-safe code (TypeScript strict mode enabled)
- Test across different devices and browsers
- Run
pnpm checkbefore committing - Keep components modular and reusable
All rights reserved - La Taverne des Aventuriers © 2025
Developed & Designed with ❤️ by Andy Cinquin
For questions or support, visit La Taverne des Aventuriers