Skip to content

Instantly share code, notes, and snippets.

KeKs0r /
Last active Apr 19, 2021
Marcs React Structure 2019 Examples

How I currently write React Apps (2019 Hooks Edition)


Most of my products are very MVP-ish, so I dont focus too much on super clean code and high quality, but there are a few patterns that I reuse quite a bit and find useful. But this is not an exhaustive list and the examples might not be as clean as one would think.

Technology Stack

Usually I am not using any sophisticated state Library anymore, the react hooks useState and useReducer in combination with context is absolutely sufficient, at least for UI-State. Everything else is in data persistence, which is in my case either Firebase or Graphql (= Apollo).

KeKs0r / error-bubbles-up.js
Created Jun 17, 2019
Zeit Would swallow issue
View error-bubbles-up.js
// This actually shows the error in the zeit logs and results in this response
An error occurred with this application.
async function start() {
console.log("Before Server");
const server = require("./server");
KeKs0r / changeStatus.js
Created May 8, 2019
Apollo Hooks Mutation Test
View changeStatus.js
import gql from "graphql-tag";
import { get } from "lodash";
import { useCallback } from "react";
import { useMutation } from "react-apollo-hooks";
import { GET_LEAD_HEADER } from "./getLeadHeader";
const CHANGE_STATUS = gql`
mutation changeStatus($id: ID!, $status: String!) {
changeStatus(id: $id, status: $status) {
View notify-user-signup.js
const functions = require("firebase-functions");
const got = require("got");
const _ = require("lodash");
const notifyNewSignup = functions
.runWith({ memory: "128MB" })
.onCreate(user => {
const email =;
KeKs0r / hapi-arena.js
Last active Aug 16, 2018
Get Bull Admin UI (Arena) working with Hapi
View hapi-arena.js
const Arena = require('bull-arena');
const _ = require('lodash')
function queueToConfig(queue){
return {
hostId: 'Main Host',
prefix: queue.keyPrefix,
View querymiddleware.js
function queryMiddleware() {
return next => action => {
if (action && action[SIMPLE] !== undefined && action[SIMPLE].query) {
const request = action[SIMPLE];
const query = qs.stringify(request.query, {
arrayFormat: 'brackets',
encode: false
request.endpoint = [request.endpoint.replace(/\?*/, ''), query].join('?');
delete request.query;
KeKs0r / launch.json
Created Mar 21, 2018
Debug Jest Tests in VSCode
View launch.json
"name": "Jest",
"type": "node",
"request": "launch",
"env": {
"NODE_ENV": "test"
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/node_modules/.bin/jest",
"stopOnEntry": false,
KeKs0r / asyncRoute.js
Created Feb 27, 2018
Koa Stream Response
View asyncRoute.js
* In this example I get an error from my rethinkdb database
* ReqlRuntimeError: Connection is closed in.... (basically the first query within exportText())
export default async function downloadTexts (ctx, next) {
const { qid } = this.params
const stream = await exportText(qid, this._rdbConn, true)
View gist:4377bd217e472b58a2714f30465ca21c
Verifying my Blockstack ID is secured with the address 19Cs9hTU7XFpGxef4XdDTvuxVp2gY1znu
KeKs0r / ios-build-log
Created Aug 6, 2017
Built interupted
View ios-build-log
Build Date: 2017-08-06 11:07:00 -0700
Fetching plugin "cordova-plugin-statusbar@1.0.1" via npm
Installing "cordova-plugin-statusbar" at "1.0.1" for ios
Fetching plugin "cordova-plugin-device@1.1.4" via npm
Installing "cordova-plugin-device" at "1.1.4" for ios
Fetching plugin "cordova-plugin-splashscreen@4.0.1" via npm
Installing "cordova-plugin-splashscreen" at "4.0.1" for ios