{"id":26873584,"url":"https://github.com/yousifabozid/template-react-ts","last_synced_at":"2026-04-04T16:31:48.284Z","repository":{"id":282127464,"uuid":"947570301","full_name":"YousifAbozid/template-react-ts","owner":"YousifAbozid","description":"Modern React 19 starter template with TypeScript, Vite, and Tailwind CSS v4. Features comprehensive theming system with semantic colors, dark mode support, ESLint/Prettier configuration, and Husky pre-commit hooks. Ready for production with optimized builds 🚀","archived":false,"fork":false,"pushed_at":"2025-03-28T15:05:09.000Z","size":362,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"source","last_synced_at":"2025-03-28T16:23:05.536Z","etag":null,"topics":["dark-theme","eslint","husky","prettier","react-v19","react19-template","reactjs","tailwindcss","tailwindcss-v4","typescript"],"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/YousifAbozid.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}},"created_at":"2025-03-12T22:42:06.000Z","updated_at":"2025-03-28T15:04:03.000Z","dependencies_parsed_at":"2025-03-28T16:23:10.169Z","dependency_job_id":"c303226f-ec1f-4e64-8160-42a0bac57337","html_url":"https://github.com/YousifAbozid/template-react-ts","commit_stats":null,"previous_names":["yousifabozid/portfolio","yousifabozid/template-react-ts"],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YousifAbozid%2Ftemplate-react-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YousifAbozid%2Ftemplate-react-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YousifAbozid%2Ftemplate-react-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YousifAbozid%2Ftemplate-react-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YousifAbozid","download_url":"https://codeload.github.com/YousifAbozid/template-react-ts/tar.gz/refs/heads/source","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246443534,"owners_count":20778252,"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":["dark-theme","eslint","husky","prettier","react-v19","react19-template","reactjs","tailwindcss","tailwindcss-v4","typescript"],"created_at":"2025-03-31T09:19:33.260Z","updated_at":"2025-12-30T23:14:26.534Z","avatar_url":"https://github.com/YousifAbozid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React TypeScript Template ⚛️\n\n\u003e ✨ Production-ready React template with TypeScript, Vite, Tailwind CSS v4, and comprehensive tooling. Features functional architecture, dark mode support, and complete developer experience.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/react-%2320232a.svg?style=flat\u0026logo=react\u0026logoColor=%2361DAFB)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n[![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\n\n## 🚀 Features\n\n- ⚡ **Lightning Fast** - Powered by Vite for instant dev server and optimized builds\n- 🎨 **Modern Styling** - Tailwind CSS v4 with dark mode support and custom design system\n- 🔧 **TypeScript First** - Full type safety with strict configuration\n- 📱 **Responsive Design** - Mobile-first approach with adaptive layouts\n- 🎭 **Smooth Animations** - Framer Motion integration for fluid user interactions\n- 🗂️ **Smart Architecture** - Feature-based folder structure with shared components\n- 🔄 **State Management** - TanStack Query for server state with devtools\n- 🛡️ **Form Validation** - React Hook Form with Zod schema validation\n- 🧭 **Routing** - React Router v7 with type-safe navigation\n- 🌙 **Theme System** - Comprehensive dark/light mode with system preference detection\n- 📦 **Component Library** - Pre-built UI components with consistent design\n- 🧪 **Code Quality** - ESLint, Prettier, TypeScript, and pre-commit hooks\n- 🔍 **Bundle Analysis** - Built-in tools for analyzing build output\n- 🎯 **Developer Experience** - Hot reload, auto-formatting, and intelligent tooling\n\n## 📦 Tech Stack\n\n### Core\n\n- **React 19** - Latest React with Concurrent Features\n- **TypeScript 5.9** - Static type checking\n- **Vite 7** - Next generation frontend tooling\n\n### Styling \u0026 UI\n\n- **Tailwind CSS v4** - Utility-first CSS framework\n- **Framer Motion 12** - Production-ready motion library\n- **Lucide React** - Beautiful \u0026 consistent icons\n\n### State \u0026 Forms\n\n- **TanStack Query v5** - Powerful data synchronization\n- **React Hook Form 7** - Performant forms with easy validation\n- **Zod 4** - TypeScript-first schema validation\n\n### Development Tools\n\n- **ESLint 9** - Code linting with React-specific rules\n- **Prettier 3** - Code formatting\n- **Husky 9** - Git hooks for code quality\n- **lint-staged** - Run linters on staged files\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── app/                    # Application core\n│   ├── App.tsx            # Main app component\n│   ├── AppProviders.tsx   # Context providers setup\n│   └── AppRouter.tsx      # Routing configuration\n├── features/              # Feature-based modules\n│   ├── Home/             # Landing page feature\n│   └── NotFound/         # 404 error page\n└── shared/               # Shared utilities\n    ├── components/       # Reusable UI components\n    │   ├── ui/          # Base UI component library\n    │   ├── ErrorBoundary.tsx\n    │   └── ThemeToggle.tsx\n    ├── contexts/        # React contexts\n    │   ├── ThemeProvider.tsx\n    │   └── ToastContext.tsx\n    ├── hooks/           # Custom React hooks\n    ├── lib/             # External library configurations\n    ├── styles/          # Global styles and Tailwind imports\n    └── utils/           # Helper functions and constants\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **Node.js 18+** (Latest LTS recommended)\n- **npm** or **yarn** or **pnpm**\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/YousifAbozid/template-react-ts.git\n   cd template-react-ts\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Start development server**\n\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:3000`\n\n## 📋 Available Scripts\n\n| Command                 | Description                               |\n| ----------------------- | ----------------------------------------- |\n| `npm run dev`           | Start development server                  |\n| `npm run build`         | Build for production                      |\n| `npm run preview`       | Preview production build                  |\n| `npm run build:analyze` | Build with bundle analysis                |\n| `npm run analyze`       | Analyze existing bundle                   |\n| `npm run type-check`    | Run TypeScript type checking              |\n| `npm run lint`          | Lint code with ESLint                     |\n| `npm run lint:fix`      | Fix ESLint issues automatically           |\n| `npm run format`        | Format code with Prettier                 |\n| `npm run format:check`  | Check code formatting                     |\n| `npm run fix-all`       | Run both linting and formatting fixes     |\n| `npm run test`          | Run all checks (format, lint, type-check) |\n| `npm run test:ci`       | Run tests and build for CI                |\n| `npm run upgrade`       | Update dependencies interactively         |\n\n## 🎨 Styling System\n\n### Tailwind CSS v4\n\nThis template uses the latest Tailwind CSS v4 with:\n\n- **Custom design tokens** defined in CSS\n- **Dark mode support** with system preference detection\n- **Responsive design utilities** for all screen sizes\n- **Custom color palette** with semantic naming\n\n### Design Tokens\n\n```css\n/* Example of custom design system */\n--color-accent-primary: #3b82f6;\n--color-accent-secondary: #1d4ed8;\n--color-background-primary: #ffffff;\n--color-text-primary: #111827;\n```\n\n### Component Architecture\n\n- **Base UI components** in `src/shared/components/ui/`\n- **Feature-specific components** in respective feature folders\n- **Consistent props interface** across all components\n- **Theme-aware styling** with CSS custom properties\n\n## 🧩 Key Features Deep Dive\n\n### Theme System\n\n- 🌙 **Dark/Light mode** with smooth transitions\n- 🔄 **System preference detection** and persistence\n- 🎨 **Consistent color palette** across all components\n- ⚡ **Zero flash** theme initialization\n\n### Form Handling\n\n- 📝 **React Hook Form** for performance\n- ✅ **Zod validation** for type safety\n- 🔄 **Real-time validation** with user-friendly errors\n- 📱 **Accessible form components**\n\n### State Management\n\n- 🔄 **Server state** handled by TanStack Query\n- 🏪 **Client state** with React hooks and Context API\n- 📡 **Background sync** and cache management\n- 🔧 **DevTools integration** for debugging\n\n## 🔧 Configuration\n\n### TypeScript Configuration\n\n- **Strict mode enabled** for maximum type safety\n- **Path aliases** configured for clean imports\n- **Modern ES features** with proper target settings\n\n### ESLint \u0026 Prettier\n\n- **React-specific rules** for hooks and JSX\n- **TypeScript integration** with type-aware linting\n- **Automatic formatting** on save and commit\n- **Consistent code style** across the project\n\n### Vite Configuration\n\n- **Path aliases** for cleaner imports (`@/`, `@/features`, etc.)\n- **Optimized builds** with tree-shaking and code splitting\n- **Development server** with hot module replacement\n- **Bundle analysis** tools integration\n\n## 🚀 Deployment\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\n### Deploy to Popular Platforms\n\n#### Vercel\n\n```bash\nnpm i -g vercel\nvercel --prod\n```\n\n#### Netlify\n\n```bash\nnpm run build\n# Upload dist/ folder to Netlify\n```\n\n#### GitHub Pages\n\n```bash\nnpm run build\n# Configure GitHub Pages to serve from dist/\n```\n\n## 🤝 Contributing\n\n1. **Fork the repository**\n2. **Create a feature branch**: `git checkout -b feature/amazing-feature`\n3. **Make your changes** following the project conventions\n4. **Run tests**: `npm run test`\n5. **Commit changes**: `git commit -m 'Add amazing feature'`\n6. **Push to branch**: `git push origin feature/amazing-feature`\n7. **Open a Pull Request**\n\n### Development Guidelines\n\n- ✅ **Write TypeScript** with proper typing\n- ✅ **Follow ESLint rules** - automated with pre-commit hooks\n- ✅ **Use semantic commit messages**\n- ✅ **Add tests** for new features\n- ✅ **Update documentation** when needed\n\n## 📖 Learn More\n\n- **[React Documentation](https://react.dev/)** - Learn React fundamentals\n- **[TypeScript Handbook](https://www.typescriptlang.org/docs/)** - TypeScript reference\n- **[Vite Guide](https://vitejs.dev/guide/)** - Vite build tool\n- **[Tailwind CSS](https://tailwindcss.com/docs)** - Utility-first CSS\n- **[TanStack Query](https://tanstack.com/query)** - Data fetching library\n- **[Framer Motion](https://www.framer.com/motion/)** - Animation library\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Yousif Abozid**\n\n- 🐙 GitHub: [@YousifAbozid](https://github.com/YousifAbozid)\n- 📧 Email: yousif.abozid@yahoo.com\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ Star this repository if you find it helpful!**\n\nMade with ❤️ and ⚡ by [Yousif Abozid](https://github.com/YousifAbozid)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousifabozid%2Ftemplate-react-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyousifabozid%2Ftemplate-react-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousifabozid%2Ftemplate-react-ts/lists"}