https://github.com/ashot72/stenciljs-firebase

Stenciljs Firebase Authentication (SignIn/SignUp) Modal and Firebase Database Tree Renderer Web Components
https://github.com/ashot72/stenciljs-firebase

angular firebase firebase-auth ionic ionic-web-component react stencil stenciljs vue web-components

Last synced: about 4 hours ago
JSON representation

Stenciljs Firebase Authentication (SignIn/SignUp) Modal and Firebase Database Tree Renderer Web Components

• Host: GitHub
• URL: https://github.com/ashot72/stenciljs-firebase
• Owner: Ashot72
• License: mit
• Created: 2020-02-25T17:04:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:03:40.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T12:28:22.984Z (over 1 year ago)
• Topics: angular, firebase, firebase-auth, ionic, ionic-web-component, react, stencil, stenciljs, vue, web-components
• Language: TypeScript
• Homepage:
• Size: 5.59 MB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 50
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

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.

We 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.

[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.

Our two Stencil.js web components can talk to each other even without writing a single code to the page they have been added.

The app is hosted on Firebase https://stencil-firebase-618cb.web.app

To get started.

```

       Clone the repository

       git clone https://github.com/Ashot72/stenciljs-firebase

       cd stenciljs-firebase

       # installs dependencies

       npm install

       # to run locally

        npm start

       # To build the component for production

        npm run build

       # Angular

         cd projects/angular

         npm install

         npm start

       # React

         cd projects/react.js

         npm install

         npm start

       # Vue

         cd projects/vue.js

         npm install

         npm run serve

```

Go to [Stencil Firebase Web Components Video](https://youtu.be/_h2jh4JzfRM) page

Go to [Stencil Firebase Web Components description](https://ashot72.github.io/stenciljs-firebase/) page