A modern, optimized React TypeScript starter template designed to accelerate your development workflow. This template comes pre-configured with best practices and tools to help you build high-quality React applications quickly.
- 🚀 Optimized Build Setup - Vite for lightning-fast development and production builds
- ✅ Type Safety - Full TypeScript integration with strict type checking
- 📱 Routing - React Router pre-configured with example routes
- 🧪 Testing Framework - Vitest + React Testing Library for robust testing
- 🔍 Code Quality Tools - ESLint and Prettier with intelligent defaults
- 🔄 CI/CD Ready - GitHub Actions workflows for linting, type checking, testing, and formatting
- 🐳 Docker Support - Production-ready Dockerfile for containerized deployment with Nginx
- 🧩 Component Architecture - Organized layout and page structure
- 💅 Styling Solution - Tailwind CSS for utility-first styling
- React (v19.1.0) - UI component library
- TypeScript (v5.8.3) - Type-safe JavaScript
- React Router DOM (v7.5.3) - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Vite (v6.3.5) - Next-generation frontend tooling
- Node.js (>=20.0.0) - JavaScript runtime
- Vitest (v3.1.4) - Unit testing framework
- React Testing Library (v16.3.0) - React component testing
- Testing Library/User Event (v14.6.1) - User interaction simulation
- jsdom (v26.1.0) - Browser environment simulation
- ESLint (v9.25.0) - JavaScript/TypeScript linting
- Prettier (v3.5.3) - Code formatting
- TypeScript-ESLint (v8.32.1) - TypeScript-specific linting
- Multiple Prettier plugins - Organized imports, package.json formatting, JSDoc, etc.
- Tailwind CSS Plugin - Tailwind-specific formatting optimization
- Docker - Containerization
- Nginx - Web server for serving static assets
- GitHub Actions - Automated workflows for:
- Unit Testing
- Type Checking
- Linting
- Code Formatting
- Node.js (version 20.0.0 or higher)
- npm (comes with Node.js)
-
Clone the repository:
git clone https://github.com/samialateya/react-ts-setup.git cd react-ts-setup -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Your application will be available at http://localhost:5173/
npm run dev- Start development servernpm run build- Build the application for productionnpm run preview- Preview the production build locallynpm run lint- Run ESLint to check for code issuesnpm run format- Format code with Prettiernpm run format:check- Check if files are formatted correctlynpm run test- Run tests with Vitestnpm run test:ui- Run tests with Vitest UInpm run ts-check- Run TypeScript type checking
This starter comes with Tailwind CSS pre-configured. You can use Tailwind's utility classes directly in your components:
Build and run the Docker container:
# Build the Docker image
docker build -t react-ts-app .
# Run the container
docker run -p 8080:80 react-ts-appYour application will be available at http://localhost:8080
├── .github/workflows/ # GitHub Actions workflows
├── src/
│ ├── assets/ # Static assets
│ ├── lib/ # Reusable components and utilities
│ │ ├── components/ # Shared UI components
│ │ └── layouts/ # Layout components
│ ├── pages/ # Application pages
│ ├── router/ # Routing configuration
│ ├── styles/ # Global styles and Tailwind customizations
│ ├── app.tsx # Main application component
│ └── main.tsx # Application entry point
├── public/ # Public static files
├── tailwind.config.js # Tailwind CSS configuration
└── ...config files # Various configuration files
- Create new components in the appropriate directories
- Add routes in
src/router/routes.tsx - Write tests for your components in
__tests__directories - Run tests with
npm run testto ensure code quality - Use
npm run lintandnpm run formatbefore committing changes
- Keep components small and focused on a single responsibility
- Use TypeScript interfaces for props and state
- Leverage the pre-configured ESLint and Prettier rules
- Write tests for critical functionality
- Utilize the layout system for consistent UI
- Follow Tailwind CSS best practices for styling components
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- React Team
- TypeScript Team
- Vite Contributors
- Testing Library Team
- Tailwind CSS Team
Happy coding! 🚀