DEV Community

Cover image for A nizam tool that transformed ReactJS from a library into a framework
Ahmed Abd Alalim
Ahmed Abd Alalim

Posted on

A nizam tool that transformed ReactJS from a library into a framework

What Is nizam ?

nizam is a CLI tool designed to quickly and efficiently scaffold Frontend projects by generating a clean, well structured, and production ready project setup.
In addition to creating an organized file structure, nizam allows developers to install any libraries of their choice and automatically apply their required configuration files, making them ready for immediate use without manual setup.


nizam standardizes project initialization and improves developer productivity from day one.

  • 📦 Install selected libraries seamlessly
  • 🔩 Apply library specific configurations out of the box
  • 🪄 Reduce repetitive manual setup
  • 💡 Automatically create essential project files
  • ⚡️ Speed up project initialization and focus on core development
  • 🛠️ Generate a scalable and well organized Frontend project structure
  • 📄 After completing the build, you will find a nizam_doc.html file containing instructions and docs link for libraries you selected.

All of this in one place

React + vite

javaScriptTypeScript

BootstrapTailwindcssBulmaFoundationMaterialize

Material UIAnt DesignHeadless UI

React RouterTanStack RouterWouter

Classic RouterData Router

React Context APIRedux ToolkitZustand

React IconsLucide ReactLord IconMaterial Icons

React Helmet AsyncDr. Pogodin React HelmetUnhead

AxiosTanStack QuerySWR

and more coming in next version

Explanation nizam ui

nizam home

🔍 Browse Mode

  • multiple options with the ability to search or browse through comprehensive lists. Useful if you know which tools you'll be using.

❓ OneShot Mode

  • a series of questions that suggest suitable options when you are unsure which tools to use.

🚨 Help

  • it provides you with support and guidance, with an explanation of each question and the options that will be displayed, to make it easier to understand and use the tool.

nizam HTML documentation page

nizam html doc

What does it offer?

  • a simplified explanation of each library
  • instructions for using the library according to its official website
  • official Documentation Links

Get started with nizam

using npx:

npx create-nizam-app
Enter fullscreen mode Exit fullscreen mode

GitHub: https://github.com/ahmed-abd-alalim/nizam
NPM: https://www.npmjs.com/package/create-nizam-app
Website: https://nizam-17v.pages.dev/

Top comments (0)