🚀 @ali_samir/create-react-stack

⚡ The fastest way to create modern React applications with a complete, production-ready stack.

Create React Stack is a powerful CLI tool that generates modern React applications with Vite, TypeScript, Tailwind CSS, TanStack Query, and all the essential tools you need to build amazing web applications.

✨ Features

• 🚀 Lightning Fast: Powered by Vite for instant development and optimized builds
• 🛡️ Type Safe: Full TypeScript support with strict type checking
• 🎨 Beautiful UI: Tailwind CSS with custom design system and responsive components
• 📡 Smart Data Fetching: TanStack Query for efficient server state management
• 🔧 Code Quality: ESLint and Prettier configured with React and TypeScript best practices
• 🚀 Production Ready: GitHub Actions CI/CD, optimized builds, and deployment-ready configuration
• 📱 Responsive Design: Mobile-first approach with modern UI components
• 🎯 Developer Experience: Hot reload, TypeScript IntelliSense, and comprehensive tooling

📦 Installation & Usage

Quick Start

npx @ali_samir/create-react-stack my-app
cd my-app
npm run dev

That's it! Your React app is ready to go. 🎉

Advanced Usage

# Create app with custom name
npx @ali_samir/create-react-stack my-awesome-app

# Skip dependency installation
npx @ali_samir/create-react-stack my-app --skip-install

# Get help
npx @ali_samir/create-react-stack --help

📂 What's Included

Your new React app comes with:

my-app/
├── src/
│   ├── components/         # Reusable React components
│   │   └── Counter.tsx     # Example counter component
│   ├── services/           # API services and utilities (empty, ready for your code)
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles with Tailwind
├── .eslintrc.cjs          # ESLint configuration
├── .prettierrc            # Prettier configuration
├── .prettierignore        # Prettier ignore file
├── tailwind.config.js     # Tailwind CSS configuration
├── postcss.config.js      # PostCSS configuration
├── tsconfig.json          # TypeScript configuration
├── tsconfig.node.json     # TypeScript config for Node.js
├── vite.config.ts         # Vite configuration
├── index.html             # HTML template
└── package.json           # Dependencies and scripts

🛠️ Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

🚀 Example Usage

Basic Component

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="card max-w-md mx-auto">
      <h2 className="text-2xl font-semibold mb-4">Counter Example</h2>
      <div className="text-6xl font-bold text-primary-600 mb-6">{count}</div>
      <div className="space-x-4">
        <button
          onClick={() => setCount(count - 1)}
          className="btn btn-secondary"
        >
          Decrease
        </button>
        <button onClick={() => setCount(count + 1)} className="btn btn-primary">
          Increase
        </button>
      </div>
    </div>
  );
};

Data Fetching with TanStack Query

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchRandomUser = async () => {
  const response = await axios.get("https://randomuser.me/api/");
  return response.data.results[0];
};

const UserProfile = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["user"],
    queryFn: fetchRandomUser,
  });

  if (isLoading) return <div className="text-center">Loading...</div>;
  if (error)
    return <div className="text-center text-red-500">Error loading user</div>;

  return (
    <div className="card">
      <h3 className="text-xl font-semibold">
        {data.name.first} {data.name.last}
      </h3>
      <p className="text-gray-600">{data.email}</p>
    </div>
  );
};

🎨 Styling

The project uses Tailwind CSS with a custom design system:

// Pre-configured utility classes
<button className="btn btn-primary">Primary Button</button>
<button className="btn btn-secondary">Secondary Button</button>
<div className="card">Card Content</div>

🔧 Configuration

TypeScript

The project includes strict TypeScript configuration with path mapping:

// Use path mapping for cleaner imports
import { Button } from "@/components/Button";
import { api } from "@/services/api";

ESLint

Pre-configured with React, TypeScript, and Tailwind rules:

npm run lint        # Check for issues
npm run lint:fix    # Auto-fix issues

Prettier

Code formatting with Tailwind plugin:

npm run format      # Format all files
npm run format:check # Check formatting

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

Netlify

1. Build your project: npm run build
2. Deploy the dist folder to Netlify

Docker

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone the repository
git clone https://github.com/alisamirali/create-react-stack.git
cd create-react-stack

# Install dependencies
npm install

# Test the CLI locally
node bin/create-react-stack.js test-app --skip-install

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Show Your Support

If you find this project helpful, please give it a star! ⭐

🙏 Acknowledgments

• Vite - Next generation frontend tooling
• React - A JavaScript library for building user interfaces
• TypeScript - Typed JavaScript at any scale
• Tailwind CSS - A utility-first CSS framework
• TanStack Query - Powerful data synchronization for React

---

Made with ❤️ by the community