DEV Community

loading...
Cover image for Stencil + Firebase + Stencil store boilerplate

Stencil + Firebase + Stencil store boilerplate

Ranjeet Singh
Full Stack developer πŸ‘¨β€πŸ’» Husband πŸ‘¨β€πŸ‘¦ Helping people with architectures and design patterns πŸ”§ Currently learning web components design system βš”οΈ Health enthusiastπŸ‹πŸ»β€β™‚οΈπŸ€
・1 min read

Hello everyone πŸ‘‹,

This is my first post on Dev.to. I would like to share a Firebase + Stencil boilerplate.
I was searching for a good boilerplate to start with Firebase and Stencil but did not find any. So I thought to create my own one.

Git Hub repo link Stencil Firebase

In this boilerplate i tried to demonstrate how we can

  • Configure Firebase in stencil web application
  • Configure Stencil Store
  • Configure Stencil Router
  • Protecting routes
  • Implement Login/Register/Update Profile/Logout
  • Organised configuration in stencil application

Styling πŸ’€

For styling i have used scss, however i focus more on features than styling.

Folder Structure πŸ—„οΈ

β”œβ”€β”€β”€assets
β”‚   β”œβ”€β”€β”€icon
β”‚   └───scss
β”œβ”€β”€β”€components
β”‚   β”œβ”€β”€β”€app-flash-message
β”‚   β”œβ”€β”€β”€app-home
β”‚   β”œβ”€β”€β”€app-root
β”‚   β”œβ”€β”€β”€auth
β”‚   β”‚   β”œβ”€β”€β”€login
β”‚   β”‚   β”œβ”€β”€β”€profile
β”‚   β”‚   └───register
β”‚   β”œβ”€β”€β”€common
β”‚   └───page
β”‚       └───home
β”œβ”€β”€β”€config
β”œβ”€β”€β”€global
β”œβ”€β”€β”€interface
β”œβ”€β”€β”€services
β”œβ”€β”€β”€store
└───util

Please feel free to use it and feedback are always welcome.

Contributing πŸ‘

  • Pull requests and 🌟 stars are always welcome.
  • For changes, please open an issue first to discuss what you would like to change.

Contact πŸ“©
πŸ“§ ranjeetsingh.bnl@gmail.com

🐦 Twitter @ranjeetsingh_bl

πŸ’Ό Linkedin @ranjeetsinghbnl

Discussion (0)