KL — home, Kachamo Lankamo

Web Platform

NXTGEN Baseball

A cinematic redesign of the NXTGEN Baseball website with a focused event admin: database-backed event pages, a protected dashboard for creating and publishing events, media uploads re-encoded to WebP, and Supabase Auth, row-level security and Storage behind it - Next.js 16 on Netlify, built as an independent concept.

  • Next.js
  • TypeScript
  • React
  • Tailwind CSS
  • Supabase
  • PostgreSQL
  • Netlify
View on GitHub
The NXTGEN Baseball homepage: a batter in a helmet connects with a ball that bursts through shattered glass in green light, beside the headline Who's Nxt? in white and neon green, the line Elite training. Real mentorship. Lasting opportunity., and an Explore NXTGEN button; a bar below reads Train. Mentor. Inspire.

Overview

NXTGEN Baseball is a baseball training organisation with camps, the NXTGEN U development programme and an alumni pathway. This is an independent redesign of its website - a cinematic homepage with the supplied stadium artwork and light scroll and pointer depth - and the part the original lacks: an event system that staff can run themselves. Events carry multiple locations, coaches, schedules, a gallery, uploaded clips and YouTube or Vimeo embeds, and appear on an index, a date-based archive and detail pages. Behind a protected dashboard, staff create, edit, duplicate, publish, unpublish, archive and delete events, replace the featured event and preview drafts while signed in; a media library handles upload, preview and deletion and refuses to remove a file an event still references. Each event is stored as one typed JSONB document with indexed top-level columns, saved atomically by a database function, with a unique index enforcing a single primary feature under concurrent writes. It is a Next.js 16 application in TypeScript and Tailwind CSS with Supabase for Auth, Postgres with row-level security and Storage, configured for Netlify, and a local demo mode that persists to SQLite so the whole admin can be exercised with no hosted services at all.

Engineering highlights

  • Server validation, session checks, origin checks, Supabase row-level security policies, constrained storage and image re-encoding on every upload
  • One atomic event document instead of six partially updated child tables: a database function saves the event and replaces the feature in one step
  • Uploaded images are resized and converted to WebP; files referenced by events or site settings cannot be removed through the application
  • Self-hosted fonts, optimised WebP assets, reduced-motion support, keyboard focus and a mobile navigation dialog; noindex until an official launch is approved
  • Content provenance is recorded: programme names and quotes verified against the official site, photo sources logged, and the Australia 2026 event clearly marked as a demo
  • A contact form with a honeypot, a minimum completion time and a per-email cooldown that returns an honest error rather than a false success when delivery is not configured
← All projectsStart a conversation