It was all the way back in June of 2021 when the idea of building a blog for SWA came to the table. At first, I didn't want to even call it a blog, purely because when I think of the blog, I just think about WordPress sites and insight Mom Blogs (which can be great). I knew from the beginning that we would do something different than the typical.

Once Chris and I sat and decided that this was something that we wanted to do, I sat down and started to figure out the tech stack that we could use. I started to learn React back in September of 2020. Man, what a game-changer that was. I knew React clicked with me from the moment someone made the metaphor:

"Sure, you can build something with vanilla JavaScript, but it will be build like a big solid block, it will work like a top, but making changes can be heart surgery. With React, you still build the same project, but its more like a Lego set, you can build it in chunks and then peice them togehter. Then, when you want to make updates, you just update that chunk of code instead of having to rework the entire project" - Stephen Grider, Udemy Instructor

For some reason, if someone takes an aspect of something and can present it in the form of a metaphor, its clicks. Likely because my dad is the master of metaphors for any situation in life.

Once I took that leap into React, I knew I was cooking with gas. I fell in love by learning concepts and the thought process that went into it. It was one of the first times in my development career that I really was into a framework. So I ran with it. I built a few other apps for SWA. If you used the site, you might recognize them.

These two projects taught me more than I could learn on any video on the net, from the planning process to execution. I was able to not only create the projects but learn how to serve the apps with alternate platforms than the norm. These are being powered by Cloudflare Workers, a serverless platform by Cloudflare. This was also my first time delving into the world of serverless platforms. It had a few nuances to learn, but they have excellent documentation that helped me get both of these apps live. This also gave them the upper hand, as they are now being served by the EDGE. Since then, they have released Cloudflare Pages, another AWESOME platform for serving static files. I use it for many simple sites I host, and works like a top. It is also a little bit of foreshadowing for what was in store for me with what became ShopTalk.

Enter NextJS

React is great and all, but while on Twitter one day, I came across a new shiny framework called NextJS. I did not understand a lot of the concepts that they preached in the short intro video I saw, but what they did preach was SPEED.

They piqued my interest enough to check out the training tutorials they had on their (beautiful) website. They were done by the shining Lee Robinson at Vercel. It took me about three videos to realize that this was a game-changer.

So there I was, sitting and thinking.
Do I just use an out-of-the-box CMS?
Do I look for an easily integrated solution?
Do I get fancy with a WordPress site? (lol jk)

Or, do I use a framework I just found out about, using a headless CMS system I've never used before, and build everything about the site from scratch.

The sound of an ultrafast site that I can have a hand on every aspect of the site sounded appealing. So like our forefathers, I set sail into unknown waters on a long journey, unsure of the rough waters I was headed into (see, my life is in metaphors).

Where do I even start?

Well, I started with the mock-up. Usually, this is the first stage of any site that I work on. I will get out my drawing book and doodle down potential layouts, different elements, and potential cool features I could build-out. Most of the time, it just looks like a bunch of scribbles on a page. To the naked eye, it can be perceived as a drawing done by my toddler son, but to me, it's blueprints.

Once I had a good idea, I moved from paper to Photoshop. Who knew making memes in middle school would lead to fundamental work skills I can use at my job and often do. I like to try and build out a general skeleton from my drawings and start to flesh out other features. I had a basic concept in mind, and the idea was actually inspired by the Hulu app. I thought the different color gradients on each of the pages looked sick. So I started there. Here is the v1 of the mock-up.  

I had the basic concepts down, but there just was something off about it. I knew what features I wanted to keep, which I tried to build on, and which I wanted to scrap. It took me a few days to bounce ideas off some fellow devs, but then things started to come together. Here is the final version of the mock-up for the site before coding started.

If you couldn't tell, I use the most random placeholders in my work. It's always a risk of sending a "const fart = testThisFunction();" to production.

ANYWHO, I had my goal. So, after the mock phase, I bring the design over to one of my favorite pieces of software that I have ever purchased, BootStrap Studio. I use this software to take the mocks that I make in Photoshop and breathe HTML and CSS into them.

This part is pretty fun. I get to take an image that I have been working on, and try and make code look as close as possible to the original image. I pride myself in saying that I am pretty good at it. I am a stickler for pixel by pixel adjustments for sections of site that no one will ever even know is off by 2 px.

But I will know, and thats enough.

Some of the functions I was able to work out in this stage were the category underline, the glass effect for the blogpost blurb, and the transition for the PopularTalk cards. Also, of course, I had a full blown fist fight with the project working to make this site mobile responsive in the way that I wanted it to. Don't get me wrong, I like CSS. I always have, it always made the most sense to me when learning how to code. Media queries on the other hand, easy to wrangle, hard to master. I learned a lot during this phase of how sometimes I just gotta rig it to how I want it to behave.

So after a few trial and errors and implementing the features I wanted to have nailed down, I was left with this.

When I was building these sections, I tried to already break things out into what I wanted to make individual components. I wanted to make sure I had built at least one version of every element that I know I would reuse, becuase I knew from other projects that I worked on that I could just take data, and map() over arrays of data to generate the same component, just with different data .    

I had some fun with the cards, making that cool transition from image to text. I also decided midway that I wanted to add int he badges, and they just fit so perfectly with the rest of the design. At this point, I had a good idea of the data that I needed and where I wanted to put it.

Speaking of that, I did make a note on this project to make sure I at least look a few steps ahead in my idea thread my brain spins on pure speculation. I took the time to check out the documentation for the CMS I was planning on using, and see what type of data was even made available from their content API. I have definitely gotten ahead of myself in the past, glad I took the time to do my research in this case.