Your First Project

Let's walk through creating your first React application with React Kickstart, exploring the decisions you'll make and what gets generated.

Choose Your Framework

First, you'll need to decide between Vite and Next.js. Here's a detailed comparison to help you choose:

Framework Comparison

Compare React Kickstart's supported frameworks

Vite

Growing

Fast development with instant HMR

Dev Port: 5173

Build Time: ~2-5s

Best For:

SPAsFast prototypingModern developmentPerformance-critical apps

Click to view detailed comparison

Next.js

Mature

Full-stack React framework

Dev Port: 3000

Build Time: ~10-30s

Best For:

Full-stack appsSEO-critical sitesE-commerceProduction apps

Click to view detailed comparison

📊

Click on a framework card above to see detailed feature comparison

Quick Recommendation: Choose Vite for SPAs and fast development, Next.js for full-stack applications with SEO requirements.

What Gets Generated

Let's see what your project will look like based on your choices:

Full-Featured Vite Application

Framework: vite • Features: typescript, tailwind, react-router, redux

This generates a complete modern React application with:

TypeScript for type safety
Tailwind CSS for styling
React Router for navigation
Redux Toolkit for state management

Perfect for: Modern SPAs with complex state management and routing needs.

Step-by-Step Walkthrough

Run React Kickstart

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

You'll see a beautiful welcome screen with the React Kickstart logo and version information.

Choose Your Framework

? Which framework would you like to use?
❯ Vite (Fast development with instant HMR)
  Next.js (Full-stack React framework)

Decision Guide:

Vite: Choose if you're building a SPA, want fastest development, or prioritize build performance
Next.js: Choose if you need SSR, SEO optimization, API routes, or file-based routing

Enable TypeScript

? Would you like to use TypeScript?
❯ Yes (Recommended for better development experience)
  No (Use plain JavaScript)

Strongly recommended - TypeScript provides better IntelliSense, catches errors early, and improves code maintainability.

Select Styling Solution

? How would you like to style your components?
❯ Tailwind CSS (Utility-first CSS framework)
  styled-components (CSS-in-JS)
  CSS (Plain CSS files)

Decision Guide:

Tailwind CSS: Rapid development, consistent design system, smaller bundle size
styled-components: Component-scoped styles, dynamic styling, theme support
CSS: Traditional approach, full control, familiar workflow

Configure Routing

For Vite projects:

? Would you like to add routing?
❯ React Router (Client-side routing)
  None (Single page application)

For Next.js projects:

? Which routing approach would you like to use?
❯ App Router (Recommended - Latest Next.js features)
  Pages Router (Traditional Next.js routing)

Add State Management

? Would you like to add state management?
❯ Redux Toolkit (Powerful state management with DevTools)
  Zustand (Lightweight state management)
  None (Use React's built-in state)

Decision Guide:

Redux Toolkit: Complex apps, team projects, time-travel debugging
Zustand: Simple to medium apps, minimal boilerplate
None: Static sites, simple apps, learning projects

Configure API Integration

? How would you like to handle API calls?
❯ Axios + React Query (HTTP client + caching/synchronization)
  Fetch + React Query (Native fetch + caching/synchronization)
  Axios only (HTTP client only)
  Fetch only (Native fetch only)
  None (Manual implementation)

Add Testing Framework

? Would you like to add testing?
❯ Vitest (Fast, modern testing framework)
  Jest (Traditional, mature testing framework)
  None (No testing setup)

Configure Deployment

? Would you like to configure deployment?
❯ Vercel (Optimized for React and Next.js)
  Netlify (Great for static sites and SPAs)
  None (Manual deployment setup)

Final Setup

React Kickstart will now:

Generate project files based on your selections
Install dependencies with your preferred package manager
Initialize Git repository (unless disabled)
Open your IDE (VS Code or Cursor, if available)
Start development server (unless disabled)

Project Created Successfully!

After completion, you'll see a summary like this:

🎉 Project created successfully!
 
📁 Project: my-first-app
🚀 Framework: Vite + React
📝 Language: TypeScript
🎨 Styling: Tailwind CSS
🧭 Routing: React Router
🗃️  State: Redux Toolkit
🌐 API: Axios + React Query
🧪 Testing: Vitest
🚀 Deployment: Netlify
 
📋 Next steps:
  cd my-first-app
  npm run dev
 
📚 Documentation: https://react-kickstart.dev
🐛 Issues: https://github.com/gavbarosee/react-kickstart/issues
💬 Discussions: https://github.com/gavbarosee/react-kickstart/discussions
 
Happy coding! 🚀

Exploring Your Generated Project

Project Structure

Your generated project will have a clean, organized structure:

my-first-app/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Counter.tsx      # Example component (if Redux selected)
│   │   └── Layout.tsx       # Layout component (if routing selected)
│   ├── pages/              # Route components (Vite) or Next.js pages
│   │   ├── Home.tsx
│   │   └── About.tsx
│   ├── store/              # Redux store (if selected)
│   │   ├── store.ts
│   │   └── counterSlice.ts
│   ├── api/                # API integration (if selected)
│   │   └── client.ts
│   ├── styles/             # Styling files
│   │   └── globals.css
│   ├── __tests__/          # Test files (if testing selected)
│   │   └── App.test.tsx
│   ├── App.tsx             # Main application component
│   └── main.tsx            # Application entry point
├── public/                 # Static assets
├── package.json            # Dependencies and scripts
├── vite.config.ts          # Vite configuration (if Vite selected)
├── next.config.js          # Next.js configuration (if Next.js selected)
├── tailwind.config.js      # Tailwind configuration (if selected)
├── tsconfig.json           # TypeScript configuration (if selected)
├── .eslintrc.js           # ESLint configuration
├── .prettierrc            # Prettier configuration
└── README.md              # Project documentation

Available Scripts

Every project includes these npm scripts:

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
 
# Code Quality
npm run lint         # Check code with ESLint
npm run lint:fix     # Fix ESLint issues automatically
npm run format       # Format code with Prettier
 
# Testing (if enabled)
npm run test         # Run tests
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Run tests with coverage report

Start Development

cd my-first-app
npm run dev

Your application will start and automatically open in your browser. You'll see:

Welcome page with your chosen styling
Working examples of your selected features
Hot module replacement for instant updates
TypeScript support (if enabled) with full IntelliSense

Next Steps

Congratulations! You've successfully created your first React application with React Kickstart.

What to do next:

Explore the generated code - See how all your chosen tools work together
Customize the styling - Make it your own with your brand colors and design
Add your features - Build on the solid foundation that's been created
Deploy your app - Use the included deployment configuration
Join the community - Share your project and get help when needed

Helpful Resources:

CLI Reference → - Complete command and flag documentation
Architecture Guide → - Understanding how React Kickstart works
Extending Guide → - Adding new frameworks and features
GitHub Discussions → (opens in a new tab) - Community support

🎉

Ready to build something amazing?

Your React application is set up with best practices and ready for development.

Quick Start Troubleshooting