Categories
Javascript Projects

Maze Generation in React

Play with it

A few months ago I read an article on maze generation and it sparked my interest. Since then I began working little by little on a project to create a maze generator.

I took the time to make it visually show the steps the algorithm takes. You can see it generating cell by cell, giving each cell a set value, then deciding which ones to merge horizontally, and later vertically. I also gave you the ability to choose how slow the maze is generated, to see better how it works. Other settings are also the width and height, so you can make the maze reaaaally big if you want. Finally, I give you the choice to decide the merge chance, a value between 0 and 1. It’s the chance to join cells horizontally. A high chance (like 0.9) tends to create horizontal mazes while a low chance creates more vertical ones.

If you’re wondering why there’s no entrance or exit, it’s because you can choose any two points in the maze’s outer walls to open up and there will always be a path between the two.

I chose React since it’s a pretty famous tool for web UI and I wanted to give the user the ability to manipulate the maze generation through some inputs

The maze generation algorithm is called Eller’s algorithm. One of the cool things about it is that it can continue building rows for the maze for a long time without running out of memory. This is because it only needs to know about 2 rows at any given time.

Sources:
https://weblog.jamisbuck.org/2010/12/29/maze-generation-eller-s-algorithm
http://www.neocomputer.org/projects/eller.html

Link to generator:
http://jpsierens.me/maze-generation/

The project is in github if you want to take a look.

Categories
Javascript Projects

Boilerplate: Webpack + React + Redux

A boilerplate for playing around with react, redux and react-router with the help of webpack.

Contains:

  • a working example of a filterable table which you can play around with (look below).
  • ES6 – 7 Support with Babel
  • Redux dev tools to help you keep track of the app’s state
  • hot module replacement support so you can change modules or react components without having to reload the browser
  • a webpack production config so you can build the app and make it ready for production
  • Sass support, just import your styles wherever you need them
  • eslint to keep your js readable
  • much more…

Run the app

  1. npm install
  2. npm start

Once running, if you want to hide the redux dev monitor: CTRL+H

Yes, it takes a while to load the first time you open the app.

Is the hot module replacement really working?

Yup! Take a look:

The app updates without the browser having to reload. You don’t lose state!

Build the app

npm run build

This will build the app into the “dist” directory in the root of the project. It contains the index.html along with the minified assets, ready for production.

It should look something like the above image.

I don’t understand anything!

I went ahead and wrote a detailed series of posts on this project for you. I hope it helps you understand better:

Why doesn’t it have async?

To keep it unopinionated. You choose what async library you want. If you want to check out a full example with async in it, check this simple todo-app

Categories
Projects

League of Legends Best Match

A league of legends fan application I created. It searches the last 10 ranked matches played by the player searched and orders them by best match to worst.

The application is made with:

  • MongoDB to save searched matches temporarily,
  • Nodejs with Express in the back end,
  • Riot Games RESTful API to search data about the matches,
  • React + Redux + React router for the front end logic,
  • Sass for styling.

I set up an EC2 t2 micro instance from Amazon Web Services and launched the app around December 2015.

It received huge traffic in new years eve due to a reddit post I made in the /r/leagueoflegends subreddit.

The site received around 76k pageviews from 42k users, all in 12 hours
The site received around 76k pageviews from 42k users, all in 12 hours

It was crazy to see all the people going to my site. Every 10 min I would check google analytics to see how many users were viewing at the moment, 100, 200, 300 concurrent users, the numbers kept going up. I was happy to see how well the t2.micro instance performed. I kept the server light: It’s basically a proxy between the riot servers and the client. Later on I added some code to consume the API better, and only send what’s necessary to the front end.

Categories
Javascript Projects

League of Legends Team Stats

League of Legends Team Stats  is a web app I made for the game with the same name. I made it to quickly build teams and check out general stats for each player.

Categories
Javascript Projects

Pascal’s Triangle in Javascript 6 (ES6)

So I was reading a post on reddit where it was mentioned that on a interview for javascript developer they asked to write a function that returns n lines of Pascal’s Triangle.

My first reaction was of course: What is a Pascal Triangle? After reading wikipedia I said, ok let’s give it a try. At the end I didn’t make a function, but a whole ES6 class that renders it nicely to the browser.

Check out the codepen:

See the Pen A Pascal Triangle in ES6 by Jean-Pierre Sierens (@jpsierens) on CodePen.

If you want to start using ES6 in your projects, check out this tutorial I wrote.