A modern, production-ready React starter template built with Vite, featuring best practices, clean architecture, and a comprehensive folder structure.
- ⚡ Lightning Fast - Built with Vite for instant HMR and optimized builds
- 🎨 Modern UI - Beautiful, responsive design with smooth animations
- 🏗️ Clean Architecture - Well-organized folder structure for scalability
- 🎣 Custom Hooks - Reusable hooks like
useFetchanduseLocalStorage - 🌐 React Router - Client-side routing with nested routes
- 🔌 API Service Layer - Centralized API configuration with Axios interceptors
- 🎯 Context API - Global state management without external libraries
- 🛡️ Error Boundaries - Graceful error handling
- ✅ PropTypes - Runtime type checking for components
- 📱 Responsive Design - Mobile-first approach
- 🔧 ESLint - Code quality and consistency
react-starter/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images, fonts, etc.
│ ├── components/ # Reusable UI components
│ │ ├── ErrorBoundary.jsx
│ │ ├── Header.jsx
│ │ ├── Loading.jsx
│ │ ├── TodoForm.jsx
│ │ ├── TodoItem.jsx
│ │ └── TodoList.jsx
│ ├── context/ # React Context providers
│ │ └── TodoContext.jsx
│ ├── hooks/ # Custom React hooks
│ │ ├── useFetch.js
│ │ ├── useLocalStorage.js
│ │ └── index.js
│ ├── layouts/ # Layout components
│ │ └── MainLayout.jsx
│ ├── pages/ # Page components
│ │ ├── Home.jsx
│ │ ├── Todos.jsx
│ │ ├── About.jsx
│ │ └── NotFound.jsx
│ ├── services/ # API service layer
│ │ ├── api.js
│ │ └── todoService.js
│ ├── utils/ # Helper functions
│ │ └── helpers.js
│ ├── constants/ # Constants and routes
│ │ ├── routes.js
│ │ └── index.js
│ ├── App.jsx # Main App component
│ ├── App.css
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── .env.example # Environment variables template
├── .env # Environment variables (gitignored)
├── eslint.config.js # ESLint configuration
├── vite.config.js # Vite configuration
└── package.json
- React 19 - Latest React with improved features
- Vite 7 - Next generation frontend tooling
- React Router - Declarative routing for React
- Axios - Promise-based HTTP client
- PropTypes - Runtime type checking
- ESLint - Linting and code quality
- Node.js >= 18
- npm or yarn
- Clone the repository or use this template:
git clone <your-repo-url>
cd react-starter- Install dependencies:
npm install- Set up environment variables:
cp .env.example .env- Start the development server:
npm run dev- Open your browser and visit
http://localhost:5173
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLintReusable UI components with isolated styling. Each component has its own CSS file for better maintainability.
- useFetch: Handles data fetching with loading and error states
- useLocalStorage: Syncs state with localStorage
Global state management using React Context. Example: TodoContext for managing todo state.
Centralized API configuration with interceptors for:
- Adding authentication tokens
- Handling errors globally
- Request/response transformation
Catches JavaScript errors in component tree and displays fallback UI.
Centralized route definitions for easy maintenance and refactoring.
The starter includes a fully functional Todo App demonstrating:
- CRUD operations with API integration
- Context API for state management
- Custom hooks usage
- Form handling
- Error handling
- Loading states
- Responsive design
The project uses vanilla CSS with:
- CSS custom properties (CSS variables)
- Modern layout techniques (Flexbox, Grid)
- Responsive design patterns
- Smooth animations and transitions
- Custom scrollbar styling
Create a .env file in the root directory:
VITE_API_BASE_URL=https://jsonplaceholder.typicode.com
VITE_APP_NAME=React Starter
VITE_APP_VERSION=1.0.0Access them in your code:
const apiUrl = import.meta.env.VITE_API_BASE_URL;- ✅ Component composition and reusability
- ✅ Separation of concerns
- ✅ PropTypes for runtime type checking
- ✅ Custom hooks for shared logic
- ✅ Error boundaries for graceful error handling
- ✅ Centralized constants and routes
- ✅ API service abstraction
- ✅ Responsive and accessible UI
- ✅ Clean code organization
- ✅ ESLint for code quality
Build the project for production:
npm run buildThe optimized files will be in the dist folder, ready to deploy.
Preview the production build locally:
npm run previewContributions are welcome! Feel free to open issues or submit pull requests.
This project is open source and available under the MIT License.
Built with ❤️ by developers, for developers.
Happy Coding! 🚀
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.