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.
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.)
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:
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.)
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:
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:
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. 😉