Iโm a React Typescript boilerplate with a WIP backend baked in (thanks to Supabase) ๐ Set up your next project/prototype with minimal input, so you can do what you do best, build and test amazing new products ๐ฅ
You can see me in action here.
- Typescript
- React
- jotai for state ๐ป
- styled-components for styling ๐
- react-router-dom with preconfigured Router ๐ธ
- vite for development โก๏ธ
- prettier for consistent formatting ๐จ
- eslint for linting ๐ต๏ธโโ๏ธ
- vitest for testing โก๏ธ
- react-testing-library for integration testing ๐
- staged linting, thanks to husky and lint-staged ๐ซ๐ฉ
- @fontsource for custom fonts โ๏ธ
- vite-plugin-svgr for svg support.
- a CI running
lint
,test
andbuild
on every commit thanks to Github Actions
OBVIOUS NOTE: Replace "PROJECT_NAME" with your own project's name ๐
git clone https://github.com/shaunsaker/ultimate-react-boilerplate.git PROJECT_NAME
cd PROJECT_NAME
yarn
rm -rf .git && git init && git add . && git commit -m "init" # reset git and commit
npm pkg set name="PROJECT_NAME" # change package.json name
yarn dev
I'd recommend using Netlify for deployment and connecting the site to your Github repo so that new deploys are triggered on every push to master
.
After spending many hours building an app, I've found that having to manually generate public assets is one of the most annoying things ever! So I created a script to do this for you ๐ All you need to do is:
- Update
./public/icon.svg
with your logo. It should be a square svg, size does not count in this case ๐ - Customise
./app.json
. - Run the script:
yarn ts-node ./scripts/generateAssets
And boom ๐ฃ๐, you have all the public assets you'll need, optimised and including a PWA setup ๐โ
Here it is in action: