Website Template
How a Single Template Cut Project Setup from Weeks to Hours
En bref
Défi
Repetitive project scaffolding with inconsistent conventions
Résultat
Launch-ready projects in hours with 56 pre-built UI components
Technologies
Statut
Production
Situation
Every new frontend project — whether a portfolio, marketing site, or SaaS landing page — required the same tedious setup: configuring Next.js with App Router, wiring Tailwind CSS, installing UI primitives, setting up SEO metadata generators, and writing Docker deployment configs. Each project started with days of boilerplate work, and across multiple projects, conventions drifted: folder structures diverged, linting rules varied, and deployment setups were inconsistent.
Le défi
Build a production-grade, opinionated starter template that eliminates repetitive setup decisions while enforcing consistent quality standards — so new projects start with the same architecture, linting, SEO tooling, and deployment pipeline from day one.
Ce qui a été construit
Architected the template on Next.js 16 with React 19 and TypeScript, using the App Router pattern for modern server/client component separation.
Integrated 56 atomic UI components from shadcn/ui built on Radix primitives, providing accessible, composable building blocks out of the box.
Added Jotai for lightweight atomic state management with persistent storage support, plus a pre-built shopping cart UI and Cmd+K command menu.
Built comprehensive SEO infrastructure: dynamic sitemaps, robots.txt, JSON-LD structured data, and Open Graph metadata — all auto-generated from page data.
Created multi-stage Docker builds optimized for Next.js standalone output (~150-200MB images), with non-root security hardening, health checks, and resource limits.
Published as a one-command scaffold via npx foxmayn-cli, so new projects inherit the full stack instantly.
Résultats
Setup time
1-2 weeks
2-3 hours
Pre-built components
56 UI components
Docker image size
~150-200MB (optimized)
SEO tooling
Sitemap + robots + JSON-LD + OG tags
New projects now ship with consistent architecture, enforced code quality, complete SEO tooling, and production-ready Docker deployment — eliminating the setup drift that previously caused integration issues across projects.
Réalisation clé
Reduced initial setup time from weeks to a few hours while keeping launch-ready quality checks consistent across new projects.