shaunsaker / ultimate-react-boilerplate

I’m a React Typescript boilerplate 😛 Set up your next project/prototype with minimal input, so you can do what you do best, build and test amazing new products 🔥

Ultimate React Boilerplate

What is it?

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.

What's in the box?

• 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 and build on every commit thanks to Github Actions

Setup

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

Running

yarn dev

Deployment

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.

Generating Public Assets

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:

1. Update ./public/icon.svg with your logo. It should be a square svg, size does not count in this case 😉
2. Customise ./app.json.
3. 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: