solilokiam

This is a proposal for a ⚡lightning talk at the Reactive 2017 conference.

🌟 Please star it so we can make it to the top 10 and be choosen to make it.

React and 7.5 Million Daily Users

1 year ago our design team came with the idea of redesigning our frontend... We decided to do it with React. One year later and some millions of satisfied users it's time to share the amazing and hard lessons we have learned. Some of those lessons are about:

• SSR and SPA SEO

solilokiam

Kodify's Frontend Test

Introduction

Welcome to the amazing Kodify frontend test. We have designed this test to be the similar to the tasks you will do daily at Kodify. Some time ago we discovered https://developer.marvel.com/ . It's an api to give you access to all their comic catalog. In this test we want to see how you create an app that is able to connect to an external api, fetch results and show them to the user. We will not provide you any mockup or design because we want to see how you display the information to the user. At Kodify we think a lot in the user experience and we also want to test that. This test in average takes 2 hours to do. But take all the time you need to do it.

What to do.

The app will consist in 2 screens. First one is a listing with all the comics (we just want to see comics, no graphic novels or other kind of material) ordered by sale date (newest first). In this screen we want to see the cover of the comic with its title, date and if available it's price. The comic list

solilokiam

import { useState, useEffect } from 'react';

const useOnScreen = (ref, rootMargin = '0px') => {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    if (IntersectionObserver) {
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {

solilokiam

import React, { useRef, useState } from 'react';
import styled from 'styled-components';
import { PlayCircle } from 'styled-icons/feather/PlayCircle';
import useOnScreen from '../hooks/onScreen';
import { SkeletonImage } from './styles/skeleton';

const ThumbWrapper = styled.div`
  img {
    position: absolute;
    top: 0;