Creating the MVP

What are the minimal requirements?

Summary

In this video, I discuss building an MVP (Minimum Viable Product) for a blog website with two simple pages. The landing page will feature a navigation bar, profile picture, headline, sub-headline, social links, and a list of latest posts. The article page will include a navigation bar, back button, article title, post date, author name, lorem ipsum content, and links to five random articles. The goal is to create a basic functional skeleton that can be expanded upon, focusing on fundamentals and leaving room for learning and adjustment as the project develops.

Transcript

Welcome to Module 3, where we will be focused on building the MVP version of our block. The focus here is to get something on the screen that fulfills some basic requirements, and then continuously improve upon that. I typically try to create a basic illustration of what I'm building. Excalidraw, as you see on the screen here, is a really good tool for this, because it does not allow you to add too many details, so you automatically start focusing on the fundamentals or the basics of what the app requires or the page in question requires. It's tempting when you're starting out to want to do everything at once. But if you do things in a more limited scope, the results or the software that you end up with tends to be of a much higher quality. This is often due to the fact that we don't know what we don't know. And while this sounds very obvious, in software, when you've done this long enough, you experience this over and over that you made a plan, you actually started doing it, and found out that all of your assumptions were wrong. So if you leave things a bit too simplistic and then start building, we leave ourselves room to learn, and then we can actually course adjust the project into the path that is the correct one, based on actual experience. So doing it a little bit simplistic will beat all the planning that you have done up front. Simply as soon as you meet with the real world, the planning that you've done up front often tends to be wrong. Not all of it, but some of it. So for now, what we're going to be doing is we're just going to be having two simple pages, a landing page and an article page. For the landing page, we are just going to be showing a navigation bar, a profile picture, and then a simple headline and a sub-headline. And the goal of the headline and the sub-headline should be to catch our visitors' attention and hopefully give them enough information that they want to actually stay and continue exploring the site. Next up, we're going to be showing links to our socials, so that once our blog hopefully gets very, very big, we can also build up an audience so we can share our articles and our work with more people. And then finally, we're going to be showing our latest post, and this is just going to be a long list, starting from the latest one to the earliest one. We could add pagination here, which we might do in later modules, but the simpler version of this, we don't need more than just our list of our latest posts. For the article page, it's going to be quite similar. We will also have a navigation bar, and then we'll add a back button to the landing page, a headline, which is just going to be the title of the article, and then we're going to be showing a post date and then the name of the author, which the name of the author might be a little bit redundant. You're probably only going to be you writing blog posts, but it looks good, so we're going to keep it right. Next up, we're going to be showing the content of the article. For the first version here, we're just going to be showing what is known as lorem ipsum text. That is text that looks like text, but it's not text, so it's a good placeholder until we actually have some real articles to show. And then at the bottom here, we'll be showing links to our articles, and that is probably only going to be like links to five random articles. We can also implement that we can select which one to show, but a simple solution is just to show five random ones. We do this because if we have our visitors stay longer on our site, it's a signal to Google that we provide good content, and also we want our internal pages to link to each other, because that also is a signal to Google that some of our pages are more important than the other, and our article pages should be the most important ones. So very, very simple. We will add more to this as we go along, but this is going to be our article page. We will eventually make this whole application data-driven and add some nice UX features using STMX, but now the focus is just to get something on the screen that works, at least on a fundamental level, and then that we can then build upon. So don't get discouraged, we're going to be adding a lot more features than this, but this is basically the skeleton of our entire blog. We will eventually make this application data-driven and implement some nice UX features using STMX, but for now let's just focus on the basics and then continuously add components and complexity as we go along. So we just want some pages, these two pages here, that implement some very basic functionality with some dummy data, and in the next episode we will be doing the scaffolding and setting up the basics of our application so we can start actually implementing these pages.

Early Access

$95 $25 USD

Get access

Invoices and receipts available for easy company reimbursement