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

Overcoming tech fears: Working with WordPress and its API

I have a long history with WordPress. Almost 10 years ago, I started a blog on the platform as part of a college class. (It’s long been deleted, btw.) Five years ago, I was part of a local blogger group and I heard about this thing called WordCamp. My first thought was, “Getting together with a bunch of WordPress bloggers to talk about blogging? That’s so cool! Where do I sign up?”

I found out where to sign up, and I signed up. But I must not have read many of the actual details of the event, because if I had, I would have known that there’s a whole other side to WordPress: the developer side. I walked into the event all excited, but within the first 10 minutes of the first presentation, I realized I didn’t understand a darn thing they were talking about. I walked out after maybe an hour. I felt defeated, embarrassed, intimidated, and I assumed that those people were just smarter than me.

At that point, I hadn’t heard one of my favorite Moth stories. I highly recommend you listen to it, but here’s the quote: “I don’t think that smart people are smarter than me, I think they read a book I didn’t read.”

I was thinking about that this week as I learned to set up a local installation of WordPress and work with the API to pull posts into my React app. If you’d asked me about any of those things a year ago, I would have been like, “What?!?”

If you’re interested in how I did these things, I followed a Treehouse course on installing WordPress locally, and used a tutorial from CodePen to help me with the rest. I could go on, but these resources explain the processes way better than I could.

I think what made me realize I could learn these things was starting to apply my crafter mentality to my web development projects. I’ve always been a crafter — I love working on furniture, baking, holiday decorations, whatever. When I’m crafting, I will figure out a way to get a project done and make it work. Nothing’s going to get in my way.

Basically, I know that I’m going to build a really cool thing, and that tools exist to help me make that thing. When I think of frameworks, languages, and APIs as just things that can help me make something cool, they don’t seem so scary anymore. So now I know that all those people talking WordPress development weren’t smarter than me. They just happened to find cool projects a few years before I did.

P.S. Just in case you’re wondering, the featured photo is the blog part of my React app, with posts pulled in from a WordPress site I set up.

That time the universe decided to give me a pep talk

Oh, hey! It’s been a little bit. To be honest, I’ve been wrestling with some major issues of self-confidence and self-questioning for the last few weeks.

A few things have happened:

1. In September, I started a class where we’re learning the JavaScript React framework, and the first five weeks or so were a huge struggle train. I fell into the trap of questioning my general intelligence and overall worth just because there were programming concepts that were difficult for me, as a visual learner, to grasp. I think I’ve finally pulled myself out of that trap by coming up with a React project that I’m excited about, but it was tough there for a bit.

2. I fell into the rabbit hole of looking at other peoples’ LinkedIn profiles and online portfolios, and comparing myself to those. I’ve been cautioned against this so, so, so many times over my years on social media, and I did it anyway.

Then that voice in my head that says, “You’re too old to be pursuing a career in UX,” started again. I know, I know. I’m 32. That’s by no means old. But I can find all kinds of examples of new college graduates who are 10 years younger than me, and have amazing design portfolios that make me question why I’m even bothering. Can you see how this kind of thinking could lead to self-destructive behavior? It’s something I’m going to have to work on.

Anyway, it seems like the good forces in the universe have conspired to bring me out of that funk this week.

The latest episode of a UX podcast that I really like, User Defenders, featured Denise Jacobs, author of a book called Banish Your Inner Critic. And oh gosh, did I need to hear some of the stuff in that episode! Here it is, if you want to check it out: Banish Your Inner Critic with Denise Jacobs (Part I).

I listened to that on Monday. Then yesterday evening, a local meetup group hosted a talk about imposter syndrome, appropriately titled Slaying the Dragon. The number of attendees made me realize that self-confidence and self-questioning is something a LOT of other people experience as well.

I’m so thankful that there are people talking about these topics, and that these two events were kind of just plopped in front of me. The last few weeks have been rough, mentally, but I’m ready to get back up and try again.

P.S. Why the photo of me at the climbing gym? Because rock climbing is something I recently started learning, and it’s shown me that I am way braver and more capable than I think, sometimes.

 

 

Latest project: Iroquois Hill Runners website redesign

If you talk to me for like 15 minutes, you’ll probably learn two things: I love running, and I love my neighborhood. So I was super excited when the board members of Iroquois Hill Runners, my neighborhood running group, asked if I’d like to redo the website.

Here’s a quick before and after:

IHR

The existing website was made with a free WordPress It had been a few years since the site was created, so it was in need of a facelift. Here’s what I did:

1.Identified what information visitors were looking for

When I  looked at the site analytics, I noticed traffic spikes around race dates. Race results are posted on the site, so the traffic increases are due to people looking up their running times. So I knew a race results tab had to be front and center.

The group is best known for organizing races in Iroquois Park, so I knew easy access to the events page was essential as well.

2.Identified what information was missing from the site

After talking with several runners who were familiar with the group, I realized there wasn’t much awareness that people can actually join the group. So I added a Become a Member section that outlined why membership is important and included instructions on joining.

I also realized there wasn’t a clearly-labeled “about” page for visitors to the site who aren’t familiar with the group, so I added that as well.

3.Added front-page features that show who we are

The previous front page was informative, but didn’t show a whole lot of personality. There were already a lot of photos taken by group members and posted on Facebook, so I took some of those and created a slideshow. I knew from my research involving yoga events that people love to see photos of events and who attends them.

I also added an announcements section to the front page for two reasons: 1) to put important information in an obvious place, and 2) to show that the group has events going on year-round, and that we want people to come join us.

A few things I learned while working on this project:

1.It’s super important to pick the tool that fits the job.

I was eager to use all the web development skills I’ve learned recently, so I set out to make a fancy website from scratch. I did this, and my design looked great, but then I realized that nobody else from the group would ever be able to update the site, because they’re not developers. Not to mention all the logistical challenges of actually getting the site on the web. In the end, I found that a WordPress template with a few custom changes accomplished what we needed.

2.Take more before pics before jumping into the rebuild

The before photo I’ve got above is actually more of a progress shot. At that point, I’d changed the header photo and text. I forgot to take true beginning photos, but trust me, the site came a long way during the process.

 

User experience of the week: Treehouse online learning platform

Now that my General Assembly class is over, I’m looking for ways to continue learning how to create great user experiences. Being able to articulate strengths and weaknesses from a UX perspective is something I’m working on, so I decided to try a new thing and see how it goes. Each week, I’ll do a short post about a great (or not so great) experience I had as a user and talk about what made it that way.

So I’ll start with a good one. I haven’t counted how many hours I’ve spent on Treehouse in the past year, but it’s a LOT. In case you’re not familiar, Treehouse is an online learning platform, and they offer classes in all areas of tech, from basic computer literacy to Python, JavaScript, and C# development. A lot of learning for Code Louisville is done via Treehouse, which is how I got introduced to it.

In my opinion, intuitiveness is what makes Treehouse a really good experience. (By the way, nobody’s giving me any incentive to say any of this.) I never had to read a manual on how to use Treehouse, or consult any FAQ section. The visual cues on the site were enough to show me around the first time I visited the site. Here are four other navigation elements that make the platform enjoyable to use:

Continue reading “User experience of the week: Treehouse online learning platform”

Six things I learned during my six-week deep dive into UX design

Yesterday, I wrapped up my UX design class with General Assembly. It was only six weeks long, but I feel like I’ve come a long way since the beginning of August! When I started, I had a vague idea of what the design process looked like, but now I’ve actually been through every step of it.

Here are six things I learned:

1. You can learn something from every project, even if you create a product you don’t love.

Continue reading “Six things I learned during my six-week deep dive into UX design”

General Assembly UX design course, weeks 3-4: wireframing with Sketch, prototyping, and learning some valuable lessons

These last couple weeks in the course have been somewhat of an exercise in persistence. I’ve gained a ton of knowledge and experience, but overall, I feel like I’m creating something that adds work for people. Which is probably the opposite of what I should be doing as a UX designer.

Let me back up a bit. I’d written previously about how, according to my user research, people were having problems with yoga classes not being quite what they expected, and they wanted to know more information before stepping into the studio. So my mission was to figure out a way to give them more information. If you want to know where it all went wrong and what I’m learning from it, keep reading.

Continue reading “General Assembly UX design course, weeks 3-4: wireframing with Sketch, prototyping, and learning some valuable lessons”