Kitstarter

My personal starter repo, created through an integration of the Turborepo + Next.js (with-tailwind) template and Steven Tey's Precedent starter.

Contents & Tech Stack

This starter assumes use of:

• Next.js as a React framework
• pnpm as a package manager
• Turborepo as a build system
• Vercel for automated deployment & hosting

Monorepo apps

• basic: a Next.js app that uses CSS modules (deploys on port 3000, uses ui-basic (with tsup))
• tailwind: a Next.js app that uses Tailwind CSS (deploys on port 3001, uses ui-tailwind)
• combo-css-1: example app that uses a combination of CSS modules and Tailwind (deploys on port 3002, uses integrated ui)
• (coming soon): combo-css-2: example app that uses CSS modules, but whose stylesheets import Tailwind classes when possible (deploys on port 3003, uses ui-combo)
• (coming soon): cva: example app that uses CVA? (deploys on port 3004, uses ui-cva)

Local packages (for now, sourced from Turborepo)

• ui: a stub React component library with Tailwind CSS, shared by both web and docs applications
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

NPM packages

Code Quality

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Database

• (coming soon) Prisma ORM- Typescript-first ORM
• (coming soon) Vercel Postgres - serverless Postgres at the Edge

UI

• Tailwind CSS for styles
• (coming soon) Radix - React component libary
• (coming soon) Lucide Icons - open-source icon library
• (coming soon) next/font - font optimization
• (coming soon) ImageResponse - dynamic OG images at the edge
• (coming soon) one or more of the following animation libraries:
  • Framer Motion - motion library for React
  • React Spring - spring-physics React animation library
  • Renature - archived project that I may still want to pull from; see gallery

Hooks & helper functions (most by Steven Tey, descriptions copied from the Precedent README)

• all coming soon:
  • useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
  • useLocalStorage – Persist data in the browser's local storage
  • useScroll – React hook to observe scroll position (example)
  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • capitalize – Capitalize the first letter of a string
  • truncate – Truncate a string to a specified length
  • use-debounce – Debounce a function call / state update

Other templates and resources to keep in mind

• WebGL gradient
• On-demand ISR
• Vercel Analytics
• select features & config from the Next.js Enterprise Boilerplate template

A note on building packages/ui (adapted from the Turborepo with-tailwind starter) README

This example is setup to build packages/ui and output the transpiled source and compiled styles to dist/. This was chosen to make sharing one tailwind.config.ts as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update your tailwind.config.ts to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in packages/tailwind-config/tailwind.config.ts:

  content: [
    // app content
    "src/**/*.{js,ts,jsx,tsx,mdx}",
    // include packages if not transpiling
    "../../packages/**/*.{js,ts,jsx,tsx,mdx}",
  ],

More on Turborepo (adapted from the Turborepo basic starter README)

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. Assuming you have an account, run pnpm dlx turbo login from the root of your reposity to authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

pnpm dlx turbo link

Useful Turborepo Links

• Tasks
• Caching
• Filtering
• Configuration Options
• CLI Usage