In the last six years of making front-end at startups and for my apps, I had to start quite a few React projects from scratch. In this video, I want to share a setup I'm currently using so you can find interesting bits for your new project. I'm using NextJS for most cases, except if it's a tool or a web3 app that won't have much content, then CRA will be enough. Then I go to the radzionkit repo and copy the lib directory. It has components, hooks, and utils that most front-end apps would need. When you work with specific technology for years, you start noticing patterns you can extract and use in other projects. That's how I build up radzionkit. Once I see a component that doesn't drug the business logic of the current project and might be helpful in other situations, I would copy it to the lib folder.
The most prominent part of the toolkit is the UI folder with all kinds of components, ranging from Text and Buton to Combobox and Countdown. These components support dark and light modes, similar to Notion's color palette. Then we have a setup for managing local storage, small hooks, and utils.
I don't use libraries for managing state since react-query takes care of the state coming from the server, and React's context is good enough for the app's state. For analytics, I use Amplitude, and to track errors - Sentry.
The easiest way to deploy both NextJS and a SPA React would be Vercel. It would take care of continuous deployment, hosting, and image optimization for NextJS projects. Yet if it's a fully static website, and I don't want to overpay for Vercel, I would go with my old terraform config for hosting a single page application on S3 and CloudFront.