React & GraphQL Web App

I recently went through the application process for a local start up, and while I didn’t get the job, I did get the chance to try out some tools that I’ve never used before.

The coding challenge was to create a single page app using react that would list all of the star wars movies, the list of characters in each movie, and a profile page for each character.

This challenge was my first time ever building a full react web app, I had previously played around with building components a little bit on code pen.

The back end of this site was a GraphQL server, and used GraphQL and Apollo with react to query the data. This was also my first time working with GraphQL and Apollo. Learning to write queries for GraphQL didn’t take me too long, it reminded me of SPARQL, which is a graph-based query language for semantic web databases.

With this project I also played around some with mobile design for the first time. I’ve always tried to design my pages to be responsive to screen size, but of course responsive and mobile-friendly are not the same thing. I used media queries for the first time to cater the content to the screen size. So instead of displaying a four column grid of movies/characters there is a single column display for small screens.

Here are some screenshots of the final product. This was created over the course of about 4-5 days.

starwarsapp1starwarsapp2starwarsapp3starwarsapp4

And here are some simulated iPhone X screen shots.

starwarsappmobile1starwarsappmobile2starwarsappmobile3starwarsappmobile4

I hosted the app online using heroku, and it can be viewed [HERE]

The github repo for this app can be found [HERE]

Advertisements