React App Demonstrations

React, or React.js, has become an important part of the modern web-developer’s tool kit. This JavaScript Library by Facebook makes it easier than ever to make modern, elegant user interfaces for web apps. Because of this, I decided to take some initiative and build a React app to learn this trending (and very useful) tool.

Further, one of the strengths of React is how easy it is to setup and run live demos. So, the heading of each section of this writeup is a link to a working react app hosted on Heroku.

With that said, onto the projects!

Rentr App

A screenshot of the React app Rentr, a Netflix clone
A screenshot of Rentr, a Netflix clone

In spring of 2018, as part of a software engineering course, I designed and developed a UI for a Netflix clone called Rentr.

Rentr, as is, is only a user interface. There is no backend or database to interface with. So, for example, you can log in with any credentials, and you can’t search for more movies.

That being said, I would say the highlight of this system is it’s use of Google’s Material Design. Google Material Design is a design standard for UIs developed by Google.

Since React supports plugins, I was able to load in a set of pre-made components that follow the Material Design standard. For example, the buttons which ripple outward from where you click were a pre-made UI piece.

In addition, I was able to supplement the pre-made UI components with my own. I mainly used this to customize the layout of the components. Most notably, some simple CSS was used at the login page to place the “login” and “create new account” panels side by side.

To summarize, I was able to use React with a set of pre-made and custom components to create a simple, functional, and elegant UI.

IGN Code Foo Challenge Submission

Screenshot of Stan Slupecki's submission for IGN's 2018 Code Foo challenge
Screenshot of my submission for IGN’s Code Foo challenge

In Spring 2018, IGN hosted a contest called Code Foo. As part of the contest, they presented programmers a design spec to implement as they see fit. I decided to use this as a chance to gain some more hands on experience with React.

Like the Rentr App, I decided to use pre-built React components to speed up the development process. However, where Rentr used Google Material Design, this project used Bootstrap. Bootstrap is a popular framework for building responsive, mobile friendly websites.

Rentr was just a prototype UI, however, this project could communicate with a RESTful API. IGN provided an API that could communicate via JSONP, an early alternative to AJAX. My React app could pull content from the API to populate a newsfeed (though IGN has since shut down the API).

Lastly, this app also demonstrates code to solve a puzzle called the “Road Problem”. This road crossing problem was included by IGN as a simple algorithm puzzle. If a valid solution is found, it is displayed on the right as a series of xy coordinates representing moves.

Closing Thoughts

With React becoming a common tool in web development, I felt as a web developer I should learn how to use it. I had previously followed tutorials to build simple React apps. However, by designing and implementing these React projects myself, I built myself a solid understanding of React fundamentals.

Of course, if you’re interested in seeing more of my work, please check out the rest of my portfolio. Or, if you’re interested in hiring me for a web development job, I encourage you to use this contact form.