React SPA Starter

A modern React SPA template with React Router v7, shadcn/ui, TypeScript, TanStack Query, and pre-built dashboard layouts for rapid development.

🌐 Live Demo

Check out the live demo: https://react-spa-starter.vercel.app/

✨ Features

• React 19 - Latest React version with modern features
• React Router v7 - File-based routing with nested layouts
• TypeScript - Full type safety and better developer experience
• TanStack Query - Powerful data fetching and state management
• shadcn/ui - Beautiful and accessible UI components
• Tailwind CSS v4 - Modern utility-first CSS framework
• Vite - Fast build tool and development server

🏗️ Pre-built Components

• Sidebar Navigation - Collapsible sidebar with nested menus
• Authentication Layout - Ready-to-use login/auth structure
• Dashboard Layout - Professional dashboard with breadcrumbs
• Dark Mode - Built-in theme switching support
• Responsive Design - Mobile-first responsive layouts

🚀 Quick Start

1. Clone or use this template

   git clone [your-repo-url]
   cd react-spa-starter

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser

   http://localhost:5173
   

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── app-sidebar/    # Sidebar navigation components
│   └── ui/             # shadcn/ui components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions and configs
├── routes/             # Route components and layouts
└── styles/             # Global styles and CSS

🔧 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

🎨 Customization

This template is designed to be easily customizable:

1. Update branding - Change colors, logos, and titles
2. Add routes - Create new pages in the routes/ directory
3. Modify sidebar - Edit navigation in components/app-sidebar/
4. Extend components - Add more shadcn/ui components as needed

📚 Tech Stack

• React - UI library
• React Router - Routing
• TypeScript - Type safety
• TanStack Query - Data fetching
• shadcn/ui - UI components
• Tailwind CSS - Styling
• Vite - Build tool

📄 License

This template is open source and available under the MIT License.

Ready to build something amazing? Start coding! 🚀