Mail helper

Mail helper is a third party gmail application that helps you to create Gmail label, Gmail filter, Background colour and colour. Public URL is: https://fir-playgrounds.firebaseapp.com

Browser support

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

Why I'm working on this tool ?

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.

More about Gmail labels and filters

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.

Architecture

Project uses a simple archicture. Application has a simple front view. Technology stack uses

• Native web components
• Gmail API
• Firebase
• Lerna
• Webpack
• Karma
• Redux
• Jest
• TestCafe

Build tools:

• lerna
• webpack

Why this project is a mono repo ?

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.

How to setup locally

lerna run install
lerna run build
lerna run start
lerna run test

Testing

• Automated testing with Headless Chrome

Github repos:

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

Resources / Hot links:

Gmail

• Gmail API Overview
• Implementing Server-Side Authorization
• Choose Auth Scopes
• Access Google APIs more easily
• Gmail documentation
• Browser Quickstart

Dom

• Using shadow DOM

Template

• How to Use HTML & With Shadow DOM
• Custom Elements v1: Reusable Web Components
• Let's Build Web Components! Part 5: LitElement
• https://open-wc.org/
• https://open-wc.org/testing/#setup

Components

Vaadin

• https://vaadin.com/router

Material Components (https://material-components.github.io/material-components-web-catalog)

• Tabs

Open wc resources

• full setup: https://open-wc.org/testing/testing-karma.html#default-configuration
• karma-esm plugin: https://open-wc.org/testing/karma-esm.html
• es-dev-server: https://open-wc.org/developing/es-dev-server.html
• repo: https://github.com/open-wc/open-wc