Create React Pro Stack

🚀 A powerful CLI tool to quickly scaffold React projects with routing, Redux, TailwindCSS, Axios, and more!

Features

✨ TypeScript/JavaScript Support - Choose your preferred language during setup
⚡ Vite - Lightning fast build tool
🎨 TailwindCSS - Pre-configured with @tailwindcss/vite
🧩 Shadcn/ui - Beautiful UI components ready to use
🛣️ React Router - Pre-configured routing with layouts
🔄 Redux Toolkit - State management setup
🌐 Axios - HTTP client with interceptors
🔥 React Query - Server state management
📱 React Hot Toast - Beautiful notifications
📝 React Hook Form - Form handling
📊 React Table - Powerful table and data grid
📈 Recharts - Beautiful chart library
🎯 Path Aliases - Clean imports with @/ prefix

Quick Start

Installation

npx create-react-pro-stack my-app

Usage

1. Run the command:

npx create-react-pro-stack my-app

2. Choose TypeScript or JavaScript:

Do you want to use TypeScript? (y/n):

3. Navigate to your project:

cd my-app

4. Start development server:

npm run dev

That's it! Your React app is ready! 🎉

Project Structure

my-app/
├── src/
│   ├── assets/
│   │   ├── Images/
│   │   └── Videos/
│   ├── components/
│   │   ├── common/
│   │   ├── AuthComponent/
│   │   ├── DashboardComponent/
│   │   ├── MainComponent/
│   │   ├── AllPhotos/
│   │   ├── SVG/
│   │   └── ui/              # shadcn/ui components
│   ├── layout/
│   │   ├── MainLayout.tsx
│   │   ├── AuthLayout.tsx
│   │   └── DashboardLayout.tsx
│   ├── pages/
│   │   ├── AuthPages/
│   │   │   └── LogIn.tsx
│   │   ├── DashboardPages/
│   │   │   └── Overview.tsx
│   │   └── LandingPages/
│   │       └── Home.tsx
│   ├── router/
│   │   ├── router.tsx
│   │   ├── PrivateRouter.tsx
│   │   └── PublicRouter.tsx
│   ├── Redux/
│   │   ├── store.ts
│   │   └── Slices/
│   ├── services/
│   │   └── api.ts          # Axios API services
│   ├── utils/
│   │   └── axios.ts        # Axios configuration
│   ├── hooks/
│   ├── Share/
│   │   ├── AuthShare/
│   │   ├── DashboardShare/
│   │   └── LendingShare/
│   └── main.tsx
├── .env
├── .env.example
├── .gitignore
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json           # TypeScript only
├── tsconfig.app.json       # TypeScript only
├── tsconfig.node.json      # TypeScript only
├── jsconfig.json           # JavaScript only
└── vite.config.ts

What's Included

Pre-installed Packages

• React 18 - Latest React version
• Vite - Next generation frontend tooling
• TailwindCSS - Utility-first CSS framework
• React Router DOM - Declarative routing
• Redux Toolkit - Predictable state container
• React Query - Powerful data synchronization
• Axios - Promise based HTTP client
• React Hook Form - Performant forms
• React Hot Toast - Toast notifications
• React Icons - Popular icon packs
• shadcn/ui - Re-usable components
• Lucide React - Beautiful icons
• TanStack React Table - Headless table and data grid
• Recharts - Composable charting library

Pre-configured Features

• ✅ Path aliases (@/components, @/utils, etc.)
• ✅ Axios interceptors for auth
• ✅ Redux store setup
• ✅ React Query setup with devtools
• ✅ Toast notifications
• ✅ Routing with layouts
• ✅ 404 Page
• ✅ Environment variables (.env)
• ✅ Netlify deployment ready (_redirects)
• ✅ Git ready with .gitignore

Routes

The template comes with pre-configured routes:

• / - Home page
• /auth/login - Login page
• /dashboard - Dashboard (redirects to /dashboard/overview)
• /dashboard/overview - Overview page
• * - 404 page

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=http://localhost:5000/api

API Usage

The template includes a pre-configured Axios instance:

import axiosInstance from "@/utils/axios";

// Use it in your components
const fetchData = async () => {
  const response = await axiosInstance.get("/endpoint");
  return response.data;
};

Using React Table

Build powerful tables with TanStack React Table:

import { useReactTable, getCoreRowModel } from "@tanstack/react-table";

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

Using Recharts

Create beautiful charts with Recharts:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";

<LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

TypeScript vs JavaScript

During setup, you can choose between TypeScript and JavaScript:

TypeScript:

• .tsx and .ts file extensions
• Type safety and IntelliSense
• tsconfig.json configuration

JavaScript:

• .jsx and .js file extensions
• jsconfig.json configuration
• No type checking

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you find any bugs or have feature requests, please create an issue on GitHub.

License

MIT License - feel free to use this project for personal or commercial purposes.

Author

Jahirul Islam

Made with ❤️ by Jahirul Islam

If this tool helped you, please give it a ⭐ on GitHub!