Skip to content

Instantly share code, notes, and snippets.


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
View _document.tsx
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> {
ludder / fadeInSection.js
Created Feb 4, 2020
Fade in React elements when scrolling in view
View fadeInSection.js
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 / .bashrc
Created Nov 1, 2016
Open ios simulator from command line in OSX
View .bashrc
# Add to .bashrc
alias ios='open /Applications/'
ludder / pre-commit
Created Feb 13, 2015
Update package.json version number on git commit
View pre-commit
npm version patch
git add package.json
exit 0
ludder / grunt-git-hooks
Created May 20, 2014
Copy git hooks to hooks folder with Grunt
View grunt-git-hooks
grunt.registerTask('default', function () {
var fs = require('fs');
// my precommit hook is inside the repo as /hooks/pre-commit
// copy the hook file to the correct place in the .git directory
grunt.file.copy('hooks/pre-commit', '.git/hooks/pre-commit');
// chmod the file to readable and executable by all
fs.chmodSync('.git/hooks/pre-commit', '755');
ludder / grep-search
Last active Dec 28, 2015
Simple grep command looking for string in files in (sub)directories
View grep-search
ludder / Running Grunt or Codeception on Git pre-commit hook
Last active Dec 27, 2015
Running Grunt or Codeception on Git pre-commit hook
View Running Grunt or Codeception on Git pre-commit hook
echo "Start Git pre commit hook"
# stash unstaged changes, run release task, stage release updates and restore stashed files
NAME=$(git branch | grep '*' | sed 's/* //')
# don't run on rebase
if [ $NAME != '(no branch)' ]
View hasNextElementSibling.js
Returns true if element has next sibling (of type element)
function hasNextSibling(node) {
var bln = false;
while( (node = node.nextSibling) !== null ) {
if (node.nodeType !== 1) {
bln = true;
ludder / classList.js
Created Dec 6, 2012
Backwards compatible classList functions
View classList.js
* Check element has a certain classname
* We cannot use classList yet because of browser support
* @param {Object} ele DOM element
* @param {String} cls Classname
* @return {Boolean} True is classname is found
function hasClass(ele,cls) {
if (ele === null || cls === '') return false;
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));