{"id":28907676,"url":"https://github.com/samialateya/react-ts-setup","last_synced_at":"2026-04-08T18:03:06.248Z","repository":{"id":295944808,"uuid":"990136236","full_name":"samialateya/react-ts-setup","owner":"samialateya","description":"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.","archived":false,"fork":false,"pushed_at":"2025-05-28T06:06:01.000Z","size":126,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-28T07:18:38.923Z","etag":null,"topics":["docker","eslint","prettier","reactjs","tawilwindcss","taypescript","vitetest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samialateya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-25T15:21:31.000Z","updated_at":"2025-05-28T06:06:04.000Z","dependencies_parsed_at":"2025-05-28T07:18:46.183Z","dependency_job_id":"c1f114e4-e459-4aac-a3d0-bdff6e87d207","html_url":"https://github.com/samialateya/react-ts-setup","commit_stats":null,"previous_names":["samialateya/react-ts-setup"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/samialateya/react-ts-setup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samialateya%2Freact-ts-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samialateya%2Freact-ts-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samialateya%2Freact-ts-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samialateya%2Freact-ts-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samialateya","download_url":"https://codeload.github.com/samialateya/react-ts-setup/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samialateya%2Freact-ts-setup/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261153583,"owners_count":23116915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","eslint","prettier","reactjs","tawilwindcss","taypescript","vitetest"],"created_at":"2025-06-21T16:05:04.274Z","updated_at":"2025-12-30T22:28:13.111Z","avatar_url":"https://github.com/samialateya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React TypeScript Starter Setup\n\n![React](https://img.shields.io/badge/React-19.1.0-blue)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)\n![Vite](https://img.shields.io/badge/Vite-6.3.5-purple)\n![ESLint](https://img.shields.io/badge/ESLint-9.25.0-yellow)\n![Prettier](https://img.shields.io/badge/Prettier-3.5.3-pink)\n![React Router](https://img.shields.io/badge/React_Router-7.5.3-red)\n![Vitest](https://img.shields.io/badge/Vitest-3.1.4-green)\n![Testing Library](https://img.shields.io/badge/Testing_Library-16.3.0-orange)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-latest-blue)\n\nA 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.\n\n## Features\n\n- 🚀 **Optimized Build Setup** - Vite for lightning-fast development and production builds\n- ✅ **Type Safety** - Full TypeScript integration with strict type checking\n- 📱 **Routing** - React Router pre-configured with example routes\n- 🧪 **Testing Framework** - Vitest + React Testing Library for robust testing\n- 🔍 **Code Quality Tools** - ESLint and Prettier with intelligent defaults\n- 🔄 **CI/CD Ready** - GitHub Actions workflows for linting, type checking, testing, and formatting\n- 🐳 **Docker Support** - Production-ready Dockerfile for containerized deployment with Nginx\n- 🧩 **Component Architecture** - Organized layout and page structure\n- 💅 **Styling Solution** - Tailwind CSS for utility-first styling\n\n## Technologies\n\n### Core\n\n- **React** (v19.1.0) - UI component library\n- **TypeScript** (v5.8.3) - Type-safe JavaScript\n- **React Router DOM** (v7.5.3) - Client-side routing\n- **Tailwind CSS** - Utility-first CSS framework\n\n### Build Tools\n\n- **Vite** (v6.3.5) - Next-generation frontend tooling\n- **Node.js** (\u003e=20.0.0) - JavaScript runtime\n\n### Testing\n\n- **Vitest** (v3.1.4) - Unit testing framework\n- **React Testing Library** (v16.3.0) - React component testing\n- **Testing Library/User Event** (v14.6.1) - User interaction simulation\n- **jsdom** (v26.1.0) - Browser environment simulation\n\n### Code Quality\n\n- **ESLint** (v9.25.0) - JavaScript/TypeScript linting\n- **Prettier** (v3.5.3) - Code formatting\n- **TypeScript-ESLint** (v8.32.1) - TypeScript-specific linting\n- **Multiple Prettier plugins** - Organized imports, package.json formatting, JSDoc, etc.\n- **Tailwind CSS Plugin** - Tailwind-specific formatting optimization\n\n### Deployment\n\n- **Docker** - Containerization\n- **Nginx** - Web server for serving static assets\n\n### CI/CD\n\n- **GitHub Actions** - Automated workflows for:\n  - Unit Testing\n  - Type Checking\n  - Linting\n  - Code Formatting\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (version 20.0.0 or higher)\n- npm (comes with Node.js)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/samialateya/react-ts-setup.git\n   cd react-ts-setup\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\nYour application will be available at `http://localhost:5173/`\n\n## Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build the application for production\n- `npm run preview` - Preview the production build locally\n- `npm run lint` - Run ESLint to check for code issues\n- `npm run format` - Format code with Prettier\n- `npm run format:check` - Check if files are formatted correctly\n- `npm run test` - Run tests with Vitest\n- `npm run test:ui` - Run tests with Vitest UI\n- `npm run ts-check` - Run TypeScript type checking\n\n## Using Tailwind CSS\n\nThis starter comes with Tailwind CSS pre-configured. You can use Tailwind's utility classes directly in your components:\n\n## Docker Deployment\n\nBuild and run the Docker container:\n\n```bash\n# Build the Docker image\ndocker build -t react-ts-app .\n\n# Run the container\ndocker run -p 8080:80 react-ts-app\n```\n\nYour application will be available at `http://localhost:8080`\n\n## Project Structure\n\n```\n├── .github/workflows/   # GitHub Actions workflows\n├── src/\n│   ├── assets/          # Static assets\n│   ├── lib/             # Reusable components and utilities\n│   │   ├── components/  # Shared UI components\n│   │   └── layouts/     # Layout components\n│   ├── pages/           # Application pages\n│   ├── router/          # Routing configuration\n│   ├── styles/          # Global styles and Tailwind customizations\n│   ├── app.tsx          # Main application component\n│   └── main.tsx         # Application entry point\n├── public/              # Public static files\n├── tailwind.config.js   # Tailwind CSS configuration\n└── ...config files      # Various configuration files\n```\n\n## Development Workflow\n\n1. Create new components in the appropriate directories\n2. Add routes in `src/router/routes.tsx`\n3. Write tests for your components in `__tests__` directories\n4. Run tests with `npm run test` to ensure code quality\n5. Use `npm run lint` and `npm run format` before committing changes\n\n## Best Practices\n\n- Keep components small and focused on a single responsibility\n- Use TypeScript interfaces for props and state\n- Leverage the pre-configured ESLint and Prettier rules\n- Write tests for critical functionality\n- Utilize the layout system for consistent UI\n- Follow Tailwind CSS best practices for styling components\n\n## Contribution\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Acknowledgments\n\n- React Team\n- TypeScript Team\n- Vite Contributors\n- Testing Library Team\n- Tailwind CSS Team\n\n---\n\nHappy coding! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamialateya%2Freact-ts-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamialateya%2Freact-ts-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamialateya%2Freact-ts-setup/lists"}