Espacio Jam
Espacio Jam is a Spanish podcast where their hosts, Guillermo García and Antonio Vicent talk about basketball and movies. I've joined them a few times to talk about the latest news in the NBA, but they're currently focusing on promoting women's basketball in Spain through interviews with professional players. They started recording towards the end of 2020, and early 2021 they decided they needed a website to showcase their recordings and yet-to-be-written articles on both topics. Antonio contacted me asking for recommendations about which website builder would be the best option to use. Around that time, I had been thinking about starting a small web project to learn the basics of React, so I got back to Antonio and told him I would build the website for them.
Info
2021, 3 weeks
Role
Designer & Developer
Context
Side Project
Skills
Responsive Web Design, Web Development, CMS
Tools
Figma, React, HTML, CSS, CMS (Contentful), Github
The Challenge
The biggest challenge was getting started. I hadn't done any web development before, so there were a few challenges involved in setting up the React project. Luckily, I found a great video explaining how to build a basic react website step by step.
The other main challenge was content management. Espacio Jam releases 1 or 2 episodes per week, which means their hosts needed an easy way to upload the latest episodes to the website. For that, I used Contentful CMS to manage the content.
The Process
I started by drafting a few sketches on paper to investigate different layout options. I then created a quick mockup on Figma to polish the layout and components' design. This also accelerated the process of writing the CSS, thanks to the inspect panel on Figma. I was given full freedom in terms of the branding for the site - the only asset Espacio Jam had at the time was their logo. I must confess I didn't have much experience on branding at the time, so I went for something simple, clean and clear.
Simple brand guide used across the site
When everyone was happy with the overall layout on Figma, it was time to dive into VSCode and start building the site. Writing the code was pretty straightforward. As I wasn't doing anything radically new, it was easy to find solutions by doing a bit of googling. I particularly enjoyed the challenge of making the site responsive to different screen sizes.
Espacio Jam's website on desktop and mobile
The final step was to fill the site with real content, which was pulled from Contentful. There were two different CMS collections by type: articles and episodes. Each collection was comprised of two categories: movies and basketball. I had to make sure I displayed the right information on each page. I created a GraphQL service to receive the queries and get the collections from Contentful displayed on the site.
The Result
When I started this project, I didn't know how long it would take me to complete it because everything was new to me. In the end, I spent 2-3 hours every evening over 3 weeks to finish the site. Looking back, it all seems a lot easier than what it actually was, but it was a great learning experience and I really enjoyed my first React project.
Visit espaciojam.com →