MineandCraftGames.com

The main page of the site
The layout dynamically resizes to the shape of the window
Searching for a game
Playing a game

Inspiration

With the ever-growing popularity of Minecraft, it is natural that games inspired by it will also see an uptick in interest. With how many Minecraft-style web games there are out there, it would be very convenient for a site to provide an easy way to access the best among them!

What it does

The site serves as a way to find and access several different Minecraft-inspired web games. From the landing page, several games are presented, or the user is able to search for a specific one. From there, the user is able to play a game, embedded in an Iframe. The way the site is designed, added more and more games is incredibly easy - while there are only 11 games for this demo, it could easily be scaled up to a much greater size.

The site is built with the user in mind. If a player gets bored with one game, they can easily navigate to another game they might find more fun.

How we built it

The project is built using react and nextjs. Next.js is a framework that can pre-render React as simple html files. This means page visitors don't need to run Javascript, allowing visitors to render pages significantly faster. This is also great for SEO, as many search engines won't run Javascript, and those that do run a limited subset.

The site is heavy in static content. With Next.js our images are responsive, and page visitors download images with the resolution their device needs, and no more. Both our images and mp4s are lazily loaded. This means our images are not loaded till they are about to be scrolled into the client's viewport. Our mp4s are not loaded till the visitor hovers over the game.

Early on we created a design prototype in Figma which we were then able to base our app upon, taking advantage of the generated css. For styling, we used css-in-js with styled-jsx. Css-in-js with styled-jsx allows us to add css-elements to different components without creating new css-files for every page.

We decided to host the web application using vercel, which offers continuous integration and development with the main-branch on Github. Vercel offers a content delivery network to provide a fast delivery of the web application. This allows us to host the website, and whenever we push something to the main branch, it will deploy it instantly. We collaborated and focused on different aspects of the system, continuously merging and pushing our local edits to GitHub to keep our local machines updated with everyone's progress.

What we learned

It was a really great way to get hands-on experience with react and web design in general. None of us had used Next.js before, and learning it was a load of fun. We'd heard it was fast, but didn't realise how fast!

What's next for MineandCraftGames.com

Implementing a 'random game' or similar button below the currently playing game, to help the process of finding new games without being overloaded by choice. Also, adding genre tags to the JSON for each game to enable suggesting related games in the sidebar.