Vite + React + TypeScript + Redux Toolkit + Material UI v7 Boilerplate

A modern, production-ready boilerplate for building React applications with TypeScript, Redux Toolkit, and Material UI v7.

🚀 Features

• ⚡️ Vite - Lightning-fast build tool and dev server
• ⚛️ React 19 - Latest React with concurrent features
• 🔷 TypeScript - Type safety and better developer experience
• 🎨 Material UI v7 - Latest Material Design components with CSS variables
• 🔄 Redux Toolkit - Simplified Redux state management
• 🧭 React Router v7 - Client-side routing
• 💅 Emotion - CSS-in-JS styling solution
• 📱 Responsive Design - Mobile-first approach
• 🌙 Dark Mode Ready - Built-in theme support with CSS variables

📋 Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager

🛠️ Setup Project

1. Install Dependencies

npm install

2. Environment Variables

Create a .env file in the root folder:

VITE_API_BASE_URL='http://localhost/api'

🏃 Running the Application

Development Server

Start the development server on port 3000:

npm start

The application will be available at http://localhost:3000

Build for Production

Create an optimized production build:

npm run build

The build output will be in the dist folder.

Preview Production Build

Preview the production build locally:

npm run preview

📁 Project Structure

vitejs-react-ts-redux-mui-boilerplate/
├── public/                      # Static assets
│   └── vite.svg
├── src/
│   ├── assets/                  # Images, fonts, and other assets
│   │   └── react.svg
│   ├── components/              # Reusable React components
│   │   ├── Cards.tsx           # Feature cards section
│   │   ├── Footer.tsx          # Footer component
│   │   ├── Header.tsx          # Navigation header
│   │   └── Hero.tsx            # Hero section
│   ├── constants/               # Application constants
│   │   ├── endpoint.ts         # API endpoints
│   │   ├── httpStatus.ts       # HTTP status codes
│   │   └── theme.ts            # MUI theme configuration
│   ├── layout/                  # Layout components
│   │   └── AppLayout/
│   │       ├── index.tsx       # Main layout wrapper
│   │       └── style.tsx       # Layout styles
│   ├── pages/                   # Page components
│   │   ├── App.tsx             # Main landing page
│   │   └── notFound/           # 404 page
│   ├── redux/                   # Redux store and slices
│   │   ├── reducers/
│   │   │   └── test.ts         # Example reducer
│   │   └── store.ts            # Redux store configuration
│   ├── router/                  # Routing configuration
│   │   └── index.tsx           # Route definitions
│   ├── styles/                  # Global styles
│   │   ├── app.css             # Application styles
│   │   └── base/               # Base styles
│   ├── utils/                   # Utility functions
│   │   └── index.ts
│   ├── main.tsx                 # Application entry point
│   └── vite-env.d.ts           # Vite type definitions
├── index.html                   # HTML template
├── package.json                 # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── tsconfig.node.json          # TypeScript config for Node
├── vite.config.ts              # Vite configuration
└── README.md                    # This file

🎨 Tech Stack

Core

• React 19.2.4 - UI library
• TypeScript 5.9.3 - Type safety
• Vite 7.3.1 - Build tool and dev server

UI & Styling

• Material UI 7.3.7 - Component library
• @mui/icons-material 7.3.7 - Material Design icons
• @emotion/react 11.14.0 - CSS-in-JS
• @emotion/styled 11.14.1 - Styled components

State Management & Routing

• Redux Toolkit 2.11.2 - State management
• React Redux 9.2.0 - React bindings for Redux
• React Router DOM 7.13.0 - Routing

🔧 Available Scripts

Command	Description
npm start	Start development server on port 3000
npm run build	Build for production
npm run preview	Preview production build

📝 Code Style

• TypeScript - Strict mode enabled
• Functional Components - Using React hooks
• Styled Components - MUI's styled() API
• CSS Variables - For dynamic theming
• Path Aliases - @/ for src/ directory

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📚 Learn More

• Vite Documentation
• React Documentation
• Material UI Documentation
• Redux Toolkit Documentation
• TypeScript Documentation

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📄 License

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

👤 Author

Prasath Mani

• GitHub: @prasathmani
• Repository: vitejs-react-ts-redux-mui-boilerplate

⭐ Show your support

Give a ⭐️ if this project helped you!