PROD-README.md

[PROJECT]

Setup:

The usual process for Next.js based apps/websites:

1. Install node modules:

   $ pnpm i

2. Get the .env variables from Vercel (check .env.template), after installing Vercel CLI:

   $ vc link

   $ vc env pull

3. run development environment:

   $ pnpm dev

Stack:

• PNPM
• Next.js
• Three.js
• @react-three/drei
• @react-three/fiber
• Theatre.js (Animation tooling)
• Storyblok (CMS)
• Shopify (E-commerce)
• CSS Modules with PostCSS custom settings (check postcss.config.mjs)
• Biome (Linting & Formatting)
• Husky (Git hooks)
• Storybook (Component development)

Code Style & Linting:

• Lefthook
• Biome

Third Party (optional tools):

• Vercel (Hosting & Continuous Deployment)
• GitHub Versioning
• Storyblok CMS
• Shopify

Folder Structure:

Alongside the usual Next.js App Router folder structure (/public, /app, etc.) We've added a few other folders to keep the code easier to read:

• /components: Reusable components with their respective CSS modules
• /app/(pages): Page components and layouts
  • /r3f: Three.js/React Three Fiber components
• /libs: Core functionality and integrations
  • Storyblok integration
  • Shopify integration
  • Theatre.js integration
  • WebGL utilities