Utah JS Hero

Project Background

The UtahJS.com site had a need for maintainers to be able to update content without having to jump in to the code. A few developers from the Free Code Camp SLC group decided to take on the challenge. Our main goals were to keep the design in tact and give the content editors a dead simple way to update the site without diving in to the code.

The first step was to discuss some of the tools we thought might work well for the project. We wanted to the site to be fast, so we discussed static site generators like NextJS and Gatsby. We decided to use Gatsby for its easy set-up, speed, and extensive plugin library. Once we decided on Gatsby for the public facing side of the site, it was time to decide on a CMS solution. It was a toss up between Strapi and Sanity. They were both excellent solutions to our problem, but the price structure of Sanity worked a little better for our needs at the time. Don't get me wrong, we didn't just choose Sanity because of the pricing. Sanity is a great headless CMS, it was also chosen because of the simple nature of the Sanity Studio, the asset pipeline for easy asset uploads, and it's real-time datastore which makes connecting to the GraphQL API a breeze.

My focus on the project was the top navigation and the conferences page. With Gatsby, the navigation/page routing is pretty simple. When setting up the Gatsby file structure, you create a page directory and place any page.js files you may need inside. If you export a component from a page file, it will create a "/page" route. With the routing sorted, I turned my focus to the conference page. Because Gatsby uses a GraphQL API, it made it simple to query the data necessary to fill the page with content. The list of current speakers was mapped over and displayed, along with the list of sponsors for the conference. Styling was kept simple for the team by using Styled Components. This allowed us to develop a little quicker because all of the components had their own associated styles.

I learned a ton on this project and got some additional experience working on a remote development team. Compromise is the name of the game when working on a distributed team, we all proposed different ideas but were able to compromise to come up with, what I feel is an easy to use, simple solution to the problem that was presented to the team.

This project was developed by Alex Puhl, John Bowser, Justin Howard and, myself (Steven Saunders) as part of the FreeCodeCamp SLC group.

Project Preview

utah js preview 1utah js preview 2

Interested in doing a project together?

contact me