Member-only story

How to Make A Map Generator Using The MERN Stack And TypeScript— Part 0: Overview

A complete guide to generate you own maps

Quentin Musy
2 min readApr 29, 2023

--

A map generated by the app

Motivation

I’m a D&D player. I play multiple campaigns with my friends, and I’m always looking for maps to use. But my issue is, I don’t know how to draw, and creating a map myself is always hard. So I thought to myself: why not make an app that generates it for you?

And that’s how this project was born. The algorithm behind it is quite interesting and it was a very good challenge. Once done, I figured it would be a nice idea to share it with the community. And boom, here it is.

Goal

The idea behind this tutorial is to build a simple yet complete app, that is a bit different than just the usual chat/forum. By the end of it, you’ll have created your own map generator, with a few APIs in Node, a front-end in React and a way to store/load the generated images. The final result will be something like this:

Complete website

Prerequisite

To be able to complete this tutorial, you will need previous knowledge in Javascript and…

--

--

Quentin Musy
Quentin Musy

Written by Quentin Musy

Full Stack Engineer | Writer | Musician | Knowledge is meant to be shared, not kept. That's why I write.

No responses yet