Skip to content

Instantly share code, notes, and snippets.

@ludder
ludder / fadeInSection.js
Created February 4, 2020 19:42
Fade in React elements when scrolling in view
// https://dev.to/selbekk/how-to-fade-in-content-as-it-scrolls-into-view-10j4
import React from "react";
import styled from "styled-components";
const Section = styled.div`
opacity: 0;
transform: translateY(20vh);
visibility: hidden;
transition: opacity 1200ms ease-out, transform 600ms ease-out,
visibility 1200ms ease-out;
@ludder
ludder / _document.tsx
Created February 17, 2021 20:25
Typed example of _document.js in Next.js with styled components as in: https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js
import Document, { DocumentContext, DocumentInitialProps } from "next/document";
import { ReactElement } from "react";
import { ServerStyleSheet } from "styled-components";
interface InitialProps extends DocumentInitialProps {
styles: ReactElement;
}
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<InitialProps> {

Testcase Shop

We want you to create a very basic ecommerce project in React by creating the homepage of a web shop.

We are interested in the way you:

  • setup database
  • connect to this external resource from Next.js
  • manage state
  • work with asynchronous data