darkroomengineering / satus

App router Next.js starter template

Introduction

Satūs means start, beginning, planting, to be used as a template when starting a new project.

Composition

This starter kit has an opinionated setting using the following:

• Next.js App router
• react-three-fiber
• Lenis
• Theatre.js
• GSAP | See Documentation
• Hamo
• Storyblok | See Documentation
• Shopify
• SERVER MONO Open Source font
• SVG import through @svgr/webpack
• Sass architecture and tooling:
  • Config file
  • Viewport based sizes
  • Reset
  • Easings
  • Themes
• Debug tools:
  • Theatre.js Studio @theatre/studio
  • FPS Meter
  • Grid Debugger
• Github workflow to display lighthouse report on slack: make sure you update the vercel_project_id in .github/workflows/lighthouse-on-vercel-preview-url.yml to your Vercel project id.

Docs

There is a docs folder with documentation on how to use tools such as GSAP and Storyblok at Darkroom. There is also a HOW-TO.md file serving as a catch-all file for any other tools or processes that are too straigthforward to warrant a full documentation file.

See Storybook

Going Live

To deploy your project you can use Vercel, Netlify, or any other service that supports Next.js. there is a PROD-README.md file expanding on the specifics of the deployed project, when going live don't forget to replace this README with the Production one.

Debug

To toggle debug modes you need to access the page /debug/orchestra.

example: https://satus.darkroom.engineering/debug/orchestra

Authors

This set of hooks is curated and maintained by the darkroom.engineering team:

• Clément Roche (@clementroche_) – darkroom.engineering
• Guido Fier (@uido15) – darkroom.engineering
• Leandro Soengas (@lsoengas) - darkroom.engineering
• Fermin Fernandez (@Fermin_FerBridd) - darkroom.engineering
• Felix Mayr (@feledori) - darkroom.engineering
• Franco Arza (@arzafran) - darkroom.engineering

License

The MIT License.