avatar
Ariel Rodriguez

Author

Jan 15, 2021

8Bit Blockbuster

This project is part of Colby Fayok's #react50 projects. I decided to build an 8bit version of a video store in a video game. Let's talk about it.

8Bit Blockbuster
window-paragraph8Bit Blockbuster
About The Project

8bit Blockbuster Video Rental is a permanently closed eCommerce store. The design is a homage to my childhood. I wanted to build a video store that lived inside of a video game.

I'll go over my design process for this build, my decision-making process, some challenges I faced along the way. I gave myself a week to try and accomplish this build, I'll also go over my failures and some of the things I learned during the research stage of this build.


StrapiStripeVercelTailwind
Some Project Details
Design
Pixel Art by Loweak
Pixel Art by Loweak

Design Tools: Google, Pixelmator Pro, TailwindCSS

I love designing, for me it's where I can loose myself when building a website. It's also my biggest hurdle, I tend to fixate on the smallest detail at times. My time is limited with a toddler at home and another one due in a few weeks. Here a few tips to keep you focused and maximizing your build times.

I tend to design on paper first, I start with the navigation, move on to content, and eventually get to the footer. These are rough sketches, but it helps form a roadmap for me. After I'm happy with the sketches, I move on to solidifying my theme. This can be tricky, I try not to do any google searches until I know what I want my finish project to look like.

Now That I have my theme, I'll start looking for my assests. I started with my Font (PixeBoy), then I moved on to images, any inspiration. One thing to keep in mind here is try not to spend too much time searching for inspiration, you don't want to be swayed by someone else's work.

For 8bit Blockbuster, and most of my Projects I start with the Navigation. I like to think of my Navigation bar is a living object. I expect it to change throughout the project, so I try not to spend to much time thinking about it. Next, I move on to the footer, and I have the same build/design philosophy here as well. I really just look to accomplish the asthetics first expecting to add or take something away from it throughout the build.

Next, I work on the easiest components first and work my way up to the more complex ones to build. The reason I tend to start in that direction is because I'm still learning, and if I start on the most complex I may lose interest and be willing to walk away from the project because "I just started it".

Brainstorm, Research, Prototype, and Build.

Gallary
8Bit Blockbuster
8Bit Blockbuster
8Bit Blockbuster
Conclusion

This was a fun, challening exersize to say the least. I gave myself a week to finish the project and I went over a day. I spent way too much time with the initial design, and trying to perfect the logo. I mentioned earlier that I tend to over spend my time on small details, and that cost me at the end of this project.

It's important to me to stick to a timeline, and move on from projects. If I don't so this, I never move on from my projects. Some of the things I didn't complete was connect the app to the Stripe API. I had some trouble with the logic, and when I thought I might have solved it, my time had run out. I still love the end project and wouldn't change much from it.

This was also the first project I used Strapi CMS on. I have mixed feelings about it to be honest, getting started pretty straight forward but hosting your strapi data on Heroku was not easy. The docs weren't easy for me to follow, I ended up finding a YouTube walkthrough and was so excited when I had a working hosted Strapi API. Then it all came crashing down. What I didn't realize, is you can't just host your images on the Strapi API, you need to host the on another cloud hosting service like Cloudinary and make a request for them. It was another time hole for me, another reason I couldn't complete this project.

Learing Jamstack development for me means I'm constantly searching for the perfect "stack" that fits my development skillset. There is no one stack fits all either, every project is different but every day I'm getting closer to finding what works for me.

Although I enjoyed this particular stack, the added complexities of hosting a Strapi API will probably keep me searching for another Headless CMS. If you guys have any questions feel free to shoot me a message!

And that's where I'll leave you guys. Feel free to comment, let me know what you think about the project. Talk soon.

Stack, Repository, & Resources.

Project Stack

Github Repository

Resources