{"id":16790315,"url":"https://github.com/cerivitos/angular-tailwind-firebase","last_synced_at":"2026-04-19T03:31:19.198Z","repository":{"id":102364956,"uuid":"475479532","full_name":"cerivitos/angular-tailwind-firebase","owner":"cerivitos","description":"A starter template for web apps using Angular v13, Tailwind CSS, Firebase and Vercel","archived":false,"fork":false,"pushed_at":"2022-03-29T15:02:29.000Z","size":291,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T01:21:19.225Z","etag":null,"topics":["angular","angular13","angularfire","firebase","tailwindcss","template","vercel"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/cerivitos.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":"2022-03-29T14:26:29.000Z","updated_at":"2022-03-29T15:05:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"2941a87e-bb7b-4021-beef-0fa8a79e45de","html_url":"https://github.com/cerivitos/angular-tailwind-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/cerivitos/angular-tailwind-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2Fangular-tailwind-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2Fangular-tailwind-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2Fangular-tailwind-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2Fangular-tailwind-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cerivitos","download_url":"https://codeload.github.com/cerivitos/angular-tailwind-firebase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2Fangular-tailwind-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31993667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","angular13","angularfire","firebase","tailwindcss","template","vercel"],"created_at":"2024-10-13T08:29:26.839Z","updated_at":"2026-04-19T03:31:19.181Z","avatar_url":"https://github.com/cerivitos.png","language":"HTML","readme":" \u003cp align=\"center\"\u003e🔥🔥🔥\u003c/p\u003e\n \u003ch1 align=\"center\"\u003eAngular-Tailwind-Firebase Starter Template\u003c/h1\u003e\n\n\n###\n\n\n\nThis is a starter template with my commonly used dependencies for building web apps with Angular v13.    \n\n\n\n## Tailwind\n\n[Tailwind CSS v3](https://tailwindcss.com) is set up with the `line-clamp` plugin which is useful to control text in fixed dimension containers.\n\n## Firebase\n\nStart by [creating](https://firebase.com) a Firebase web project and copy the config object to `environment.ts`.\n\n```\n firestoreConfig: {\n    apiKey: '\u003cyour-key\u003e',\n    authDomain: '\u003cyour-project-authdomain\u003e',\n    databaseURL: '\u003cyour-database-URL\u003e',\n    projectId: '\u003cyour-project-id\u003e',\n    storageBucket: '\u003cyour-storage-bucket\u003e',\n    messagingSenderId: '\u003cyour-messaging-sender-id\u003e',\n  },\n ```\n \nTip: Do check out [ReCaptcha v3](https://www.google.com/recaptcha/about) which is really useful for Firestore/Real Time Database security. Unfortunately implementation in Angular is not very well documented. Usually, I implement the ReCaptcha check in a Service which handles my calls to Firebase.\n\n```\n...\nimport {\n  initializeAppCheck,\n  ReCaptchaV3Provider,\n} from '@angular/fire/app-check';\n...\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  constructor(\n    private firestore: AngularFirestore,\n    private http: HttpClient\n  ) {\n    initializeAppCheck(getApp(), {\n      provider: new ReCaptchaV3Provider(environment.appCheckKey),\n      isTokenAutoRefreshEnabled: true,\n    });\n  }\n ...\n}\n```\n\nRemember to include your [unique App Check key](https://firebase.google.com/docs/app-check/web/recaptcha-provider) from ReCaptcha v3 in Firebase Settings.\n\n## Vercel Serverless Functions\n\nI usually use [Vercel](https://vercel.com) for hosting. Vercel allows you to create serverless functions simply by creating an exported function in the `/api` folder. For example, this function will return 'Hello World!' at the end point `https://your-app.vercel.app/api/query` when hosted on Vercel.\n\n**api/query.ts**\n```\nimport type { VercelRequest, VercelResponse } from '@vercel/node';\n\nexport default (req: VercelRequest, res: VercelResponse) =\u003e {\n  res.status(200).send('Hello World!);\n};\n```\n\nTypes for Vercel functions are already included.\n\n## Miscellaneous\n\n[Web APIs for Angular](https://github.com/ng-web-apis/common) are included. This provides useful injection tokens to access common Web APIs. For example, `WINDOW` allows access to the global `window` object.\n\nMy go-to toast library is [Hot Toast](https://github.com/ngneat/hot-toast).\n\n## License\nMIT (2022)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerivitos%2Fangular-tailwind-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcerivitos%2Fangular-tailwind-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerivitos%2Fangular-tailwind-firebase/lists"}