{"id":28855326,"url":"https://github.com/firebaseextended/make-it-so-angular","last_synced_at":"2026-03-11T12:12:05.991Z","repository":{"id":254904421,"uuid":"842194085","full_name":"FirebaseExtended/make-it-so-angular","owner":"FirebaseExtended","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-02T19:16:49.000Z","size":2010,"stargazers_count":12,"open_issues_count":6,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-02T22:55:59.968Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FirebaseExtended.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-08-13T21:37:38.000Z","updated_at":"2026-01-15T19:06:58.000Z","dependencies_parsed_at":"2025-03-31T16:34:13.738Z","dependency_job_id":"7b76f490-78ce-460b-98c3-a328b7221ae9","html_url":"https://github.com/FirebaseExtended/make-it-so-angular","commit_stats":null,"previous_names":["firebaseextended/make-it-so-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FirebaseExtended/make-it-so-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Fmake-it-so-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Fmake-it-so-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Fmake-it-so-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Fmake-it-so-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FirebaseExtended","download_url":"https://codeload.github.com/FirebaseExtended/make-it-so-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Fmake-it-so-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30380935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"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":[],"created_at":"2025-06-19T23:04:24.153Z","updated_at":"2026-03-11T12:12:05.985Z","avatar_url":"https://github.com/FirebaseExtended.png","language":"TypeScript","readme":"# \"Planning with the Gemini API\" - a Firebase AI sample app\n\nWelcome to the _Planning with the Gemini API_ sample app, an AI-powered web app\nfor to-do lists! It's an [Angular](https://angular.io/) app built using the\nGemini API and Firebase.\n\nThe [Gemini API](https://ai.google.dev/gemini-api) gives you access to Google's latest\ngenerative AI models – the Gemini family of multimodal models.\nThis _Planning with the Gemini API_ web app calls the Gemini API to generate a task list\nfrom either text or an image provided by the end user.\n\nThe backend of _Planning with the Gemini API_ is powered by\n[Firebase](https://firebase.google.com/), which is Google's platform for\nbuilding fullstack multi-platform apps. This app uses\n[Firebase Authentication](https://firebase.google.com/products/auth) for signing-in\nand authorizing end users. It also uses\n[Firestore](https://firebase.google.com/products/firestore) – a NoSQL realtime database –\nto store the to-do list items.\n\n\u003e [!CAUTION] \u003e **In its DEFAULT state, this sample app is for _EXPERIMENTATION and PROTOTYPING ONLY_.**\n\u003e It uses the [Google AI SDK for JavaScript](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)\n\u003e directly from the client-side which means that you risk potentially exposing your\n\u003e Gemini API key to malicious actors if you deploy this app.\n\u003e\n\u003e If you want to deploy this sample app or use it as a base for a production app,\n\u003e **we strongly recommend that you\n\u003e [migrate to use the Vertex AI in Firebase SDK](https://github.com/FirebaseExtended/make-it-so-angular/main/README.md#migrate-to-use-vertex-ai-in-firebase),\n\u003e which offers security options against unauthorized clients.**\n\n## Explore the app's codebase\n\n- In `src/environments/environments.ts`, you can find important configuration values:\n\n  - Within `firebase`, find the values needed to connect your app to Firebase\n    (most importantly `apiKey`, `projectId`, and `appId`).\n  - Find your Gemini API key (`gemini_api_key`).\n\n  Note that if you\n  [run the sample app in IDX](https://github.com/FirebaseExtended/make-it-so-angular/main/README.md#set-up-and-run-the-app),\n  then these config values will be automatically populated into the file for you.\n\n- In `src/app/services/task.service.ts`, you can explore how to make a basic call to\n  the Gemini API, including:\n\n  - Importing the Google AI package: `google/generative-ai`.\n  - Initializing the Google AI service and the generative model.\n  - Calling `generateContent` to send the request to Gemini with the provided prompt\n    (and image, if provided).\n\n- In `src/app/app.config.ts` and `src/app/services/task.service.ts`, you can explore\n  how to use Firebase, including:\n\n  - Using Firebase Authentication's\n    [anonymous authentication method](https://firebase.google.com/docs/auth/web/anonymous-auth)\n    to create an authenticated user account.\n  - Using Firestore to write and read to-do tasks and subtasks generated by Gemini.\n\n## Set up and run the app\n\nYou can either run the sample app in IDX (recommended) or locally.\n\n### Option 1: Run in IDX _(recommended)_\n\nThis _Planning with the Gemini API_ web app is best experienced by running it in\n[IDX](https://idx.dev/), which is Google's browser-based workspace for\nbuilding, shipping, and managing full-stack multiplatform apps.\n\nFirebase provides a custom workflow using IDX to help you quickly experiment with the sample app.\nThis workflow automatically sets up a new Firebase project with Authentication and Firestore\nenabled, opens the sample app in IDX, and sets up the app to use Firebase and the Gemini API.\nThe project and app are yours to experiment with and explore how Gemini works.\n\n[GET STARTED WITH THE SAMPLE APP IN IDX](https://console.firebase.google.com/?idxSampleProjectTemplateId=gemini\u0026dlAction=IdxSampleProject)\n\nYou can also kick-off this custom workflow from the Firebase console in the\n_Build with Gemini_ section (find the \"Experiment with a Gemini sample app\" banner).\n\nHere's some additional information about this custom workflow:\n\n- To somewhat protect your Gemini API key, the workflow has imposed a quota limit on the\n  API key of 10 RPM.\n- This workflow creates a new IDX workspace. If you run out of workspace quota, go to\n  [idx.google.com](idx.google.com) to delete an old workspace.\n\n### Option 2: Run locally\n\nYou can also run this _Planning with the Gemini API_ web app locally. You'll just need\nto complete some manual setup steps.\n\n#### Prerequisites\n\n- Node.js v20+\n- npm v10+\n- Angular CLI 18+\n\n#### Setup instructions\n\n1.  Set up Firebase:\n    a. Create a new Firebase project in the\n    [Firebase console](https://console.firebase.google.com/).\n    You can skip setting up Google Analytics.\n    b. Enable [Firestore](https://console.firebase.google.com/u/0/project/_/firestore)\n    and [anonymous authentication](https://console.firebase.google.com/u/0/project/_/authentication)\n    in your new project.\n    c. Create a new Firebase web app in your new project.\n    You can skip setting up Firebase Hosting.\n    d. Copy your Firebase config object, and replace the placeholder values in the\n    `src/environments/environments.ts` file of the sample app.\n\n2.  Set up the Gemini API:\n    a. [Get a Gemini API key](https://aistudio.google.com/app/apikey) in Google AI Studio.\n    Use the Firebase project you just created.\n    b. Add your Gemini API key into the `src/environments/environments.ts` file of the sample app.\n\n3.  Run `npm install` to install the app's dependencies.\n\n4.  Serve the app:\n    a. Run `ng serve` to start the Angular development server.\n    b. Open your browser and navigate to `http://localhost:4200`.\n\n## Interact with the app\n\n1.  Create a new task.\\\n    Click the \"New task\" button on the left to initiate the creation of a new task.\n    Gemini suggests a task title. Edit the title as desired.\n\n2.  Generate subtasks.\\\n    Gemini can generate a list of subtasks based either on your title and/or an uploaded image.\n\n3.  Save the task to add it to the dashboard of to-do tasks.\n\n## Migrate to use Vertex AI in Firebase\n\n**In its DEFAULT state, this sample app is for _EXPERIMENTATION and PROTOTYPING ONLY_.**\nIt uses the [Google AI SDK for JavaScript](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)\ndirectly from the client-side which means that you risk potentially exposing your Gemini API key\nto malicious actors if you deploy this app.\n\nIf you want to deploy this sample app or use it as a base for a production app,\n**we strongly recommend that you migrate to use the\n[Vertex AI in Firebase SDK](https://firebase.google.com/docs/vertex-ai), which offers\nsecurity options against unauthorized clients.** The sample app's codebase is already set up\nto use the Vertex AI in Firebase SDK, and you just need to do a couple extra steps to set up\nyour Firebase project (as described below).\n\n\u003e [!NOTE]\n\u003e The sample app includes a Terraform config file ([`prod.tf.example`](prod.tf.example))\n\u003e that sets up Vertex AI in Firebase, including helping you set up billing,\n\u003e enabling the required APIs,\n\u003e and setting up [Firebase App Check](https://firebase.google.com/products/app-check).\n\n1.  In the Firebase console, go to the\n    [**Build with Gemini** page](https://console.firebase.google.com/project/_/genai),\n    and then click the _Vertex AI in Firebase_ card to launch a workflow that helps you\n    do the following tasks (if they're not already done):\n\n    - Upgrade your project to use the\n      [pay-as-you-go Blaze pricing plan](https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered).\n    - Enable the following two APIs for your project:\\\n      [Vertex AI API](https://console.cloud.google.com/apis/library/aiplatform.googleapis.com?project=_)\n      and\n      [Firebase ML API](https://console.cloud.google.com/apis/library/firebaseml.googleapis.com?project=_)\n\n2.  As soon as you start seriously developing your app,\n    [set up Firebase App Check](https://firebase.google.com/docs/vertex-ai/app-check)\n    to protect your app from abuse by unauthorized clients.\n\n3.  Follow security best practices by cleaning up your Firebase project and sample app:\n\n    - If you're no longer using your Gemini API key, then delete it.\n\n      - In the [**API keys** section of Google AI Studio](https://aistudio.google.com/app/apikey),\n        view and delete your Gemini API key.\n      - In the sample app's codebase, delete references to the Gemini API key in the following places:\n        - `google_apikeys_key` resource entry in `main.tf`\n        - `gemini_api_key` in both `src/environments/environments.ts` and `src/environments/environments.ts.tmpl`\n\n    - If you're no longer using the Google AI Gemini API, then disable it in your project\n      and delete references to it in your sample app's codebase:\n      - Disable the API in the Google Cloud console:\n        [generativelanguage.googleapis.com](https://console.cloud.google.com/apis/library/generativelanguage.googleapis.com?project=_)\n      - Delete references to `generativelanguage.googleapis.com`, including the\n        `google_service_usage_consumer_quota_override` resource entry in `main.tf`.\n\n## Troubleshooting\n\n```\nError when reading or editing Project \"\u003cproject-id\u003e\": Get \"https://cloudresourcemanager.googleapis.com/v1/projects/\u003cproject-id\u003e?alt=json\u0026prettyPrint=false\":\ncompute: Received 500\n```\n\nThis error happens because authentication has timed-out. Here's how to resolve it:\n\n1.  In Project IDX, open a new terminal.\n2.  In the terminal, run `terraform apply --auto-approve`, and then click continue when prompted to log in.\n3.  Wait until the command succeeds.\n4.  Reload the web preview, if necessary.\n\n```\nError loading Gemini API key. Please rerun Terraform with terraform apply --auto-approve\"\n```\n\nThis error happens because Terraform failed to provision some resources\nduring initialization, such as API keys. Here's how to resolve it:\n\n1.  In Project IDX, open a new terminal.\n2.  In the terminal, run `terraform apply --auto-approve`, and then click\n    continue when prompted to log in.\n3.  Wait until the command succeeds.\n4.  Reload the web preview, if necessary.\n\n```\nCheck Firestore permissions in Firebase Console: link\n```\n\nThis error happens because\n[Firestore security rules](https://firebase.google.com/docs/firestore/security/get-started)\nare blocking requests from your app. Here's how to resolve it:\n\n1.  Go to the Firebase console using the link provided in the error message.\n2.  Check that the security rules are what you expect. In particular,\n    `timestamp.date` should be in the future.\n3.  Reload the web preview, if necessary.\n\n## Docs\n\n- [Firebase Support](https://firebase.google.com/support)\n- [Google AI Gemini API documentation](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)\n  (for experimentation and prototyping)\n- [Vertex AI in Firebase documentation](https://firebase.google.com/docs/vertex-ai) (for production apps)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebaseextended%2Fmake-it-so-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirebaseextended%2Fmake-it-so-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebaseextended%2Fmake-it-so-angular/lists"}