{"id":34957218,"url":"https://github.com/ishansasika/angular-tailwindcss-template","last_synced_at":"2026-05-23T11:02:15.406Z","repository":{"id":328493682,"uuid":"1115740554","full_name":"ishansasika/angular-tailwindcss-template","owner":"ishansasika","description":"Angular TailwindCSS Template - This is an Angular 21 template application integrated with Tailwind CSS 4. It uses standalone components (no NgModules), Vitest for testing, and npm as the package manager.","archived":false,"fork":false,"pushed_at":"2026-01-11T15:22:35.000Z","size":220,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-11T17:53:30.731Z","etag":null,"topics":["angular","angular-21","angular-tailwindcss","angular-template","angular-templates","frontend-templates"],"latest_commit_sha":null,"homepage":"https://angular-tailwindcss-template.web.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ishansasika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-13T13:07:15.000Z","updated_at":"2026-01-11T15:22:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ishansasika/angular-tailwindcss-template","commit_stats":null,"previous_names":["ishansasika/angular-tailwindcss-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/ishansasika/angular-tailwindcss-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fangular-tailwindcss-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fangular-tailwindcss-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fangular-tailwindcss-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fangular-tailwindcss-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ishansasika","download_url":"https://codeload.github.com/ishansasika/angular-tailwindcss-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fangular-tailwindcss-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33392816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","angular-21","angular-tailwindcss","angular-template","angular-templates","frontend-templates"],"created_at":"2025-12-26T22:21:14.263Z","updated_at":"2026-05-23T11:02:15.399Z","avatar_url":"https://github.com/ishansasika.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Tailwind Template\n\nA modern, production-ready Angular template built with Angular 21, TypeScript, and Tailwind CSS 4. Features a beautiful, responsive UI with multiple pages and components ready to use.\n\n## ✨ Features\n\n- 🅰️ **Angular 21** - Latest Angular with standalone components\n- 🎨 **Tailwind CSS 4** - Latest Tailwind with new @import syntax\n- 📘 **TypeScript** - Type safety and enhanced developer experience\n- 🛣️ **Angular Router** - Client-side routing with multiple pages\n- 🌓 **Dark Mode Support** - Built-in dark mode styling\n- 📱 **Responsive Design** - Mobile-first responsive components\n- ✅ **Vitest** - Fast unit testing with Vitest\n- 💅 **Prettier** - Code formatting for consistency\n- 📦 **Standalone Components** - No NgModules required\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+ and npm\n\n### Installation\n\n1. Clone the repository\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm start\n# or\nng serve\n```\n\nThe application will be available at `http://localhost:4200`\n\n## 📜 Available Scripts\n\n### Development\n\n```bash\nnpm start            # Start Angular development server\nng serve             # Alternative to npm start\nng generate component component-name  # Generate new component\n```\n\n### Production\n\n```bash\nnpm run build        # Create production build\nng build             # Alternative to npm run build\n```\n\n### Testing\n\n```bash\nnpm test             # Run unit tests with Vitest\nng test              # Alternative to npm test\n```\n\n## 📁 Project Structure\n\n```\nsrc/\n├── app/\n│   ├── components/\n│   │   ├── header/        # Navigation header with mobile menu\n│   │   └── footer/        # Footer with links and social icons\n│   ├── pages/\n│   │   ├── home/          # Landing page with hero and features\n│   │   ├── about/         # About page with team section\n│   │   ├── services/      # Services showcase page\n│   │   └── contact/       # Contact page with form\n│   ├── app.ts             # Root component\n│   ├── app.config.ts      # Application configuration\n│   └── app.routes.ts      # Route definitions\n├── styles.css             # Global styles with Tailwind directives\n└── main.ts                # Application entry point\n```\n\n## 🎨 Pages Included\n\n### Home Page\n- Hero section with gradient text\n- Feature cards with icons\n- Statistics section\n- Call-to-action sections\n\n### About Page\n- Company mission and values\n- Technology stack showcase\n- Team member profiles with images\n\n### Services Page\n- Service cards with detailed features\n- Multiple service categories\n- Interactive hover effects\n\n### Contact Page\n- Contact form with validation\n- Contact information cards\n- Social media links\n- Responsive two-column layout\n\n## 🎨 Customization\n\n### Colors\nThe template uses a blue-purple gradient theme. To customize colors, update the Tailwind classes in components or modify `tailwind.config.js`.\n\n### Components\nAll components use Angular's standalone component architecture:\n- No NgModules required\n- Each component is self-contained\n- Import dependencies directly in component metadata\n\n### Adding New Pages\n1. Generate a new component: `ng generate component pages/your-page`\n2. Create route files: `your-page.ts`, `your-page.html`, `your-page.css`\n3. Import and add the route in `src/app/app.routes.ts`\n\n## 🛠️ Tech Stack\n\n- **Angular 21** - Web application framework\n- **TypeScript 5.9** - Type-safe JavaScript\n- **Tailwind CSS 4** - Utility-first CSS framework\n- **Vite** - Build tool (via Angular build system)\n- **Vitest 4** - Unit testing framework\n- **Prettier** - Code formatting\n\n## 🚀 Deployment\n\n### Firebase Hosting (Automatic with GitHub Actions)\n\nThis template is configured for automatic deployment to Firebase Hosting via GitHub Actions.\n\n#### Initial Setup\n\n1. **Create a Firebase project** at [Firebase Console](https://console.firebase.google.com/)\n\n2. **Install Firebase CLI:**\n   ```bash\n   npm install -g firebase-tools\n   ```\n\n3. **Login to Firebase:**\n   ```bash\n   firebase login\n   ```\n\n4. **Generate a service account key:**\n   - Go to Firebase Console → Project Settings → Service Accounts\n   - Click \"Generate New Private Key\"\n   - Save the JSON file securely\n\n5. **Add Firebase secret to GitHub:**\n   - Go to your GitHub repo → Settings → Secrets and variables → Actions\n   - Click \"New repository secret\"\n   - Name: `FIREBASE_SERVICE_ACCOUNT`\n   - Value: Paste the entire contents of the service account JSON file\n   - Click \"Add secret\"\n\n6. **Push to GitHub:**\n   ```bash\n   git add .\n   git commit -m \"Setup Firebase deployment\"\n   git push origin main\n   ```\n\nYour app will automatically build and deploy to Firebase whenever you push to the `main` branch!\n\n#### Manual Deployment\n\nYou can also deploy manually:\n\n```bash\n# Build your app\nnpm run build\n\n# Deploy to Firebase\nfirebase deploy\n```\n\n**Firebase Configuration:**\n- Build directory: `dist/angular-tailwind-template/browser`\n- Single-page app: Yes (configured in `firebase.json`)\n\n## 📚 Documentation\n\n- [CLAUDE.md](./CLAUDE.md) - Architecture and development guide\n- [Angular Documentation](https://angular.dev) - Official Angular docs\n- [Tailwind CSS 4 Documentation](https://tailwindcss.com/docs) - Tailwind CSS docs\n\n## 📝 License\n\nThis project is open source and available under the MIT License.\n\n## 👤 Author\n\nCreated with ❤️ by [Ishan Sasika](https://github.com/ishansasika)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishansasika%2Fangular-tailwindcss-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fishansasika%2Fangular-tailwindcss-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishansasika%2Fangular-tailwindcss-template/lists"}