World Block Creator

#pushercontest #webdev #node #typescript

What I built

This online web app allows you to build a 3D world using blocks. While you are building your world, you can also see others build theirs in real time. In addition, you can go into spectator mode and see all the creation happening around you. Get inspiration from others and build your own to showcase.

Demo Link

http://worldblockcreator.herokuapp.com/

Link to Code

https://github.com/justinctlam/WorldBlockCreator

How I built it

Stack Overview:
Pusher - https://pusher.com/
React - https://reactjs.org/
Babylon.js - http://www.babylonjs.com/
Heroku - https://www.heroku.com
TypeScript - https://www.typescriptlang.org/
Node.js - https://nodejs.org/en/

Development
Being new to the web stack development world, I had to learn a lot about getting a simple web app standing from scratch. I knew I wanted to use TypeScript and Babylon.js as that is what I have been learning a lot about recently.

My first step is to create a hello world client and server app and deploy it for use. I struggled a bit in this area and most tutorials didn't give all the little details. Some tutorials are some combination of the stack I wanted but there was no one tutorial that met all my needs. However I did find one that I ended up using as the base of my application. Deploy React and Express to Heroku was the best one I found that taught me how to create a client and server app using React locally and how to deploy on Heroku for distribution. It worked wonders for me.

I wanted to use TypeScript instead of JavaScript because I found the type checking really useful. I decided to go with the TypeScript-React-Starter kit from Microsoft. If you are following the tutorial from Deploy React and Express to Heroku you would make a simple change from create-react-app client to create-react-app client --scripts-version=react-scripts-ts to enable TypeScripting in the app.

You can also add TypeScript support on the server side by adding the TypeScript package to the serve app. You can find an example on my GitHub.

From here I've got a fully working app and server using React and TypeScript that is testable locally and deployable on Heroku!

For my Pusher Contest idea I wanted to do something in 3D, so I decided to use Babylon.js as my 3D framework/engine package. I know Three.js is also very popular but I've been learning and using Babylon.js and is best to use what I am most efficient at the moment. I wanted to make something that users can create and share and I would use Pusher to allow you to see what others are building in real time.

The basic concept is simple. The user is presented a ground plane and when the user clicks on it, a small box appears where the user clicked on. The user can continue clicking on the plane or start clicking on the boxes and more boxes are placed where the user clicked. The user can also remove boxes by right clicking on them. From there the user can choose different colors for the boxes and start building whatever they can imagine.

When the user decides to take a break, they are free to go into spectator mode and fly around looking at other users building their world in real time. Be inspired by what others build and incorporate those designs into your own.

For the real time aspect of the application I used Pusher channels for communication between the client and server. When a user does something on the client side, like adding a box or removing a box, an event is sent to the server. On the server side, those events are relayed to the other clients connected to the server. Also on the server side, I used Pusher's webhooks to determine when a client is disconnected. Then the server will inform all the other clients about the disconnected client and the clients will remove the elements associated with the disconnected client from the 3D space.

Future considerations

Because of the limited time I can spend on this app, there are a few features I haven't implemented yet. I hope to get to them in the future: