Williamstown SC – Soccer Club Website

A modern soccer club website built with Next.js and Sanity CMS, showcasing teams, programs, and club news.

Features · Tooling · Developing and Running Locally

Features

• Modern, responsive design with mobile-first approach
• Content management powered by Sanity CMS
• Blog/news posts with rich text content and images
• Team and program information pages
• Fixtures and scheduling
• AA-compliant accessibility (a11y)
• SEO-friendly architecture
• Type-safe development with TypeScript
• Code quality tooling with ESLint, Prettier, and Husky
• Deployed on Vercel for fast, global delivery

Tooling

• Next.js: React framework for production-grade applications
• Sanity CMS: Headless CMS for flexible content management
• Tailwind CSS: Utility-first CSS framework
• DaisyUI: Tailwind CSS component library
• TypeScript: Type-safe development
• Zod: Schema validation for environment variables
• Prettier: Code formatting
• ESLint: Code linting
• Husky: Git hooks for code quality
• Vercel: Hosting and deployment

Why We Built This

This website serves as the digital home for Williamstown Soccer Club, providing a platform to share information about our teams, programs, and community. Built with modern web technologies, it ensures a fast, accessible, and maintainable solution that can grow with the club's needs.

Developing and Running Locally

To run the site locally, follow these steps:

Prerequisites

• Node.js installed (managed by Mise)
• pnpm
• A Sanity account and project set up

CLI tools

The data CLI uses Playwright. Before running crawl commands, install the browser binaries:

pnpm exec playwright install --with-deps chromium

Install dependencies

pnpm install

Running fixture crawls locally

Fixtures are scraped from Dribl in two stages: crawl (scrapes raw data) then sync (transforms into data/matches/). League and competition names are read automatically from the Fixtures Crawler fields on each Team document in Sanity.

Run for a single team:

pnpm exec dotenv -e .env.local -- tsx bin/wsc.ts crawl fixtures -t under-12-girls
pnpm exec dotenv -e .env.local -- tsx bin/wsc.ts sync fixtures -t under-12-girls

Omit -t to crawl all teams with enableFixturesCrawler enabled in Sanity:

pnpm exec dotenv -e .env.local -- tsx bin/wsc.ts crawl fixtures
pnpm exec dotenv -e .env.local -- tsx bin/wsc.ts sync fixtures

To override league and competition manually (useful before a team is configured in Sanity):

pnpm exec dotenv -e .env.local -- tsx bin/wsc.ts crawl fixtures -t <team-slug> -l "<League Name>" -c "<Competition Name>"

Content Management

Sanity URLs:

• http://localhost:3003/studio
• Sanity cloud

Creating Blog Posts

1. Navigate to http://localhost:3003/studio

Updating Schemas

After modifying Sanity schemas in src/sanity/schema/, run:

pnpm run type:gen

This will update the TypeScript types to match your schema changes.

Deploying Sanity Studio

The Sanity Studio is automatically deployed to production when changes are pushed to the main branch that affect:

• src/sanity/** (schema files)
• sanity.config.ts
• sanity.cli.ts

You can also manually trigger a deployment from the Actions tab in GitHub.

Setup GitHub Deployment

To enable automated deployments, add a Sanity deploy token as a GitHub secret:

1. Generate a deploy token at Sanity Project Settings → API → Tokens
2. Select "Deploy studio" permission
3. Add the token to GitHub: Settings → Secrets and variables → Actions → New repository secret
4. Name it SANITY_AUTH_TOKEN

The studio will be available at https://williamstownsc.sanity.studio

---

Building community through soccer. Feedback and contributions are welcome!