AstroTypeScriptTailwind

Runnymede District Scouts Website

A comprehensive website for Runnymede District Scouts. The site provides essential information about local scouting groups, upcoming events, and activities in the Runnymede area.

Key Features

  • Group directory with detailed information about 10 local scout groups
  • Interactive event calendar and diary system
  • Contact forms for inquiries and joining
  • Responsive design for all devices
  • Fast, static site generation with Astro
  • Modern, accessible UI with Tailwind CSS

Technical Stack

  • Framework: Astro for static site generation
  • Styling: Tailwind CSS for responsive design
  • Language: TypeScript for type safety
  • Deployment: Automated deployment with Coolify
  • Content: MDX for rich content management
  • Performance: Optimized images and assets

Development Process

  1. Planning:

    • Gathered requirements from scout leaders
    • Designed information architecture
    • Created wireframes and mockups
  2. Implementation:

    • Set up Astro project with TypeScript
    • Implemented responsive layouts
    • Created reusable components
    • Added content management system
  3. Testing & Deployment:

    • Tested across multiple devices
    • Optimized for performance
    • Set up continuous deployment

Results

The new website provides:

  • Easy access to group information
  • Up-to-date event calendar
  • Improved communication channels
  • Better visibility for local scouting activities
  • Fast, reliable performance

Visit the live site: Runnymede District Scouts