https://github.com/albertoblaz/ts-boilerplate
Boilerplate repo for web development with React, Typescript, Tailwind and Vite 👨🏻💻⚛️
https://github.com/albertoblaz/ts-boilerplate
boilerplate react tailwindcss typescript vite vitest yarn
Last synced: 3 months ago
JSON representation
Boilerplate repo for web development with React, Typescript, Tailwind and Vite 👨🏻💻⚛️
- Host: GitHub
- URL: https://github.com/albertoblaz/ts-boilerplate
- Owner: albertoblaz
- License: mit
- Created: 2024-08-30T14:06:41.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T16:28:35.000Z (9 months ago)
- Last Synced: 2025-02-08T18:33:29.145Z (5 months ago)
- Topics: boilerplate, react, tailwindcss, typescript, vite, vitest, yarn
- Language: JavaScript
- Homepage:
- Size: 496 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-boilerplate
Pre-configured repo for Frontend development with my favorite tooling.
## Tooling
- `node` v22.5.1 controlled with `asdf`
- `react` v18.3.1
- `typescript` and Matt Pocock's `ts-reset`
- `classnames` to conditionally apply styling via CSS classes
- `tailwindCSS`
- PostCSS, with these plugins:
- `postcss-import`: to inline at-import rules content
- `tailwindcss`
- `postcss-preset-env`: to apply plugins when CSS code is not supported based on MDN/CanIUse data and browserslist config. It includes Autoprefixer under-the-hood and adds prefixes when needed
- `browserslist`
- `vite`, configured with tsconfig-paths and browserslist config
- `vitest` for testing, including `@testing-library/react` and other packages
- `prettier` with Tailwind plugin
- `eslint` with **strict TS typed-recommended configs**, including these plugins:
- `eslint-plugin-react`
- `eslint-plugin-react-hooks`
- `eslint-plugin-react-refresh`
- `eslint-plugin-tailwindcss`
- `eslint-plugin-jsx-a11y`
- `eslint-plugin-compat`
- `eslint-plugin-import`
- Github Action to deploy on Fly.io## SVG Icon Sprite
The repo is already setup to deliver a single SVG sprite, located at `assets/icons/sprite.svg`.
New icons can be wrapped with `` tags and pasted into the sprite. Then, the `scripts/gen-icon-types.ts` script parses the icons and generates a union type at `app/components/icon/icon-types.ts` with all ids found.
This leads to a type-safe React `` component that is performant and fully compatible with all modern browsers.