An open API service indexing awesome lists of open source software.

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 👨🏻‍💻⚛️

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.