Werkplaats

Every Smit needs a Werkplaats.

---

Features

• 🔑 Fully typed.
• ⚡ Fast.

Commands

Command	Function
yarn	Install all dependencies
yarn dev	Spin up the development server
yarn build	Make a production build.

Structure

.
├── /env                // Environment is housed here.
├── /public             // Public assets (that never change)
└── /src
    ├── /assets         // Static assets that have to be hashed
    ├── /common         // Default (and shared) Vite components.
    ├── /components     // Place to put your components.
    ├── /routes         // Routes can go here.
    ├── /definitions    // All TypeScript .d.ts files go here
    ├── /utilities      // Store utilities, like e.g. build utils.
    └── /styles         // Place to put your CSS tokens.

Dependencies

Dependency	Reasoning
Vite	Bundle-less development, great support for TypeScript, CSS Modules, and zero-config development builds.
React	What can I say. It's React, with TypeScript.
Husky	Committable git-hooks, so we can format and lint the codebase on commits and pushes.
Prettier + ESLint	The iconic duo. Keep your files tidy, sorted, and clean.
SASS	To make life with CSS Modules easier, and be able to nest selectors. Use in combination with CSS Variables for maximum scalability and minimal dependency.
The New CSS Reset	The great reset we all know and need; modernised.
useSWR	A great addition to 'just' fetch, with caching and error-handling included. The cache actually works out-of-the-box, no additional configuration required.
Framer Motion	Great for simple animations. It's a tad bit large, but with lazy loading, tree-shaking, and opting in for the most minimal animations-bundle, we can bring the initial size down to 5kb.
zustand	Used to replace React Context API. It's easier to use and has less boilerplate. It's also under 1kb, so hardly has any bad effects on the bundle size. Used in combination with Immer for easy updates to nested state objects.