Building a product part 2
Tags: tailwinds, analytics, ux
Published: 2021-01-29 08:36:52

---
title: Building a product part 2
published: true
date: 2021-01-29 06:16:55 UTC
tags: tailwinds,analytics,ux
canonical_url: https://mikebobadilla.com/building-a-product-part-2/
series: building a product

---

 ![Building a product part 2](https://images.unsplash.com/photo-1523726491678-bf852e717f6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDMxfHx1aS91eHxlbnwwfHx8&ixlib=rb-1.2.1&q=80&w=1080)

On the last post we created our MVP, setup our Gitlab repository, setup our hosting on Vercel, and pointed our domain to Vercel. It sounds like a lot and it kind of is, but the point was to just get the most minimal app deployed. This serves as the band-aid to delivering something useful to the internet, and once the first one is done, it becomes addictive. The main goal is deploy as much as possible without feature creep becoming an issue.

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

The plan for today is going to be:

- Adding analytics from [Plausible Analytics](https://plausible.io/).
  - The reason I went with them is because while they aren't free, it's minimal and I'm not just giving a ton of user data to Google.
- Adding [Tailwinds](https://tailwindcss.com/) and some minor styling to freshen up the site.

### Adding the analytics script

First you have to head over to [Plausible](https://plausible.io/) and create an account. They give a 30 day trial without a credit card so no excuses. Once you have the account, `Add a website` and create the snippet.

![Building a product part 2](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-28-at-9.15.47-PM.png)

Now since we're using NextJS we need to use one their special pages named [document.js](https://nextjs.org/docs/advanced-features/custom-document) and it goes in the pages directory. Here's what my `_document.js` looks like.

```
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <script
            async
            defer
            data-domain="whenarethefights.com"
            src="https://plausible.io/js/plausible.js"
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

```

Give it a quick save, commit, push, and go to Plausible to make sure it's working. `git add . && git commit -m "Add analytics" && git push`. Then you get to see this cool screen.

![Building a product part 2](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-28-at-9.24.16-PM.png)

### Adding Tailwinds

So one of the main benefits of using something popular is getting pretty straightforward documentation. Here is how to [setup tailwinds with NextJs](https://tailwindcss.com/docs/guides/nextjs).

#### Installation

```
npm install tailwindcss@latest postcss@latest autoprefixer@latest
git commit -am "Add Tailwinds, postcss, and autoprefixer"

npx tailwindcss init -p

```

Following the instructions I updated `tailwind.config.js` and `styles/globals.css` to look like the following

```
// tailwinds.config.js
module.exports = {
  purge: ['./pages/ **/*.{js,ts,jsx,tsx}', './components/** /*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}


/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

```

Save and commit again. This steps important just in case shit hits the fan, you have a known good starting place.  
`git commit add . && git commit -m "Configure Tailwind"`

### Updating the style

So im going to cheat here and just go to [https://tailwindui.com/](https://tailwindui.com/). The reason being is I'm not the best designer and it's just easier. If you don't want to pay for this, there is an alternative free one that I've seen mentioned a few times [https://kitwind.io/](https://kitwind.io/). I'm not going to post the code because I feel like I would be distributing it, but look at the source if you want 🤷‍♂️. This is the component I'll be using. It's clean and has some badges on it. I think it's pretty close to what I need.

![Building a product part 2](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-28-at-9.55.11-PM.png)

And heres the final layout with our current info:

![Building a product part 2](https://mikebobadilla.com/content/images/2021/01/Screen-Shot-2021-01-28-at-10.14.10-PM.png)

I think thats a good stopping point, so let's save, commit, and push. Once thats up we can start thinking about our next deploy with will be letting React build the layout for us.

<!--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: ~3376 / 250,000  
Daily average: ~121  
Daily average Goal: ~685