Clark's Bowling Club Website

A dynamic Next.js website for the 6-piece funk/pop band Clark's Bowling Club, featuring bilingual content, interactive 3D elements, and content management via Google Sheets.

Table of Contents

• Features
• Tech Stack
• Getting Started
• Project Structure
• Environment Setup
• Content Management
• Key Components
• Development
• Documentation
• License

Features

✨ Bilingual Support: English/French with automatic location detection
🎵 Music Integration: Embedded Spotify, YouTube, and Bandcamp players
🎯 3D Interactive Elements: Three.js powered spinning logo with holographic effects
📱 Responsive Design: Mobile-first approach with Tailwind CSS
📧 Contact Forms: Email integration with bilingual templates
🗓️ Tour Management: Dynamic tour dates with past/future filtering
🎤 Lyrics Display: Searchable lyrics organised by album
🔍 SEO Optimised: Automatic sitemap generation, robots.txt, and LLMs.txt
♿ Accessibility: ARIA labels, keyboard navigation, reduced motion support
📊 Dynamic Content: Pages populated from Google Sheets CMS

Tech Stack

• Framework: Next.js 15 with TypeScript
• Styling: Tailwind CSS with custom fonts
• 3D Graphics: Three.js for interactive elements
• Email: Nodemailer for contact forms
• Data: Google Sheets as CMS via CSV exports
• Icons: React Icons (Font Awesome 6)
• State: React Context for language switching
• Deployment: Optimised for Vercel

Getting Started

Prerequisites

• Node.js 18.0 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

• with https:

git clone https://github.com/TandemCreativeDev/cbc.git
cd cbc

• with ssh (recommended):

git clone git@github.com:TandemCreativeDev/cbc.git
cd cbc

2. Install dependencies:

npm install

3. Set up environment variables (see Environment Setup)

4. Run the development server:

npm run dev

Open http://localhost:3000 to view the site.

Project Structure

src/
├── app/                    # Next.js app router pages
│   ├── api/send-emails/    # Email sending endpoint
│   ├── [page]/             # Dynamic page routes
│   └── _components/        # Page-specific components
├── components/             # Shared components
│   ├── layout/             # Header, footer, navigation
│   └── ui/                 # Reusable UI components
├── context/                # React contexts
├── utils/                  # Utility functions
├── data/                   # Static data files
└── fonts/                  # Custom web fonts

Environment Setup

Create a .env.local file in the root directory:

# Google Sheets Configuration
NEXT_PUBLIC_CSV_URL=https://docs.google.com/spreadsheets/d/[SHEET_ID]/export?format=csv

# Site Configuration
NEXT_PUBLIC_SITE_URL=https://clarksbowlingclub.com

# Email Configuration (SMTP)
EMAIL_HOST=smtp.host.com
EMAIL_PORT=587
EMAIL_SECURE=false
EMAIL_USER=your@email.com
EMAIL_PASSWORD=your_app_password

Content Management

Content is managed via Google Sheets with specific tab GIDs:

• About Page: GID 0 (title, content)
• Music: GID 1713768433 (embedded media, categories)
• Lyrics: GID 145198726 (songs, albums, lyrics)
• Tour Page: GID 127405583 (page content)
• Tour Dates: GID 572869052 (events, venues, tickets)

Sheet Format

Pages use this structure:

key,english,french
title,About,Bio
content,"Band description...","Description du groupe..."

Key Components

Language Context

Automatic language detection based on user location, with manual toggle support.

Navigation Animation

Custom bowling ball indicator that animates between active nav items with CSS animations.

3D Logo

Three.js powered spinning logo with holographic effects and mouse tracking.

Contact Forms

Bilingual email templates with validation and toast notifications.

Development

Available Scripts

# Start development server with Turbopack
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

Development Features

• Hot Reload: Instant updates during development
• TypeScript: Full type safety and IntelliSense
• Turbopack: Fast bundling with Next.js 15
• ESLint: Code quality enforcement
• Tailwind CSS: Utility-first styling with JIT compilation

Browser Support

Modern browsers with ES6+ support. Graceful degradation for:

• Reduced motion preferences
• JavaScript disabled scenarios
• Legacy browser compatibility

Key production features

• Automatic sitemap generation including dynamic content
• SEO-friendly meta tags and structured data
• Performance optimisations with Next.js Image component
• Accessibility compliance with ARIA labels and keyboard navigation

Documentation

Official Documentation

• Next.js - React framework documentation
• Tailwind CSS - CSS framework documentation
• Three.js - 3D graphics library documentation
• React Icons - Icon library documentation
• Nodemailer - Email sending library documentation

Tutorials & Guides

• Next.js with Tailwind CSS - Official integration guide
• Three.js Fundamentals - Getting started with 3D graphics
• React TypeScript Cheatsheet - TypeScript best practices

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind's utility classes (no custom CSS when possible)
• Ensure accessibility compliance
• Test on multiple devices and browsers
• Maintain bilingual support for new features

---

Author

TandemCreativeDev - hello@runintandem.com

Clark's Bowling Club - A 6-piece funk/pop band based in Lyon, France.
🌐 Website | 📧 Contact | 🎵 Spotify