As a developer, I often find myself creating small, specialized tools for various work-related tasks. These might include banner generators, image compressors, or file format converters. While these projects are typically compact, they still benefit from a solid foundation that ensures code quality and maintainability.
The GitHub link of this template is here React-Vite-Shadcn.
Creating these tools usually involves a similar set of steps for my case: setting up a new React project, installing necessary libraries, configuring development tools, and implementing a basic project structure. Repeating this process for each new tool can be time-consuming and prone to inconsistencies. That's why I decided to create a reusable template that provides a solid starting point for these small React-based projects.
React Vite Template
My project template is based on React and Vite. It includes several key elements. At its core is React and to enhance the development experience, I've chosen Vite as the build tool. For UI components, I've opted for Shadcn UI, a collection of re-usable components that speeds up UI development. Lastly, for code quality control, I've opted for Biome.js, a fast, new-generation tool that combines linting and formatting capabilities. new-generation tool that combines linting and formatting capabilities. I also use TypeScript to ensure type safety and code quality. Another tool I'm also experimenting in this template is Lefthook a pre-commit hook manager as alternative to husky/lint-staged. For routing I'm using Tanstack Router.
Why These Tools?
The selection of these libraries and tools was deliberate and aimed at optimizing the development process as quick as possible but still leave room for future improvements and customizations. My thought process for choosing these libraries and tools was the following:
- React's component-based architecture is perfect for creating modular, reusable UI elements.
- Vite offers lightning-fast hot module replacement (HMR) and optimized builds, which I really like as it allows for rapid development and iteration.
- Shadcn UI provides a set of customizable, accessible components that can be easily styled and integrated, saving significant development time.
- Biome.js replaces the traditional ESLint + Prettier setup with a single, fast tool. While it's relatively new, it promises to streamline the code quality control process. optimized builds, which is crucial for rapid development and iteration.
- TypeScript for some might be an overkill, but I like to have it in any project I build. It ensures type safety and code quality which is good to have in the future when I need to jump in and out of the project.
- Lefthook for pre-commit hook management to make sure that I don't forget to run my linting and formatting tools on commit. I like that it is less setup and configuration and more "just work" than husky/lint-staged, however I'm still not sure if I've configured it properly and will see how the future holds for it.
- Tanstack Router for routing. The projects are going to be small and simple, so I don't need routings that are in fullblown frameworks like Next.js or Remix, with server side routing, rendering, and all that. However the router can also be expanded to support SSR if I'm reading correctly, so it will be there if I need it.
As I use this template for future projects, I aim to refine it based on my usages. This includes fine-tuning the Biome.js configuration as I discover what works best in practice. I also hope to uncover and document best practices for the toolsets I've chosen, Hopefully it can benefit anyone who found this.
How to use this template
To get started with this template:
- Clone the repository:
git clone https://github.com/indralukmana/react-vite-shadcn.git - Install dependencies:
pnpm install - Start the development server:
pnpm dev
Let's code! 👨💻