ludder

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

ludder

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

// 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

# Add to .bashrc
alias ios='open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app'

ludder

#!/bin/sh
#

npm version patch
git add package.json
exit 0

ludder

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

# -r -> Include subdirectories
# -n -> Print line number
# -i -> Ignore case
# . -> From current directory
grep -rn "searchString" .

ludder

echo "Start Git pre commit hook"

#!/bin/sh
# 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)' ]
then

ludder

/*
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) {
			continue;
		}
		bln = true;

ludder

/**
 * 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|$)'));