🚀 @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/
├── public/                 # Static assets
├── src/
│   ├── components/         # Reusable React components
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   ├── Features.tsx
│   │   ├── ApiExample.tsx
│   │   └── Footer.tsx
│   ├── services/           # API services and utilities
│   │   └── api.ts
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles with Tailwind
├── .eslintrc.cjs          # ESLint configuration
├── .prettierrc            # Prettier configuration
├── tailwind.config.js     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
└── 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";

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

  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)} className="btn btn-primary">
        Increment
      </button>
    </div>
  );
}

Data Fetching with TanStack Query

import { useQuery } from "@tanstack/react-query";
import { fetchRandomUser } from "./services/api";

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

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading user</div>;

  return (
    <div className="card">
      <h3>
        {data.name.first} {data.name.last}
      </h3>
      <p>{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