Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/albertsmit/werkplaats
Every Smit needs a Werkplaats. 😉
https://github.com/albertsmit/werkplaats
Last synced: about 1 month ago
JSON representation
Every Smit needs a Werkplaats. 😉
- Host: GitHub
- URL: https://github.com/albertsmit/werkplaats
- Owner: AlbertSmit
- Created: 2022-08-14T11:17:53.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2022-08-14T18:25:20.000Z (over 2 years ago)
- Last Synced: 2024-11-07T20:08:08.796Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 333 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```ts
.
├── /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](https://github.com/vitejs/vite)** | Bundle-less development, great support for TypeScript, CSS Modules, and zero-config development builds. |
| **[React](https://reactjs.org/)** | What can I say. It's React, with TypeScript. |
| **[Husky](https://github.com/typicode/husky)** | Committable git-hooks, so we can format and lint the codebase on commits and pushes. |
| **[Prettier](https://prettier.io/)** + **[ESLint](https://eslint.org/)** | The iconic duo. Keep your files tidy, sorted, and clean. |
| **[SASS](https://github.com/sass/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](https://elad2412.github.io/the-new-css-reset/)** | The great reset we all know and need; modernised. |
| **[useSWR](https://swr.vercel.app/)** | 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](https://www.framer.com/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](https://github.com/pmndrs/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`](https://github.com/immerjs/immer) for easy updates to nested state objects. |