Skip to content

Latest commit

 

History

History
52 lines (41 loc) · 4.88 KB

README.md

File metadata and controls

52 lines (41 loc) · 4.88 KB
Raw

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.