Documentation

Build, customize, and ship PlayBase with confidence.

A practical guide for setting up the template, editing sport center content, changing assets, and preparing the project for a polished UI8 upload or client delivery.

Start setup View routes

Install

Run the local setup and start the Next.js dev server.

Structure

Understand where pages, components, data, and assets live.

Customize

Edit brand, routes, images, copywriting, and template data.

Deploy

Build the project and prepare it for production delivery.

On this page

Jump between setup, structure, customization, and launch notes.

Getting started

Install locally and run the development server.

PlayBase is built with Next.js App Router, React, Tailwind CSS, shadcn components, Motion, and local TypeScript data files.

Requirements

Use a modern Node.js runtime and Bun for the smoothest setup.

Node.js 20 or newer.
Bun installed on your machine.
A local editor with TypeScript support.

Quick setup

Install dependencies, then open the local URL from your terminal.

bun install
bun run dev

bun install

Install project dependencies.

bun run dev

Start the local development server.

bun run lint

Run ESLint checks.

bun run typecheck

Validate TypeScript types.

bun run build

Create the production build.

Project structure

Find the files you need without hunting around.

The template keeps content, routes, and reusable sections close to the surfaces they control.

app/

Next.js App Router pages, metadata, and route groups.

components/

Reusable sections, layout components, sliders, and shadcn UI.

lib/courts.ts

Court data used by listing, detail, and checkout pages.

lib/clubs.ts

Open Play session data used by club listing and detail pages.

public/

Logo, brand logos, OG image, and WebP sport facility images.

Routes

Pages are ready for booking, clubs, and membership.

Use these routes as-is for the demo, or rename them to match a client project.

/

Home

Landing page with hero, courts, clubs, gym/trainer, events, reviews, CTA, and footer.

/courts

Courts

All court and facility cards with booking entry points.

/courts/[slug]

Court Detail

Court booking detail page with date, time, unit, and reviews.

/clubs

Open Play

Community sessions for players who want to join shared games.

/clubs/[slug]

Open Play Detail

Session detail page for schedule, host, players, and join flow.

/price

Membership

Plans, comparison table, FAQ, and membership CTA.

/checkout/court

Court Checkout

Checkout flow for court rental bookings.

/checkout/open-play

Open Play Checkout

Checkout flow for joining community sessions.

/checkout/membership

Membership Checkout

Checkout flow for monthly plan subscription.

Customize

Replace content while keeping the design system intact.

Most changes should happen in data files, page copy, and assets. Keep component styling aligned with the existing shadcn setup.

Update the logo in public/logo.svg and public/logo-light.svg.

Edit court details, prices, amenities, and slugs in lib/courts.ts.

Edit Open Play session content, hosts, levels, and schedules in lib/clubs.ts.

Replace photos in public/courts with optimized WebP assets.

Adjust global SEO metadata in app/layout.tsx.

Use existing shadcn components before creating new styling patterns.

Components

Reuse the sections already built for sport center flows.

The main experience is composed from focused components so each page can stay readable.

SiteHeader

Classic header with logo, links, auth buttons, and mobile sheet.

SiteFooter

Dark footer with newsletter, navigation, and animated brand lockup.

CourtBookingPanel

Booking controls for date, time, court unit, and checkout handoff.

GallerySlider

Draggable image gallery used for sport center media.

TestimonialsSlider

Auto-moving review cards with soft edge fade.

CheckoutForm

Reusable checkout summary and payment method surface.

Deploy

Run final checks before handing off the template.

This checklist helps keep the project clean for a marketplace upload, preview deployment, or client delivery.

Production checklist

Confirm the basics before publishing.

Run lint, typecheck, and build before packaging.

Set NEXT_PUBLIC_SITE_URL to the final demo or production URL.

Keep image assets optimized as WebP where possible.

Check all checkout flows with realistic query parameters.

Review metadata, OpenGraph image, and page titles.

Useful references

Official docs for the core tools used in PlayBase.

Next.js shadcn Tailwind CSS Motion

Ready to edit

Keep changes focused, reuse components, and ship the polished demo.

Back to home