YagoLopez

Frontend Architecture Proposal

• React Query for asynchronous server state management
• Redux Toolkit for synchronous UI state management
• Typescript
• Testing: unit tests with Jest and e2e tests with Cypress
• Micro Frontend Architecture using Module Federation
• Mono Repository management using NX
• Decoupling FE from BE using the Repository Pattern
• Link 1

YagoLopez

{
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36",
  "environment": {
    "networkUserAgent": "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse",
    "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36",
    "benchmarkIndex": 1044
  },
  "lighthouseVersion": "4.3.1",
  "fetchTime": "2020-04-05T16:09:15.214Z",
  "requestedUrl": "https://book-list.now.sh/",

YagoLopez

/* Attribution: http://techslides.com/how-to-parse-and-search-json-in-javascript */

//return an array of objects according to key, value, or key and value matching
function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));    
        } else 

YagoLopez

/**
 * Copyright (c) 2016, Tiernan Cridland
 *
 * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
 * granted, provided that the above copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
 * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
 * IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR

YagoLopez

<ml-layout>

  <ml-header>
    <ml-header-row>
      <ml-title>Title</ml-title>
    </ml-header-row>
  </ml-header>

  <ml-drawer>
    <ml-nav>

YagoLopez

<p><ml-button ripple>Flat Button With Ripple</ml-button></p>

<p><ml-button aspect="colored">Flat Colored</ml-button></p>

<p><ml-button aspect="raised" ripple>Raised Button (Ripple)</ml-button></p>

<p><ml-button aspect="raised, colored" ripple>Raised Colored (Ripple)</ml-button></p>

<p><ml-button aspect="raised, accent">Rised Accent</ml-button></p>

YagoLopez

<p><ml-badge value="4">Badge no overlap</ml-badge></p>

<p><ml-badge value="4" overlap="true">Badge overlap</ml-badge></p>

<p><ml-badge value="4" background="false">Badge no background</ml-badge></p>

<p>Icon Badge <ml-badge value="4" icon><ml-icon>account_box</ml-icon></ml-badge></p>

YagoLopez

YagoLopez

Ggebvd

A Pen by Captain Anonymous on CodePen.

License.