If you want to try or use project please visit: https://fir-playgrounds.firebaseapp.com

I did tests on these browsers:

• Google Chrome -> Version 71.0.3578.98 (Official Build) (64-bit)
• Firefox Quantim
• Google Chrome Canary -> Version 73.0.3650.0 (Official Build) canary (64-bit)
• Opera Version:57.0.3098.106
• Safari
• Google Chrome mobile
• Safari mobile

Each day my mailbox receives a lot of emails. To reduce my reading time I've been using a lot of labels (at this moment I have 500+ diffferent labels). I'd like to introduce a new term: structure data.

Structure data - email message has at least one label.

I created this tool because I'd like to increase my productivity. First version could create a filter. Filter creates or update an existing label.

Gmail has two great features: "Labels" and "Filters". What's my understation about Labels and Filters. Labels are similar like folders. Filters automatically labels arriving emails.

I don't have deadline or budget restrictions :) I decided to use only the latest techologies trends. Technology stack includes:

• Native web components.
• Gmail API
• Fireabase

Build tools:

• lerna
• webpack

Juggling a multimodule project over multiple repos is like trying to teach a newborn baby how to ride a bike. I'm following a monorepo approach, all officially maintained modules are in the same repo. This is quite taboo but let's look at the pros and cons:

Pros

• Single lint, build, test and release process.
• Easy to coordinate changes across modules.
• Single place to report issues.
• Easier to setup a development environment.

Cons

• Codebase looks more intimidating.
• Repo is bigger in size.

lerna run install
lerna run build
http-server ./develop/web/dist

• Automated testing with Headless Chrome

• Google - How to web components
• Custom elements - everywhere
• Vaadin router
• lit element

• Gmail API Overview
• Implementing Server-Side Authorization
• Choose Auth Scopes
• Access Google APIs more easily
• Gmail documentation
• Using shadow DOM
• How to Use HTML & With Shadow DOM
• Browser Quickstart
• Custom Elements v1: Reusable Web Components
• Let's Build Web Components! Part 5: LitElement