Get Started

How to download, install, and start using the component framework.

1. Quick Start

The fastest way to get started — scaffold a new project with a single command.

npx create-turmerrific-starter-kit my-app
cd my-app
yarn install
yarn dev

Open http://localhost:3000 to see your app.

2. Or Clone from GitHub

Alternatively, clone the full repository to get all components, pages, and configurations.

git clone https://github.com/erikyuntantyo/turmerrific.git
cd turmerrific
yarn install
yarn dev

3. Scripts

Available commands for development, building, and code quality.

yarn dev            # Start dev server
yarn build          # Production build
yarn start          # Start production server
yarn lint           # Run ESLint
yarn format         # Format with Prettier
yarn format:check   # Check formatting

4. Project Structure

The template uses a feature-based folder structure.

src/
├── app/                    # Routes (layout, pages, API)
├── features/
│   ├── auth/services/      # Authentication service
│   └── profile/components/ # ProfileHero, SkillsGrid, ExperienceList, EducationGrid, OpportunityCard
├── shared/
│   ├── ui/                 # Button, Card, Modal, Badge, Input, Label, Table, Tag, Toast, etc.
│   ├── layout/             # Header, Footer
│   ├── hooks/              # use-theme.ts
│   ├── config/             # site.config.ts
│   └── utils/              # cn() helper
├── server/
│   ├── auth/               # JWT, cookies, rate limiting, route guards
│   ├── seo/                # Metadata generation
│   └── logging/            # Structured logger
├── content/
│   └── about.mdx           # About page content (edit this)
└── proxy.ts                # Route protection (Next.js 16 convention)

5. Customization

Key files to personalize turmerrific for your project.

ThemeEdit src/app/globals.css to change colors (oklch format)

ContentEdit src/content/about.mdx to update the About page

ConfigEdit src/shared/config/site.config.ts for site identity, social links, SEO

6. Use a Component

Every example is filled with placeholder content — names, stats, nav items, table rows, FAQ entries. That data is what you change; the markup stays. Open the "Code" tab and the editable data sits at the top (a typed array or props), with the layout below it — swap the values for yours and the component updates. The live preview is the target you're editing toward.

For a whole page, you compose several components together. The admin dashboard in the live demo is the worked example — a Sidebar + Header shell around tables, tabs, and stat cards. Mirror how it wires the pieces, then replace its demo data with your own.

7. Switching Between CSR and SSG

Components can run as Client-Side Rendered (CSR) or Static Site Generated (SSG) depending on how you use them in your Next.js app.

SSG (Default)

Pages are pre-rendered at build time. Remove the "use client" directive and keep the component as a Server Component.

1 // app/about/page.tsx (SSG — Server Component)
2 import About from "@/content/about.mdx";
3 
4 export const dynamic = "force-static";
5 
6 export default function AboutPage() {
7   return <About />;
8 }

CSR (Client-Side)

Add "use client" at the top of the file to enable client-side interactivity such as useState, useEffect, and event handlers.

1 // shared/ui/theme-toggle.tsx (CSR — Client Component)
2 "use client";
3 
4 import { useState, useEffect } from "react";
5 
6 export function ThemeToggle() {
7   const [theme, setTheme] = useState<"light" | "dark">("light");
8 
9   useEffect(() => {
10     document.documentElement.classList.toggle("dark", theme === "dark");
11   }, [theme]);
12 
13   return (
14     <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
15       {theme === "light" ? "🌙" : "☀️"}
16     </button>
17   );
18 }

Tip: Keep pages as Server Components (SSG) whenever possible for better performance and SEO. Only add "use client" when the component needs browser APIs or interactive state. You can also mix both by wrapping only the interactive parts in a Client Component.

Enjoying Turmerrific?

If this starter kit saved you time, star the repo on GitHub — it helps others find it.

1	// app/about/page.tsx (SSG — Server Component)
2	import About from "@/content/about.mdx";
3
4	export const dynamic = "force-static";
5
6	export default function AboutPage() {
7	return <About />;
8	}

1	// shared/ui/theme-toggle.tsx (CSR — Client Component)
2	"use client";
3
4	import { useState, useEffect } from "react";
5
6	export function ThemeToggle() {
7	const [theme, setTheme] = useState<"light" \| "dark">("light");
8
9	useEffect(() => {
10	document.documentElement.classList.toggle("dark", theme === "dark");
11	}, [theme]);
12
13	return (
14	<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
15	{theme === "light" ? "🌙" : "☀️"}
16	</button>
17	);
18	}