Stop Wasting Hours Structuring React Projects — Generate a Production-Ready FSD Architecture in Seconds

typescript dev.to

**

Stop Wasting Hours Structuring React Projects — Generate a Production-Ready FSD Architecture in Seconds

**

Every time I started a new React project, I found myself repeating the same steps:

  • Creating folders manually.
  • Configuring aliases.
  • Setting up a scalable project structure.
  • Copying files from previous projects.
  • Fixing naming inconsistencies.
  • Explaining the architecture to every new team member.

It wasn’t difficult.

It was just repetitive.

So I decided to automate the entire process.

That’s why I built create-fsd-architecture.

What is it?

create-fsd-architecture is a CLI that generates a complete Feature-Sliced Design (FSD) project structure for modern React applications.

Instead of spending 20–30 minutes preparing your project, you can generate everything with a single command.

npx create-fsd-architecture

What gets generated?

The CLI creates a production-ready structure including:

src/
├── app/
├── pages/
├── widgets/
├── features/
├── entities/
├── shared/
└── processes/

It also prepares the project with common best practices so you can start building features immediately instead of organizing folders.

Recent Features

The latest version includes several improvements:

  • Interactive CLI experience
  • Automatic architecture generation
  • Faster project scaffolding
  • Cleaner folder organization
  • Better developer experience
  • Support for modern React + Vite projects

Why I built it

After working on multiple frontend projects, I realized that every team spends time solving the same problem:

“How should we structure this project?”

The answer shouldn’t require rebuilding the same architecture from scratch every time.

The CLI handles the repetitive setup so developers can focus on building features.

Getting Started

Install and run it instantly:

npx create-fsd-architecture

Or install globally:

npm install -g create-fsd-architecture

Then create a new project in minutes.

Open Source

The project is completely open source.

GitHub:
https://github.com/ashrafmo1/create-fsd-architecture

NPM:
https://www.npmjs.com/package/create-fsd-architecture

Documentation:
https://fsd-docs.vercel.app/docs

I’m continuously improving the project, so feedback, feature requests, and contributions are always welcome.

If this tool saves you time, consider giving the repository a ⭐.

Source: dev.to

arrow_back Back to Tutorials