React SPA Quickstart

A modern, production-ready template for React Single Page Applications using Vite, Tailwind CSS, and TypeScript.

Features

• ⚡️ Vite - Lightning fast build tool
• 🎨 Tailwind CSS v4 - Modern utility-first CSS
• 📖 Shadcn UI compatibility - Copy and paste components
• 🧩 Radix UI primitives ready for use
• 💎 TypeScript - Type safety
• 🔍 ESLint - Modern flat configuration
• 📚 CSS Variables - Dark mode ready

Getting Started

Use the CLI to create a new project:

npx react-spa-quickstart my-app
cd my-app
npm run dev

Or clone this repository:

git clone https://github.com/JoeEverest/react-spa-quickstart.git my-app
cd my-app
npm install
npm run dev

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Lint your code
• npm run preview - Preview production build locally

Project Structure

/
├── public/           # Static assets
├── src/
│   ├── components/   # React components
│   │   └── ui/       # UI components (Shadcn/Radix)
│   ├── lib/          # Utility functions
│   ├── App.tsx       # Main application component
│   ├── index.css     # Global styles
│   └── main.tsx      # Application entry point
└── ...config files

Expanding the ESLint configuration

For production applications, you can enable type-aware lint rules:

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    // For stricter rules:
    // ...tseslint.configs.strictTypeChecked,
    // For stylistic rules:
    // ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

License

MIT © Joe Everest