{"id":18849720,"url":"https://github.com/ashot72/stenciljs-firebase","last_synced_at":"2026-04-02T03:02:38.847Z","repository":{"id":38176908,"uuid":"243052964","full_name":"Ashot72/stenciljs-firebase","owner":"Ashot72","description":"Stenciljs Firebase Authentication (SignIn/SignUp) Modal and Firebase Database Tree Renderer Web Components","archived":false,"fork":false,"pushed_at":"2023-01-06T02:03:40.000Z","size":5864,"stargazers_count":1,"open_issues_count":50,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-30T02:16:03.682Z","etag":null,"topics":["angular","firebase","firebase-auth","ionic","ionic-web-component","react","stencil","stenciljs","vue","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Ashot72.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}},"created_at":"2020-02-25T17:04:35.000Z","updated_at":"2020-05-14T17:44:51.000Z","dependencies_parsed_at":"2023-02-05T02:30:31.080Z","dependency_job_id":null,"html_url":"https://github.com/Ashot72/stenciljs-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ashot72/stenciljs-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashot72%2Fstenciljs-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashot72%2Fstenciljs-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashot72%2Fstenciljs-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashot72%2Fstenciljs-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ashot72","download_url":"https://codeload.github.com/Ashot72/stenciljs-firebase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashot72%2Fstenciljs-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31294826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:43:37.129Z","status":"online","status_checked_at":"2026-04-02T02:00:08.535Z","response_time":89,"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","firebase","firebase-auth","ionic","ionic-web-component","react","stencil","stenciljs","vue","web-components"],"created_at":"2024-11-08T03:22:24.419Z","updated_at":"2026-04-02T03:02:38.817Z","avatar_url":"https://github.com/Ashot72.png","language":"TypeScript","readme":"I built two Stencil.js web components. The first one is Firebase Authentication Modal (sign in and sign up) web component and the second one is Firebase Database Tree Renderer web component. One great advantage is that a web component allows you to encapsulate logic and a user interface in one custom HTML tag, which can be used across our page or even reuse across multiple projects. We just take the JavaScript file and drop it into any other project.\n\nWe can even have a project, say, in Angular, React or Vue and use the same web component in all of them. That is a great advantage as normally we would not be able to share React components with Angular or Vue for example. We can also publish our component or a set of components even to npm and then install it into any project that we want to use it with npm install command. We are going exactly to do that; publish our components to npm and use it both in Angular, React and Vue projects.\n\n[Stencil.js](https://stenciljs.com/) gives us a way nicer syntax and lot of convenience features which we can use to write web components in a more convenient and error safe way using JavaScript and also Typescript. If you are familiar with React, Stencil uses JSX and the same principles for displaying data.\n\nOur two Stencil.js web components can talk to each other even without writing a single code to the page they have been added.\n\nThe app is hosted on Firebase https://stencil-firebase-618cb.web.app\n\nTo get started.\n\n```\n       Clone the repository\n\n       git clone https://github.com/Ashot72/stenciljs-firebase\n       cd stenciljs-firebase\n\n       # installs dependencies\n       npm install\n\n       # to run locally\n        npm start\n\n       # To build the component for production\n        npm run build\n\n       # Angular\n         cd projects/angular\n         npm install\n         npm start\n\n       # React\n         cd projects/react.js\n         npm install\n         npm start\n\n       # Vue\n         cd projects/vue.js\n         npm install\n         npm run serve\n```\n\nGo to [Stencil Firebase Web Components Video](https://youtu.be/_h2jh4JzfRM) page\n\nGo to [Stencil Firebase Web Components description](https://ashot72.github.io/stenciljs-firebase/) page\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashot72%2Fstenciljs-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashot72%2Fstenciljs-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashot72%2Fstenciljs-firebase/lists"}