jamesvclements / sf-website

our studio website, open source.

Studio Freight Website

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

• Lenis
• Hamo
• PNPM
• Next.js
• Sass (Modules)
• Zustand
• React Hook Form
• GraphQL (CMS API)
• Next-Sitemap (postbuild script)
• @svgr/webpack (SVG Imports in next.config.js)

Code Style & Linting

• Eslint (Next and Prettier plugins)
• Prettier with the following settings available in .pretierrc:

  {
    "endOfLine": "auto",
    "semi": false,
    "singleQuote": true
  }

• Husky + lint-staged precommit hooks

Third Party

• Contentful Headless CMS (GraphQL API)
• Hubspot CRM
• Vercel (Hosting & Continuous Deployment)
• GitHub Versioning

Folder Structure

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

• /assets: General Images/Videos and SVGs
• /components: Reusable components with their respective Sass file
• /contentful: Fragments/Queries/Renderers
• /config: General settings (mostly Leva for now)
• /hooks: Reusable Custom Hooks
• /layouts: High level layout component
• /lib: Reusable Scripts and State Store
• /styles: Global styles and Sass partials