In order to get a deeper understanding of React JS, I have been following some courses and getting to build some small projects. This has been a really fun experience so far!

Basically, the purpose of this blog post is to add a few words about my projects and to add a few links to them.

AI Story + Image generator

This is a video demo of an AI project that i’ve been working on recently. It’s basically a text based adventure game in which an AI guides you through a story, and at each point it will generate an image of what you should currently see.

It’s been really fun to work with Open AI’s API and DALL-E, while getting to practice my React skills.

Meme Generator

One of the first projects I built was this basic Meme Generator. It simply can take in user input for two text areas, and then place them on top of images that are pulled from an API.

Workout Buddy

Next, I had this idea for a workout app that I thought of while going to the gym. The idea was that you could plan your workout before you head to the gym by searching through an API of exercises. I needed an API that would allow you to search by something like “shoulders”, in case you didn’t know exactly what you intended to perform that day, or if you just wanted to mix up your experience at the gym. I luckily found an existing free API by WGER that had all the data I needed. I wish it had more images and videos for exercises, but you get what you pay for.

Anyway, I built a prototype of the app and this is what it looks like. Eventually, I hope to develop a more functional version in the future that saves your workouts to the cloud or locally, and then you can reuse old routines.

The next two projects were tasks from a React JS course by Scrimba which I really recommend. It’s 100% free and has a very user-friendly interface for learning, as well as an amazing tutor and community surrounding it.

Tenzies

The first is this simple dice game called Tenzies. This was a fun project because who doesn’t like making or playing games?

I added some neat CSS styles to this so that the die and die faces are scaled to the screen size of the user. I didn’t want to include any images, so I created the die faces using pure CSS.

Quizy

Next up, is the classic quiz project in which you may have already seen a million different tutorials already existing out there on the net. This was the trickiest project yet as you needed to pass and update state from child components, all depending on user interaction. A perfect task for learning React. Check it out here.