I've been meaning to rebuild When are the fights 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. 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, Bellator, Glory, 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 on nextjs and get that deployed.
Getting it on Git{lab, hub}
Follow the instructions on Gitlab 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.
Connecting Vercel
Luckily Vercel has a connect gitlab project button so it's basically just a one-click deploy.
And now https://whenarethefights-com.vercel.app/ has my app running.
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>
);
}
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 loosley to get it working. I did however go through cloudflare as well so there was an extra step.
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
Top comments (0)