DEV Community: Ranjeet Singh The latest articles on DEV Community by Ranjeet Singh (@ranjeetsinghbnl). https://dev.to/ranjeetsinghbnl https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F332702%2F27bdbd21-9092-4fab-8855-e06c6f1c3b96.jpeg DEV Community: Ranjeet Singh https://dev.to/ranjeetsinghbnl en Stencil + Firebase + Stencil store boilerplate Ranjeet Singh Sun, 30 Aug 2020 12:10:27 +0000 https://dev.to/ranjeetsinghbnl/stencil-firebase-stencil-store-boilerplate-4f3a https://dev.to/ranjeetsinghbnl/stencil-firebase-stencil-store-boilerplate-4f3a <p>Hello everyone ๐Ÿ‘‹,</p> <p>This is my first post on <code>Dev.to</code>. I would like to share a Firebase + Stencil boilerplate.<br> I was searching for a good boilerplate to start with <code>Firebase</code> and <code>Stencil</code> but did not find any. So I thought to create my own one. </p> <p>Git Hub repo link <a href="https://github.com/ranjeetsinghbnl/stencil-firebase">Stencil Firebase</a></p> <p>In this boilerplate i tried to demonstrate how we can </p> <ul> <li>Configure Firebase in stencil web application</li> <li>Configure Stencil Store</li> <li>Configure Stencil Router</li> <li>Protecting routes</li> <li>Implement Login/Register/Update Profile/Logout </li> <li>Organised configuration in stencil application</li> </ul> <h2> Styling ๐Ÿ’€ </h2> <p>For styling i have used <code>scss</code>, however i focus more on features than styling.</p> <h2> Folder Structure ๐Ÿ—„๏ธ </h2> <div class="highlight"><pre class="highlight plaintext"><code>โ”œโ”€โ”€โ”€assets โ”‚ โ”œโ”€โ”€โ”€icon โ”‚ โ””โ”€โ”€โ”€scss โ”œโ”€โ”€โ”€components โ”‚ โ”œโ”€โ”€โ”€app-flash-message โ”‚ โ”œโ”€โ”€โ”€app-home โ”‚ โ”œโ”€โ”€โ”€app-root โ”‚ โ”œโ”€โ”€โ”€auth โ”‚ โ”‚ โ”œโ”€โ”€โ”€login โ”‚ โ”‚ โ”œโ”€โ”€โ”€profile โ”‚ โ”‚ โ””โ”€โ”€โ”€register โ”‚ โ”œโ”€โ”€โ”€common โ”‚ โ””โ”€โ”€โ”€page โ”‚ โ””โ”€โ”€โ”€home โ”œโ”€โ”€โ”€config โ”œโ”€โ”€โ”€global โ”œโ”€โ”€โ”€interface โ”œโ”€โ”€โ”€services โ”œโ”€โ”€โ”€store โ””โ”€โ”€โ”€util </code></pre></div> <p>Please feel free to use it and feedback are always welcome.</p> <p>Contributing ๐Ÿ‘</p> <ul> <li>Pull requests and ๐ŸŒŸ stars are always welcome.</li> <li>For changes, please open an issue first to discuss what you would like to change.</li> </ul> <p>Contact ๐Ÿ“ฉ<br> ๐Ÿ“ง <a href="mailto:ranjeetsingh.bnl@gmail.com"></a><a href="mailto:ranjeetsingh.bnl@gmail.com">ranjeetsingh.bnl@gmail.com</a></p> <p>๐Ÿฆ Twitter <a href="https://twitter.com/ranjeetsingh_bl">@ranjeetsingh_bl</a></p> <p>๐Ÿ’ผ Linkedin <a href="https://www.linkedin.com/in/ranjeetsinghbnl">@ranjeetsinghbnl</a></p> firebase stencil webcomponents stencilstore