Overview

create-modern-stack is a Command Line Interface (CLI) tool meticulously designed to bootstrap modern frontend applications in seconds. It addresses the common, yet time-consuming, initial setup phase of any new project, which often involves configuring routing, state management, UI libraries like Tailwind CSS and Shadcn/ui, and implementing essential features like dark/light mode.

Why spend 2-3 days on boilerplate when you can have a production-ready foundation in under a minute? This package automates the setup of your chosen framework (React.js or Next.js), complete with a responsive layout (Header, Footer, Body), theme toggling, and other modern development essentials, allowing you to jump straight into building unique features.

Commands to execute

To create a new project in the current directory:

npx create-modern-stack .

To create a new project in a new directory named my-app:

npx create-modern-stack my-app

Replace my-app with your desired project name.

CLI Interaction

The CLI will guide you through a series of questions to customize your project setup. Here's an overview of the prompts:

Features

Based on your selections during the CLI interaction, your new project will come pre-configured with:

• Choice of Modern Framework:

  • React.js: Set up with Vite for an incredibly fast development server and build process.

  • Next.js: Utilizes the App Router for robust server components and modern Next.js features.

• Efficient Routing:

  • For React.js: Your choice of TanStack Router or React Router, fully integrated.

  • For Next.js: Leverages the powerful built-in file-system based App Router.

• Flexible State Management:

  • Zustand: For simple, scalable, and boilerplate-free state management.

  • Redux Toolkit: For complex application states, configured with best practices.

  • React Context API: If "None" is selected, providing a basic setup for state sharing.

• Styling with Tailwind CSS:

  • Tailwind CSS is fully set up and configured, ready for utility-first styling.

• Beautiful UI Components with Shadcn/ui:

  • Shadcn/ui is initialized, allowing you to easily add and customize accessible and well-designed components.

• Core Responsive Layout:

  • An in-built responsive Header component.

  • An in-built responsive Footer component.

  • A designated Body/Main Content area.

• Theme Management:

  • Integrated Dark/Light/System mode toggle, functional out-of-the-box.

  • Your chosen Color Palette (Default, Purple, Blue, Red) applied across Shadcn/ui components and Tailwind configuration.

• Development Tooling:

  • ESLint and Prettier configured for consistent code quality and formatting.

• Dynamic SEO:

  • Dynamic Metadata: Each page can set its own title and description for improved search engine indexing.

  • Lazy Loading / Code Splitting: Components and routes are lazy-loaded to improve performance and help search engines prioritize important content.

Screenshots:

Desktop Previews

Mobile Previews (Purple Theme)

Keywords:

create-modern-stack, react, nextjs, next.js, react.js, tailwind, tailwindcss, shadcn, shadcn-ui, zustand, redux, tanstack-router, react-router, dark-mode, light-mode, theme-toggle, boilerplate, starter-kit, cli, scaffolding, frontend, web-development, project-generator

Author

Yash Shrivastava
GitHub • Website • LinkedIn

Happy Coding!