@gavbarosee/react-kickstart
Version:
A modern CLI tool for creating React applications with various frameworks
334 lines (226 loc) • 14 kB
Markdown
<div align="center">
_A modern CLI tool for creating React applications with your preferred framework and stack_
<!-- Core Badges -->
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org/)
[](https://www.npmjs.com/package/@gavbarosee/react-kickstart)
[](https://www.npmjs.com/package/@gavbarosee/react-kickstart)
<!-- Quality Badges -->
[](https://github.com/gavbarosee/react-kickstart/actions)
[](https://github.com/gavbarosee/react-kickstart/pulls)
[](https://github.com/gavbarosee/react-kickstart/commits/main)
<!-- Community Badges -->
[](https://github.com/gavbarosee/react-kickstart/stargazers)
[](https://github.com/gavbarosee/react-kickstart/issues)
[](https://github.com/gavbarosee/react-kickstart/network/members)
<!-- Repository Stats -->
[](https://github.com/gavbarosee/react-kickstart)
[](https://github.com/gavbarosee/react-kickstart)
[](https://github.com/gavbarosee/react-kickstart)
> **From idea to running app in seconds** • **Zero configuration** • **Production-ready** • **Your stack, your choice**
</div>
---
## Table of Contents
- [Demo](#demo)
- [Quick Start](#quick-start)
- [What React Kickstart Does](#what-react-kickstart-does)
- [Why Not Just Use Vite or Next.js CLI?](#why-not-just-use-vite-or-nextjs-cli)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage Examples](#usage-examples)
- [CLI Reference](#cli-reference)
- [Documentation](#documentation)
- [Quality Assurance](#quality-assurance)
- [Community & Support](#community--support)
- [Contributing](#contributing)
- [Changelog](#changelog)
- [License](#license)
## Demo
<div align="center">
https://github.com/user-attachments/assets/3e2e935f-4f29-4445-8f25-3fd93bc5d440
_The CLI's interactive mode in action!_
</div>
---
## Quick Start
> **New**: Now with enhanced semantic release automation!
```bash
# Interactive mode (guided prompts)
npx @gavbarosee/react-kickstart my-app
# Non-interactive mode (with flags)
npx @gavbarosee/react-kickstart my-app \
--yes \
--framework vite \
--typescript \
--styling tailwind \
--routing react-router \
--state redux \
--api axios-react-query \
--testing vitest \
--deployment netlify
```
## What React Kickstart Does
**React Kickstart creates a complete, working React application in seconds.** Here's exactly what happens when you run it:
### **The Complete Setup Process**
1. **Asks you simple questions** - What framework? TypeScript? Styling? State Management? Routing? Tests? Linting? Deployment? etc (or skip for a default configuration with `--yes`)
2. **Creates your project folder** with a clean file structure
3. **Installs all dependencies** automatically (npm/yarn) - no manual setup needed
4. **Configures everything** - ESLint, Prettier, build scripts, deployment settings
5. **Generates example code** showing how to use your chosen tools together
6. **Opens your IDE** automatically (VS Code, Cursor, etc.) if installed
7. **Starts the dev server** and opens your browser to `localhost`
8. **Ready to code!** - Your app is running and you can start building immediately
### **What Makes It Special**
- **Zero configuration** - Everything just works out of the box
- **Smart detection** - Finds your installed IDE and package manager
- **Battle-tested combinations** - All tools are pre-configured to work together perfectly
- **Real examples** - Not empty templates, but working code you can build on
- **Production ready** - Includes deployment configs, testing setup, and best practices
### **Technology Options**
| **Choose Your Stack** | **Available Options** |
| --------------------- | ------------------------------------------------------------------------- |
| **Framework** | Vite (fast dev) or Next.js (full-stack) |
| **Language** | TypeScript (recommended) or JavaScript |
| **Styling** | Tailwind CSS, styled-components, or plain CSS |
| **Routing** | React Router (Vite only), Next.js App Router, or Pages Router |
| **State Management** | Redux Toolkit, Zustand, or none |
| **API Calls** | Axios + React Query, Axios only, Fetch + React Query, Fetch only, or none |
| **Testing** | Vitest (fast), Jest (traditional), or none |
| **Deployment** | Vercel, Netlify, or manual setup |
| **Package Manager** | npm or yarn (auto-detected) |
---
## Why Not Just Use Vite or Next.js CLI?
**Great question!** The official tools (`npm create vite@latest`, `npx create-next-app`) are excellent, but they only get you started. React Kickstart goes **much further**:
### **Official CLI Tools Give You:**
- Basic project structure
- Minimal configuration
- A "Hello World" starting point
### **React Kickstart Gives You:**
- **Everything above, PLUS:**
- **Pre-configured tool combinations** - Redux + RTK Query, Tailwind + TypeScript, etc.
- **Working example code** - See how the tools work together, not just empty templates
- **Complete development setup** - ESLint, Prettier, testing, deployment configs
- **Smart integrations** - Auto-detects your IDE and package manager
- **Production-ready structure** - Organized folders, best practices, proper imports
- **One command setup** - No need to manually add and configure 5+ additional tools
---
## Prerequisites
- **Node.js** `>= 16` - Required for running the CLI
---
## Installation
### NPX (Recommended)
```bash
# Run directly without installing
npx @gavbarosee/react-kickstart my-app
# Or with yarn
yarn create @gavbarosee/react-kickstart my-app
```
### Global Install
```bash
# Install globally for repeated use
npm install -g @gavbarosee/react-kickstart
react-kickstart my-app
# Or with yarn
yarn global add @gavbarosee/react-kickstart
react-kickstart my-app
```
## Usage Examples
```bash
# Interactive mode (recommended for beginners)
npx @gavbarosee/react-kickstart my-app
# Quick start with defaults
npx @gavbarosee/react-kickstart my-app --yes
# Full-featured setup
npx @gavbarosee/react-kickstart my-app --yes --framework nextjs --typescript --styling tailwind --state redux --api axios-react-query --testing jest --deployment vercel
```
---
## CLI Reference
### **Key Flags**
| Flag | Options | Default | Description |
| ----------------- | ----------------------------------------- | ---------- | -------------------------- |
| `-y, --yes` | - | `false` | Skip prompts, use defaults |
| `-f, --framework` | `vite`, `nextjs` | `vite` | React framework |
| `--typescript` | - | `false` | Enable TypeScript |
| `--styling` | `tailwind`, `styled-components`, `css` | `tailwind` | Styling solution |
| `--state` | `redux`, `zustand`, `none` | `none` | State management |
| `--api` | `axios-react-query`, `fetch-only`, `none` | `none` | API integration |
| `--testing` | `vitest`, `jest`, `none` | `none` | Testing framework |
### **Quick Examples**
```bash
# Interactive mode (recommended)
npx @gavbarosee/react-kickstart my-app
# Quick start with defaults
npx @gavbarosee/react-kickstart my-app --yes
# Full-featured setup
npx @gavbarosee/react-kickstart my-app --yes --framework nextjs --typescript --styling tailwind --state redux --api axios-react-query --testing jest --deployment vercel
```
**[Complete CLI Reference →](docs/user-guide/cli-reference.md)** - All flags, examples, and usage patterns
---
## Documentation
### **For Users**
**[Getting Started →](docs/user-guide/getting-started.md)** - Installation, first project, and basic usage
**[CLI Reference →](docs/user-guide/cli-reference.md)** - Complete command and flag documentation
**[Troubleshooting →](docs/user-guide/troubleshooting.md)** - Common issues and solutions
### **For Contributors**
**[Contributor Guide →](docs/development/contributor-tooling.md)** - Setup, workflow, and requirements
**[Architecture Overview →](docs/architecture/how-it-works.md)** - How React Kickstart works internally
**[Extending React Kickstart →](docs/extending/adding-a-new-framework.md)** - Add frameworks, styling, testing options
**[Quality Assurance →](docs/qa/qa-automation-overview.md)** - Testing and validation systems
---
## Quality Assurance
React Kickstart includes comprehensive quality assurance systems to ensure reliability:
- **Automated Testing** - Unit tests, integration tests, and end-to-end validation
- **Feature Validation** - Automated testing of all framework/tool combinations
- **Flag Validation** - CLI flag compatibility and error handling tests
- **QA Reports** - Detailed test reports for every build and release
**[QA Documentation →](docs/qa/qa-automation-overview.md)** - Complete testing and validation systems
---
## Community & Support
### Getting Help
- **[GitHub Discussions](https://github.com/gavbarosee/react-kickstart/discussions)** - Ask questions, share ideas, and get community support
- **[GitHub Issues](https://github.com/gavbarosee/react-kickstart/issues)** - Report bugs and request features
- **[Documentation](docs/)** - Comprehensive guides and API reference
### Stay Updated
- **[GitHub Releases](https://github.com/gavbarosee/react-kickstart/releases)** - Latest versions and release notes
- **[Changelog](CHANGELOG.md)** - Detailed version history and breaking changes
- **[Roadmap](https://github.com/gavbarosee/react-kickstart/projects)** - Upcoming features and improvements
### Community Guidelines
- Be respectful and constructive in all interactions
- Search existing issues before creating new ones
- Provide clear reproduction steps for bug reports
- Follow the contribution guidelines for pull requests
---
## Contributing
**Contributions welcome!** All changes go through pull requests with automated testing and QA validation.
**See the [Documentation](#documentation) section above for contributor guides and setup instructions.**
### **Ways to Contribute**
| Type | Examples |
| ----------------- | ------------------------------------------ |
| **Code** | Features, bug fixes, refactoring |
| **Documentation** | Guides, examples, README improvements |
| **Testing** | QA improvements, test coverage |
| **Design** | UI/UX improvements, logos, assets |
| **Ideas** | Feature requests, architecture discussions |
### **Contributors**
[](https://github.com/gavbarosee/react-kickstart/graphs/contributors)
**[Become a contributor →](https://github.com/gavbarosee/react-kickstart/blob/main/docs/development/contributor-tooling.md)** - Setup guide and contribution workflow
---
## Changelog
**Current Version: 0.1.0** - Initial release with Vite/Next.js, TypeScript, Tailwind, Redux, testing, and deployment support.
**[Full Changelog →](CHANGELOG.md)** - Complete version history and release notes
---
## Project Health & Maintenance
This project is actively maintained with automated testing, security monitoring, and regular updates:
### **Deployment & Operations**
- **[Automated Release Setup](docs/deployment/automated-release-setup.md)** - Semantic versioning, npm publishing, GitHub releases
- **[Nightly Operations](docs/deployment/nightly-operations.md)** - Automated validation, security checks, performance monitoring
- **[CI/CD Setup](docs/deployment/ci-setup.md)** - Continuous integration examples and best practices
### **Quality Assurance**
- **Matrix Testing**: Comprehensive validation across all framework/feature combinations
- **Automated QA**: Real project generation and validation (not mocks)
- **Release Protection**: Version changes require full matrix validation before publishing
- **Community Support**: Issues responded to within 48 hours
---
## License
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
**Copyright (c) 2025 Gav Barosee**