Getting Started
Quick Start

Quick Start

Get a fully functional React application running in under 30 seconds with React Kickstart.

The 30-Second Setup

Run the Command

npx @gavbarosee/react-kickstart my-awesome-app

Answer the Prompts

React Kickstart will ask you a few questions about your preferred stack:

  • Framework: Vite (fast development) or Next.js (full-stack)
  • Language: TypeScript (recommended) or JavaScript
  • Styling: Tailwind CSS, styled-components, or plain CSS
  • State Management: Redux Toolkit, Zustand, or none
  • API Integration: Various combinations of Axios/Fetch with React Query
  • Testing: Vitest (fast) or Jest (traditional)
  • Deployment: Vercel, Netlify, or manual setup

Start Coding

cd my-awesome-app
npm run dev

Your app is now running at http://localhost:3000 (Vite) or http://localhost:3000 (Next.js)!

Skip the Questions (Non-Interactive Mode)

If you know exactly what you want, skip all prompts with the --yes flag:

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

Perfect for: Modern SPAs with full state management and API integration.

What Gets Created

React Kickstart generates a complete, production-ready project structure:

my-awesome-app/
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/              # Route components (Vite) or Next.js pages
│   ├── store/              # State management (if selected)
│   ├── api/                # API integration (if selected)
│   ├── styles/             # Styling files
│   └── __tests__/          # Test files (if selected)
├── public/                 # Static assets
├── package.json            # Dependencies and scripts
├── vite.config.js          # Build configuration (Vite)
├── next.config.js          # Build configuration (Next.js)
├── tailwind.config.js      # Tailwind configuration (if selected)
├── tsconfig.json           # TypeScript configuration (if selected)
├── .eslintrc.js           # ESLint configuration
├── .prettierrc            # Prettier configuration
└── README.md              # Project documentation

Not just templates - React Kickstart generates working example code that demonstrates how all your chosen tools work together.

Available Scripts

Every generated project includes these npm scripts:

ScriptDescription
npm run devStart development server with hot reload
npm run buildBuild for production
npm run previewPreview production build locally
npm run testRun tests (if testing is enabled)
npm run lintCheck code quality with ESLint
npm run formatFormat code with Prettier

What Happens Next?

After running React Kickstart:

  1. Project files are generated with your chosen configuration
  2. Dependencies are installed automatically (npm or yarn)
  3. Git repository is initialized (unless you use --no-git)
  4. Your IDE opens automatically (VS Code or Cursor, if installed)
  5. Development server starts (unless you use --no-autostart)
  6. Browser opens to your new app

You're ready to code! Your development environment is fully set up and your app is running.

Need More Control?

InstallationYour First Project