After years of maintaining React Starter Kit and watching the JavaScript ecosystem evolve, I've decided to completely overhaul the project with a new tech stack that reflects where web development is heading in 2025.
This wasn't a casual weekend refactor. Every single technology choice was carefully evaluated based on real-world performance, developer experience, and long-term sustainability. Here's what changed and why.
The Old Stack vs The New
Before:
- Material-UI for components
- Custom routing solution
- Yarn package manager
- Firebase/Firestore database
- Express-style backend
- CSS-in-JS with Emotion
After:
- ShadCN UI + Tailwind CSS v4
- TanStack Router
- Bun runtime and package manager
- Cloudflare D1 + Drizzle ORM
- Hono framework with tRPC
- Utility-first CSS
Why These Changes Matter
Bun: Beyond Just Speed
Everyone talks about Bun being fast, but that's only part of the story. What sold me was the unified toolchain experience. Instead of juggling npm/yarn + node + various build tools, Bun handles everything from package management to running TypeScript files directly.
The real game-changer? No more package-lock.json conflicts during team development. Bun's lockfile is actually readable, and installation is consistently fast across different machines and CI environments.
# Before: Multiple tools
npm install
node --loader tsx src/server.ts
npx tsx build.ts
# After: One tool
bun install
bun run src/server.ts
bun run build.ts
ShadCN UI: Own Your Components
Material-UI served us well, but I grew tired of fighting with component customization. Need a button that looks slightly different? Good luck overriding those nested CSS classes.
ShadCN UI flips this model. Instead of installing a massive component library, you copy the exact components you need into your codebase. Want to modify the Button component? Just edit the file. No more wrestling with theme overrides or CSS specificity wars.
The components are built on Radix UI primitives, so you still get accessibility and behavior handled correctly, but the styling is completely under your control.
TanStack Router: Type Safety Meets Simplicity
React Router has been the standard for years, but TanStack Router brings something revolutionary: complete type safety for your entire routing system.
// This is all type-safe, including params and search
export const Route = createFileRoute("/dashboard/$orgId")({
component: Dashboard,
loader: async ({ params }) => {
// params.orgId is typed automatically
return fetchOrganization(params.orgId);
},
validateSearch: z.object({
tab: z.enum(["overview", "members", "settings"]).optional(),
}),
});
File-based routing means your route structure matches your folder structure. No more maintaining separate route configurations that drift out of sync with your actual pages.
Cloudflare D1 + Drizzle: Edge-Native Database
Firebase was fine for prototyping, but the vendor lock-in and pricing model became problematic for serious applications. D1 gives you a real SQL database that runs at Cloudflare's edge locations worldwide.
Drizzle ORM deserves special mention here. Unlike Prisma, which generates a massive client that can't run at the edge, Drizzle is lightweight and edge-compatible. The query syntax feels natural if you know SQL, but you get full TypeScript safety.
// Drizzle queries are just functions
const users = await db
.select()
.from(user)
.where(eq(user.organizationId, orgId))
.limit(10);
Tailwind CSS v4: Zero Runtime, Maximum Performance
I'll admit, I was skeptical of Tailwind for years. It looked like inline styles with extra steps. But after building several projects with it, the productivity gains are undeniable.
Version 4 addresses my biggest concern: runtime performance. The new CSS-in-JS engine has zero runtime overhead while still giving you dynamic styling capabilities.
/* Tailwind v4 with CSS variables */
@theme {
--color-primary: #0f172a;
--color-primary-foreground: #f8fafc;
}
[data-theme="dark"] {
--color-primary: #f8fafc;
--color-primary-foreground: #0f172a;
}
The best part? You stop context-switching between CSS files and components. The styles are co-located with the markup, making components easier to understand and maintain.
Hono + tRPC: The Perfect API Stack
Express has been around forever, but it wasn't built for modern deployment targets like Cloudflare Workers. Hono is designed from the ground up for edge runtimes while maintaining familiar patterns.
Combined with tRPC, you get end-to-end type safety without code generation. Change your API schema, and TypeScript immediately tells you everywhere in your frontend that needs updating.
// Backend
export const userRouter = router({
me: protectedProcedure.query(async ({ ctx }) => {
return getUserById(ctx.session.userId);
}),
});
// Frontend - fully typed
const { data: user } = api.user.me.useQuery();
// ^? User | undefined
Performance Improvements
The numbers speak for themselves:
- Build times: 3x faster with Bun + Vite
- Bundle size: 40% smaller with tree-shaking and ShadCN components
- Cold start: Sub-100ms with Cloudflare Workers
- Database queries: 60% faster with edge-located D1
But beyond raw performance, the developer experience improvements are where this stack really shines.
Migration Path
This is essentially a v2.0 release. If you're using the old stack, you don't need to migrate immediately. But for new projects, I'd recommend starting with this modern foundation.
The learning curve isn't steep if you're already familiar with React. Most concepts translate directly:
- React components work the same way
- State management with Jotai is simpler than Redux
- TanStack Router feels familiar if you've used file-based routing
- Tailwind classes are self-explanatory
What's Next
This refactor positions React Starter Kit for the next phase of web development. Edge computing isn't a future trend—it's happening now. Global latency matters more than ever, and users expect sub-second page loads regardless of where they're located.
The tools in this stack are all designed with edge deployment in mind. They're lightweight, fast, and compatible with modern serverless platforms.
I'm excited to see what the community builds with this foundation. The old stack served us well, but it's time to embrace the future of web development.
Try out the new React Starter Kit at github.com/kriasoft/react-starter-kit.
What do you think about these technology choices? Have you tried any of these tools in your own projects? Let me know in the comments below.
Top comments (0)