Technology Stack

// next.config.js
export default {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true
  }
}

"packageManager": "[email protected]",
"engines": {
  "node": "24.14.x"
}

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Click me
</button>

import { cva } from 'class-variance-authority'

const button = cva('rounded-lg px-4 py-2', {
  variants: {
    intent: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300'
    }
  }
})

import { useQuery } from '@tanstack/react-query'

const { data, isLoading } = useQuery({
  queryKey: ['organizations'],
  queryFn: fetchOrganizations
})

import { create } from 'zustand'

interface Store {
  user: User | null
  setUser: (user: User) => void
}

const useStore = create<Store>((set) => ({
  user: null,
  setUser: (user) => set({ user })
}))

// Auto-generated, fully typed
import { useGetOrganizationQuery } from '@repo/codegen/src/schema'

import { LineChart } from '@repo/ui/line-chart'

<LineChart 
  data={data} 
  xKey="date" 
  yKey="value" 
/>

[
  "@vercel/style-guide/eslint/node",
  "@vercel/style-guide/eslint/typescript",
  "@vercel/style-guide/eslint/react"
]

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

"scripts": {
  "test": "jest"
}