Category Archives: Uncategorized

Creating my ideal MERN Stack

This is going to change A LOT over time

Setup Express

npm install -g express-generator
npm install -g nodemon
express express-backend --view=hbs --css=sass
cd express-backend
npm install

Open the folder in a code editor (I’m using VSCode right now. It’s pretty nice!)

  • In /bin/www, change “start”: “node ./bin/www” to “start”: “nodemon ./bin/www”
  • In /bin/www, change var port = normalizePort(process.env.PORT || ‘3000‘); to var port = normalizePort(process.env.PORT || ‘3001‘);
  • In /app.js, choose your sass syntax : indentedSyntax: false, // true = .sass and false = .scss

Setup React

From inside the express-backend

npm install -g create-react-app
create-react-app client
  • In /client/package.json, append after the end of the “scripts” block
    } // end of "scripts"
    ,"proxy": "http://localhost:3001"
  • Now you are ready to start react.  It will talk to your Express route APIs by using fetch or axios, as if the data was local, thank to the “proxy” we added! In another command window to go to the /client folder and type:
npm start

Note: This process is roughly based off this article by Dave Ceddia. Thanks Dave!

Setup MongoDB

  • Download Mongo Community version : the engine
  • Download Mongo Compass : the database visualizer
  • Install them both : use the defaults
  • (WINDOWS) Add Mongo \bin folder to your path
  • Add the following to you package.json file in your “express-backend” folder:
"mongo-mac": "mkdir mongo-db; mongod --dbpath mongo-db",
"mongo-win": "md mongo-db & mongod.exe --dbpath mongo-db"
  • Install mongoose in /express-backend with:
cd express-backend
npm install mongoose --save
npm install axios --save
  • If you want to replace any fetch calls with axios in react, you can use the following conversion style:
  componentDidMount() {
      .then(res => res.json())
      .then(users => this.setState({ users }));
      .then(res => this.setState({ users : }))
      .catch(error => console.log(error));
npm install react-router-dom --save


more to come…

Mongo-Express-React-Node : My MERN Stack

Prerequisites (for Windows)

npm install -g node-gyp
(as administrator) npm install --global --production windows-build-tools


  • Axios : Like fetch() but it works everywhere, processes your json and detect 400 errors
npm install --save axios


  • express-generator : easy setup of express environment
  • body-parser : parse the incoming requests bodies for the info we are sending (allows access to req.body)
  • nodemon : watches our server.js file for changes, then restarts it.
  • mongoose : Allows easy interaction with a MongoDB
npm install -g express-generator
npm install -g nodemon
npm install express body-parser nodemon mongoose --save


  • create-react-app : My go-to boilerplate
  • Axios : (Yes here too!)
  • StoryBook : Author your components in a standalone environment
  • Jest : “delightful” javascript testing



I haven’t tried MobX yet, but I am eager to see what it can do.


  • Compass – Essential for visualizing your data and tables

Playing around with animation and layers

One day I just woke up and had to make this. I collect limited edition screen prints, and one of my first Artist I started collection was Daniel Danger. The layering effect of screen printing lends itself perfecting to layering elements in an animation.

Scroll the frame below

As with all code, after 6 months there are things I would have done differently, but you can silently judge me here, by looking at my code.