Master Gatsby Wes Bos Course

I just started Wes Bos’ Master Gatsby course. I originally bought the course in late 2019 when it came out and intended to work through it during 2020 at some point. But then I got the dream job (Skillcrush!!!!) and didn’t really have time.

So now I’m doing more of a deep dive into React and think this would be a great time to pick it up. I’ve been interested in Gatsby for a long time, mainly because of someone I follow on Twitter, @hashim_warren. I’ve always found him to be an excellent source for finding subjects I would be interested in, from comics to coding.

First impressions Module 1/Module 2

A big takeaway is more personal. It’s been almost 4 years that I decided to take the leap into learning about web development, and starting this course, I could see how much I’ve learned and how comfortable I’ve become. Update Node package manager – no problem. Download files from GitHub – been there done that. Run npm start – can do! We’re going to make pages and use components – easy peasy. That I even know what these words mean tells me a lot about how far I’ve come. Suuuper Awesome! 🙂

So far, we’ve scaffolded our site files. We’re using both pages and components – which is pretty exciting for me since all of the React apps I’ve worked on so far have been single pages. As you would expect from any Wes Bos class, all of the videos are perfectly done with on-screen notes of any challenging bits, and there are lots of tips and tricks, including keyboard shortcuts and VS Code extension recommendations. And the GitHub repo includes stepped-solution files for each video in each module so that if something goes awry, you can compare your code to his. I always appreciate how he covers the details so well. (And if you’re still stuck, there’s a Slack you can ask questions in.)

The only problem I’ve had so far is that, for some reason, npm start didn’t work for me after creating the gatsby-browser.js file, quitting the server, and restarting. I kept getting a message that Layout was undefined. After checking my code against the stepped-solution code, I tried quitting and restarting a couple of times and the page rendered. Sometimes you just need to restart because something went awry somewhere. No need to panic, be frustrated with yourself or start doubting your ability to code. Just restart and see if it works out.

On to Day 3, where we start tackling CSS. I loooove CSS, so I’m pretty excited! 🤓

Module 3

CSS day!!! I love CSS, and this module did not disappoint. There’s a lot of styling going on for this site. The font-family is fun, the nav items are skewed, and there is a stripey border around the site. You may not want any of this for a future site you’re going to work on. But that really isn’t the point.

Along with learning how to add styles as components in React, Wes Bos adds little tidbits of CSS that are super useful and interesting. I’ve already written some CSS grid before, but it’s good to get in some practice. And even though this course isn’t on CSS or Grid, if you’ve never used grid before – it’s totally fine. He includes a short explanation and shows how the site changes each time he adds some style. It’s one of my favorite things about taking his courses.

Tomorrow we move on to how data is handled in a Headless CMS. 👩‍💻

Module 4

Today I changed “Day” to “Module” because I’m not getting through this entire module today. 🤓

Today was another day where I could tell that what I’ve learned before was serving me well. Today’s module begins working with Sanity, the CMS we’re using for this project. And we created several objects. There was a time that creating an object was confusing to me. Now I’m really comfortable surrounding pairs of properties and values in curly braces. I also know that “type” is a data type and “title” is the human-readable name of the field. Adding fields is very similar to adding fields using Advanced Custom Fields in WordPress – but you’re using code rather than ACF’s UI.

The CMS is fun. You create your own custom fields that will be used to add information to the database. There are lots of options available (time to read the docs!) We also imported a library of icons that can be used to add emojis called React Icons. There are several icon families to choose from.

Something that was really fun today was filtering using a boolean. We used it to filter out undefined values because undefined is falsy. It was a nice little trick. 😀 And we’re able to create one-to-many and many-to-one relationships between the data entered in our fields.

Tomorrow I’ll finish this module and maybe begin the next. 🙂

Module 4 con’t

I finished up Module 4. It was a pretty straightforward day – added another data type so we could add people who work at Slick’s Slices to the database, and we created a custom input field.

The custom input field option is pretty nice! Wes walks us through adding the ability to format the numbers the employee enters into dollars and cents. Overall it went pretty smoothly – the usual few tiny typos. (typos!!!!)

But a fun issue to figure out was that I didn’t seem to be able to change the price of the pizza. I checked my code against the video – nope. I checked my code against the solution code – not it. I copied and pasted sections of the solution code into my code – no go. 😡 I was able to enter an “e” but nothing else (do you see where this is going?) Probably by accident, I hit a number, and it worked! 🥳 When I looked at the pizza.js file in the schemas, I could see why. The “type” for price was ‘number’ .🤦‍♀️

Something fun I learned about is the Intl.NumberFormat method. It gives you the ability to format numbers so they look like currency. I chose USD – but there are other options. 💰😀

I’m already thinking of how I could use this project to create a personal project for myself. 👩‍💻

Module 5 Getting Data

Now we’re using GraphQL to create the bridge from our database to our app. We wrote queries to pull things like id, name, slug, toppings… And then passed that data to a component to render our UI. We’re really getting closer to being able to display the Pizzas on the site. 🎉

We’re also able to use GraphiQl to view our queries to see what they produce. This is an easier way to know what can be added to the query. 👍

It’s been a few days since my last post. I made one of those 🤦‍♀️ errors that just happen sometimes. I had cleared all of my tabs and closed out the terminal and text editor. (It’s annoying when they’re open and I’m trying to work. 😔 When I tried to bring it up again, nothing worked. I tried running a few commands I saw in the very helpful Slack Channels and thought I had somehow deleted all of my code!

I repeat these tutorials, usually a couple of times, and there’s solution code in a GitHub repo, so it wasn’t a huge deal. But I had no idea what I’d done and I felt a bit silly running commands in the terminal that I didn’t understand.

Then I thought, if a student presented me with this problem, what would I say? I was so caught up in what I had seen in the terminal and the commands I’d run that at first I had missed the obvious. I was trying to use the starter code on my desktop rather than the project directory I had written my code in. 🤷‍♀️ These things happen. But now I’m up and rolling again and fascinated by how the database in the backend connects to our React on the front end. 👩‍💻 On to the next module!

Module 6

This module is called “Puttin’ in work” and seems primarily about setting ourselves up for the next stage of the project. We added images and sample data, styled our pizzas page, and added queries to show the toppings. In a later lesson, we’ll code the ability to click through the toppings to see a page with the pizzas that come with that topping.

No real issues here, but I was thinking I was missing an ingredient or two. But when I looked at Wes’ example, I see he has “mushroom” listed twice. There are also pizzas in my list without an ingredient list. So we’ll see where that goes. 🤓

I’m enjoying the class. I understand what’s going on and the code I’m writing, even though this is the first time I’m using Gatsby, Sanity, or GraphicQL. I couldn’t write this from scratch yet, but I could see myself doing so after a bit of practice.

I’ve taken Wes Bos’ courses before, but I’m trying something new this time. I view the entire video first, then view it again and code along. I feel like I’m getting more out of it this time, which is great. 👍 He’s having a sale right now and I think I may pick up his other two React classes. The more I work with React, the more I like it. And I’ve always enjoyed working with databases and creating queries. I can really see creating a CMS for someone with this system. I think clients would find it relatively easy to fill in the fields – it’s a lot like ACF. And I enjoy writing the CSS. Maybe I’ll remake my portfolio with something like this?

  • Post category:Blog