abhay-rana

abhay-rana

Create-modern-react — production-ready React 19 + TypeScript + Tailwind + shadcn in 15 seconds

Bit of a personal itch-scratch post — curious if anyone else runs into the same thing.

Every time I kick off a new React project I end up doing the same hour of setup: wire TypeScript strict mode, add Tailwind, pick a UI library, set up routing, build an API layer, configure ESLint, add path aliases… It’s not hard, just boring. And I kept making slightly different decisions each time, so projects never felt consistent.

So I spent some weekends building a CLI that does all of that for me: create-modern-react

npx create-modern-react my-app
cd my-app
yarn dev

The defaults I landed on after a few real projects:

  • React 19 + TypeScript 5.9 strict
  • Vite with SWC (noticeably faster than Babel for larger codebases)
  • Tailwind CSS 4
  • shadcn/ui for components (Button, Input, Card, Skeleton already wired)
  • Wouter for routing — it’s 2KB vs React Router’s much larger bundle, and I’ve found it covers 95% of what I need
  • Axios with a typed wrapper so API calls look like getApi<User[]>('/users') instead of raw fetch wrangling
  • React Hot Toast, Error Boundary, and ~/ path aliases included

A few hooks I kept copy-pasting between projects are baked in too: useLoader, useDebounce, useCancelToken.

During setup the CLI asks if you want Redux Toolkit, React Hook Form + Zod, Ant Design instead of shadcn, or Husky for git hooks. Nothing gets added unless you ask for it.


I’ve used it as the base for a couple of my own projects now (a resume builder and an e-commerce frontend) and it’s held up well. But I’m aware my defaults are just my defaults — other people’s setups will differ.

Curious what you all think:

  • Is Wouter a dealbreaker for you, or do you default to React Router anyway?
  • Any obvious gaps in that stack that you always end up adding yourself?
  • Would you swap anything out?

GitHub if you want to poke around:

Happy to answer questions or take suggestions — it’s MIT and still pretty early.

Where Next?

Popular Frontend topics Top

First poster: bot
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over...
New
First poster: bot
SixtyFPS is a toolkit to efficiently develop fluid graphical user interfaces for any display: embedded devices and desktop applications. ...
New
CommunityNews
Tailwind CSS Tools For Developers. A collection of tools designed for developers, to save you and your team time when building websites w...
New
First poster: bot
Open source CSS framework for data visualization. Contribute to ChartsCSS/charts.css development by creating an account on GitHub. ...
New
First poster: bot
Explore DOM Events. Learn how the DOM Event system works through exploration
New
First poster: AstonJ
Try it here: https://david.li/paint/ This thread was posted by one of our members via one of our news source trackers.
New
First poster: malloryerik
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivi...
New
First poster: bot
Solid stands on the shoulders of giants, particularly React and Knockout. If you’ve developed with React Hooks before, Solid should seem ...
New
CommunityNews
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!. I’m very excited to announce @parcel/css, a new CSS pa...
New
First poster: joeb
Bun is a fast all-in-one JavaScript runtime. Bundle, transpile, install and run JavaScript &amp; TypeScript projects – all in Bun. Bun ...
/js
New

Other popular topics Top

PragmaticBookshelf
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Leverage Elixir and the Nx ecosystem to build intelligent applications that solve real-world problems in computer vision, natural languag...
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New
PragmaticBookshelf
As digital systems increasingly run the world, mastery of the recurring patterns of software development risk is the key to fast and effe...
New