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: 19 days 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 (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-28T11:35:02.000Z (19 days ago)
• Last Synced: 2024-10-28T13:56:41.493Z (19 days ago)
• Topics: boilerplate, react, tailwindcss, typescript, vite, vitest, yarn
• Language: JavaScript
• Homepage:
• Size: 291 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 TS typed-recommended configs including React, ReactRefresh, Tailwind plugins

- 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.