Built by Alex #01 - SwiftUI & espaciojam.com
My first-ever newsletter: Learning SwiftUI and building my first React website.
About ‘Built by Alex’
Welcome to Built by Alex. Here I write about my side projects, which consist mainly of software products at the moment. From ideation to completion, I will share the highlights, takeaways and reflections from every product I build.
Disclaimer: I’m just getting started with building software products, so expect a lot of rookie mistakes!
Learning SwiftUI
For a couple of years, I’ve been thinking about building my own apps. But for multiple reasons that will only sound like excuses, I never really got started until summer 2020. Better late than never. SwiftUI makes it very easy to get started, as it has a lot of components (views) that can be used straight out of the box. Visualising code is straightforward with previews and Xcode’s simulator, and you can even drag and drop views without typing a single line of code. These were some of the reasons why I decided to start learning SwiftUI.
Primitive School
So in August 2020, I got started with SwiftUI on Primitive, a free series of videos by @elirousso that teaches the basics of SwiftUI. The course is aimed at designers who want to get started with Apple’s latest user interface toolkit. Although it failed to get me any closer to start building functional apps, it taught me the basics about designing with code. Most importantly, it sparked my interest to dive deeper into SwiftUI.
100 Days of SwiftUI
It took me a bit of time, but in November 2020 I started the 100 Days of SwiftUI course by @twostraws. On all previous occasions when I started learning a new language (or anything new really), I had always struggled to keep up after the first few days. I now think I have found three reasons why this happens:
Often my excitement for learning something new fades away as soon as things get more complicated. The first few days are usually the easiest and I feel like I’m making great progress. But not long into the learning journey I tend to hit a wall and soon after I ask myself - why do I even want to learn this?
The second reason is even more worrying. As a kid, I always felt like I could learn things pretty easily. So why would it be any different now? Well, I’ve noticed that I would frequently convince myself that I had mastered a new skill after watching just a few videos without really paying much attention. And it’s taken me a long time to understand - still happens - that’s not always going to be the case. It takes time to learn something new.
The third reason is commonly referred to as the shiny object syndrome. I easily get distracted every time I have a new idea, a new interest. When this happens, I put everything else to rest and most of the times I never come back to it. The issue is that this happens again and again, so the result is that I rarely complete anything.
Anyway, when I came across the 100 Days of SwiftUI course, it felt like I could avoid the points above by just sticking to the course for 100 days. I’m now on day 78 and although I took a 5-day break over Christmas, I have spent 60-90 minutes every single day since I started.
This marathon approach has helped me establish a solid foundation of SwiftUI concepts that I will start applying on my own projects soon.
As part of the course I have already built quite a few apps. I’m planning to do a summary of my key learnings and talk about the projects I’ve enjoyed the most on a later post - but that’s enough of SwiftUI for now!
espaciojam.com
New year, new project!
Last year, two friends from high school decided to start a podcast about movies and basketball. You might be wondering what those two have in common. In short, they’re just two topics they both like and know a lot about. They are now starting to write articles as well, so in January 2021 they decided they needed a website where they could keep all episodes and articles. They came to me - the techie friend - asking about which website builder would be best to use. My reaction was: I’ll build it, from scratch.
It’s probably worth saying at this point, that I had never built a website. And that’s partly why I saw this as a great opportunity. I didn’t have to worry about expectations and I didn’t have to think about what the product needed to do. I just had to do a simple website that listed all their episodes and articles.
Build then learn
I’m sure you’ve never heard that one before… Well, I thought it was about time I put it to practice. At this point, I had no clue about which framework would be best to use or even how to start. I’ve always heard good things about React, so I chose React. The website I was trying to build was relatively simple and, honestly, I wasn’t sure if I had made the right choice. I could have gone and spent a few hours researching about frameworks. But then I wouldn’t be building-then-learning, right?
So I typed build react website on google, clicked on the first video and followed a 2-hour tutorial to build a functional React website from scratch. It took me about 8 hours to complete the tutorial, but I learnt the basics about components, navigation, state, responsive websites and more. It was great for learning HTML and CSS too.
Before I started coding the actual website, I did a mockup on Figma to define the aesthetics of the website. I knew I would also find the inspector on Figma useful to get the CSS values right quickly.
Content management
Building the website itself was easier than I had initially imagined. I probably spent more time on Stack Overflow than on VS Code, but I was able to build the main sections and components in less than a week. The tricky part came with content management - an essential feature of this product. Initially, I thought of 3 options:
Hard code every article and episode’s title, description and URL.
Use two JSON files to store articles and episodes.
Find a CMS that I could integrate with the website.
Option 1 was discarded pretty much instantly. I used Option 2 to test the website initially, but I knew that sticking to it would require me to add the content every time a new episode or article was released. That happens 2-4 times per week. Option 3 felt like the most sensible option, but it required more work upfront.
It took me a bit of time to understand how to make the API calls to pull the content, filter by topic and type, and apply sorting by date. But in the end, the effort was worth it - the guys at Espacio Jam can now easily add all the content by themselves while I write this.
To check the final product, head over to espaciojam.com!