Building a product (whenarethefights)
Tags: product
Published: 2021-01-29 05:02:23

---
title: Building a product (whenarethefights)
published: true
date: 2021-01-28 16:30:03 UTC
tags: product
canonical_url: https://mikebobadilla.com/building-a-product/
series: building a product
---

![Website layout doodles.](https://images.unsplash.com/photo-1573867607131-872f83689352?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDV8fHBsYW58ZW58MHx8fA&ixlib=rb-1.2.1&q=80&w=1080)<figcaption>Photo by <a href="https://unsplash.com/@halacious?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit">Hal Gatewood</a> / <a href="https://unsplash.com/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit">Unsplash</a></figcaption>

<!--kg-card-end: image-->

<!--kg-card-begin: markdown-->

I've been meaning to rebuild [When are the fights](https://whenarethefights.com) and I keep getting stuck worrying about where the data is going to come from, how cool I can make it, and if I want to use any new technologies. I decided I didn't care anymore and just wanted to go back to when I first made the site. It was just a static page hosted on [Netlify](https://netlify.com). I decided to document the process of how I break down my process on building products, or at least how I try and approach them.

### What problem are you solving

I want to see what fights are coming up in the [UFC](http://ufc.com), [Bellator](http://bellator.com), [Glory](http://www.glorykickboxing.com/), etc. It's a problem that scratched my own itch so I'm not too worried how many people come to the site.

### What is the MVP

For this site I am thinking a static page with a few upcoming fights should work. Nothing crazy, just a static site. The hardest part of this is not trying to over-engineer at the very beginning. The only exception I am making currently is that I am going to use NextJS, and the only reason I am choosing that is because I know something more dynamic might be needed later. It's a tiny bit overkill, but it's ok.

### Technology that is needed/wanted

- NextJS for building
- Vercel for hosting
- Gitlab for tracking changes and CI/CD
- Cloudflare for DNS and CDN.

This is a bit much, but I usually set up deployments before I build anything. The reason for this is that gearing up for deploying code after a session of coding starts off exciting and then kills the mode, so I prefer to start from a barebones app to track what ends up breaking the deploy. It's like TDD for deployments.

### How will this be deployed

Some sort of hook via gitlab and vercel. The goal here is whenever something is merged to master, we get a new build.

## Settings up the first deploy

### Setup the NextJS boilerplate

I'm just going to follow the [getting started page](https://nextjs.org/docs/getting-started#setup) on nextjs and get that deployed.

![Screen-Shot-2021-01-27-at-10.37.45-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-10.37.45-PM.png)

### Getting it on Git{lab, hub}

Follow the instructions on [Gitlab](https://gitlab.com/projects/new) if you're using Gitlab. Github has something similar.

Once that's done you will get instruction how to add your project to the repo.

![Screen-Shot-2021-01-27-at-10.46.03-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-10.46.03-PM.png)

### Connecting Vercel

Luckily Vercel has a connect gitlab project button so it's basically just a one-click deploy.

![Screen-Shot-2021-01-27-at-10.51.08-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-10.51.08-PM.png)

![Screen-Shot-2021-01-27-at-10.51.52-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-10.51.52-PM.png)

And now [https://whenarethefights-com.vercel.app/](https://whenarethefights-com.vercel.app/) has my app running.

![Screen-Shot-2021-01-27-at-10.52.13-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-10.52.13-PM.png)

### Now lets add some fights

I'm just going to put the next couple UFC fights on there and we'll call it finished so we can point our domain to our app on Vercel. We're just going to create the most basic and ugly site. No one cares, seriously.

```
import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>¯\_(ツ)_/¯ When are the fights</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.grid}>
          <a
            href="https://www.ufc.com/event/ufc-fight-night-february-6-2021"
            className={styles.card}
            target="_blank"
          >
            <h3>UFC Fight Night - Overeem vs Volkov</h3>
            <p>Sat, Feb 6 / 5:00 PM PST</p>
            <p>UFC APEX Las Vegas , NV United States</p>
          </a>

          <a
            href="https://www.ufc.com/event/ufc-258"
            className={styles.card}
            target="_blank"
          >
            <h3>UFC 258 - Usman vs Burns</h3>
            <p>Sat, Feb 13 / 7:00 PM PST</p>
            <p>UFC APEX Las Vegas , NV United States</p>
          </a>
        </div>
      </main>
    </div>
  );
}

```

![Screen-Shot-2021-01-27-at-11.06.59-PM](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-27-at-11.06.59-PM.png)

Save and push 🚀

Now that the ci/cd stuff is done, let's point whenarethefights.com to our app.

### Pointing the domain to our vercel app

I followed [these instructions](https://vercel.com/docs/custom-domains) loosley to get it working. I did however go through cloudflare as well so there was [an extra step](https://vercel.com/knowledge/using-cloudflare-with-vercel).

<!--kg-card-end: markdown-->

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

This is part of my experiment to try and write 250,000 words in 2021. It's not accurate and is just meant to loosely track progress.  
  
Current word count: ~2723 / 250,000  
Daily average: ~101  
Daily average Goal: ~685