I often find myself building little tools to help with my daily tasks: things like banner generators, image compressors, or file format converters. These projects are usually small and simple, but they still need a solid foundation. The problem is that setting everything up from scratch every single time is exhausting, and it usually leads to inconsistent configurations between projects.
So, I decided to just build a template I can reuse. You can check it out on GitHub here: React-Vite-Shadcn.
The core of this template is React with Vite. For the UI, I'm using Shadcn UI so I don't have to rebuild components from scratch every time. To keep the code quality in check, I'm trying out Biome.js, a tool that handles both linting and formatting in one fast package. I’ve also included TypeScript, Tanstack Router for navigation, and I'm currently experimenting with Lefthook as a replacement for Husky to manage pre-commit hooks.
You might wonder why I chose this specific stack.
Honestly, it mostly comes down to speed. Vite makes development feel incredibly fast thanks to its HMR. Shadcn UI is a huge help because the components are so easy to customize. As for Biome.js, it's still relatively new and has its downsides too, but it feels much more practical to me than managing ESLint and Prettier separately.
Regarding TypeScript: yeah, it can feel like overkill for small projects, but I prefer having it. It helps me catch type errors early, so when I come back to a project months later, I'm not totally lost. Same goes for Lefthook; I want to make sure the code hitting my repo is clean via pre-commit hooks, even if I'm still figuring out if my configuration is exactly right.
For routing, I went with Tanstack Router. Since most of my projects are small, I don't feel the need for a heavy framework with server-side rendering like Next.js or Remix. But if things get more complex later on, this router can still scale.
Of course, this template isn't perfect. As I use it for future projects, I'll definitely keep refining it, especially getting the Biome.js configuration dialed in for real-world use.
If you want to try it out:
- Clone the repo:
git clone https://github.com/indralukmana/react-vite-shadcn.git - Install dependencies:
pnpm install - Start the server:
pnpm dev
Not everything needs to be perfect from the start. Sometimes, you just need a decent starting point so you aren't wasting time on the same repetitive setup over and over.
Back to the editor.