Tutorial for building the React Markdown Previewer

Hey guys,

I just uploaded a tutorial on how I went about making the Markdown Previewer. I’m still quite new to working with React, but I thought it might be of use to those of you that are stuck, like I had been with this first React project.

You can follow along on YouTube

Or, clone the repo from GitHub and git checkout the commits in chronological order.

This is my first go at both making a tutorial and posting on YouTube. I’d love to hear some feedback on how to make the video, tutorial, my descriptions, whatever better for the next one.


1 Like

Hey, Kudos to your efforts. Here are some suggestions to make the production better. (in no particular order)

Pls. make everything bigger in your streamcast. It’s hard to read the text showing in your browser and terminal.

Make terminal background solid color, or less transparent, or blur the background more… or all of the above. Also make text size bigger for easy reading.

Audio is barely audible. Really hard to hear.

It seems you’re using the built-in mic of the laptop? The keyboard clacking noise is louder than your vocals. Vocals hard to hear especially when you fade out at the end of some of your sentences.

Invest in a better/sensitive microphone, and position closer to your mouth. Increase microphone gain.

Some EQing to improve audio intelligibility. Some boost between 3K to 6K (depending on your voice). Low-Pass filter to remove rumble, though in this case your audio doesn’t have that… probably pre-made filtering by the built-in mics… but if you’ll be using an external microphone, you’ll definitely need it.

Maybe use an audio compressor to increase soft sounds and automatically reduce/compress loud sounds.

Editor font size is good. But terminal font-size is def on the small side.

I think the biggest issue is the Audio. It’s too weak and hard to understand sometimes. You fade in and out especially at end of your sentences… barely audible. Volume level is not consistent.