Wrapping up ButterBox, my JavaScript React project

The JavaScript React class I was taking through Code Louisville ended a few weeks ago, so I guess it’s about time to post a wrap-up. This class was a huge test of my development skills, and my ability to remain patient while learning something challenging. I had to constantly ask myself the question, “Am I uncomfortable because this is hard, or do I actually hate doing this type of work?” The answer was always the former, but it’s easy to tell myself I don’t like something, or I’m not good at something when my limits are being pushed.

Anyway, I ended up being quite proud of my final project, and of the crazy amount of work I put into it. Here’s a look back at the project’s evolution:

September: the start of the class, and the initial idea

It all started with this Sketch file. Actually, it all started with a ridiculous idea for a butter of the month club I had several years ago, but the web version started here.

ButterBoxSketch

October: the project starts taking shape

It took me several weeks to understand the differences between developing a React app and a traditional website. But once I did, I got the hang of it pretty quickly. Here are some screenshots from the early days of development. (Please forgive the bad quality.)

BB1

BB2

November: improving the user interface

When I just couldn’t stand to look at the plain text and buttons anymore, it was time to improve the interface a bit:

BB3

November: the huge challenge of adding routes and working with an API

This was when I really started wanting to pull my hair out. When you’re working with a traditional website, linking between pages is pretty easy. But working with routes in React was a whole different story. I finally figured that out, then there was the API issue to figure out.

As part of the course, our project had to interact with an API in some way. I had a tough time with this, in part because I had a really clear vision for my project and wanted something that would fit within that vision. I mean, pulling in some random weather or Bitcoin data would be ridiculous, right? Finally, I decided that interacting with a WordPress site to pull in blog posts would be the way to go. This required a lot of extra work (because I had to create the WordPress site and figure out how to host it, then figure out how to connect with it) but it was totally worth it in the end. Here’s ButterBlog, the official blog of ButterBox:

(Also, if you’re looking to do what I did, I used this fantastic tutorial: Headless WordPress with React – Complete Tutorial.)

BB4

November: adding final details, and turning it all in

After the project met all the requirements, it was time to add ALL the fonts, photos, and design details my heart desired. I was SO in my element during this part. Here are a couple final shots: BB5

BB6

To test out this version for yourself, click here.

Currently: working on improvements and next steps

When I turned the project in, the dropdown navigation menu for the mobile layout wasn’t working, and the feature that tracked the items in the cart and the total was kind of clunky. The navbar works now, but I’m still working on that cart feature to make it as informative as possible, while keeping it streamlined. Here’s what I’ve got currently:

BB7

My plan for the future is to create a checkout process that can be accessed by clicking on the cart icon. I’d also like to work on those details and read more buttons you see in the shots above, to make them say “Close” once they’re clicked and the sections are expanded.

No plans to make this a real business though. Sorry for any disappointment. 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s