I actually did it as a joke, but when you tell someone that you like them it's only a joke if they don't like you back. You know what I'm talking about.

I'll try to keep it short, I did spend this morning with it, so the conversation is quite long, but its parts are not that complicated.

## General idea

I won't tell you about it, I will just paste my prompt to ChatGPT:

> I'm creating a website that lists car parts and car accessories that can be found on amazon. It shows the price and everything, but when you click it it will take you to amazon with an affiliate link. Can you suggest a catchy name that can be a .com domain?

And the response was... good:

> Sure, how about "AutoPartCove.com"? This name combines the concepts of automotive parts and accessories, while also evoking a sense of a welcoming destination or "cove" where people can easily find what they're looking for.

I actually had the intention of going back and forth about the name, but the first one actually convinced me. I mean it's not like a serious thing, I'm doing this for fun, so let's go with [autopartcove.com](https://autopartcove.com).

## Time to (not) code!

I don't want to tell it to generate the site for me, I want to create something specific that I like and I know the way it works, in case I need to make modifications or fix errors. Let's go with NextJS.

> Sure, let's call it AutoPartCove. I'm creating in Next.js, can you do the code for me, file by file? Let's start with pages/index.tsx

I won't bore you with the details, but the responses usually look like this:

![screenshot chat gpt pages index](https://i.imgur.com/SbMbWmX.png)

It was actually a pretty good start. Of course it's importing stuff like `Layout` and `fetchProducts`, which we can ask it to create them for us. But first, I notice it's using `getServerSideProps`:

```
export const getServerSideProps: GetServerSideProps = async () => {
  const products = await fetchProducts();

  return {
    props: {
      products,
    },
  };
};
```

That means it will be SSR (server-side rendered), but I prefer using SSG (static site generator) for this project. No problem for ChatGPT!

![make it SSG](https://i.imgur.com/LqqYZ2S.png)

Done! Now I want to create the Layout component. I want to use TailwindCSS, just because, so I asked:

> give me the Layout component (use tailwindcss for everything). If you want to use colors, use them in this format: className="text-primary-100 bg-secondary-700", having only a primary and a secondary color

It worked but I specified that I wanted shades going from 50 to 900. OMG I'M BORING MYSELF. *Let's get to the good parts.* I generated the layout component, the product list component... So, it's time to actually get some products from the API.

## Getting products

It initially gave me a dumb static list of products, which of course I don't want, so I asked it to use the Amazon API. Long story short, it recommended me a bunch of libraries and I ended up with `amazon-buddy`. The others (including the official amazon PA API) were not working for me (for known reasons).

Even with that one, it was throwing some errors, so I went to its documentation and LITERALLY paste it into ChatGPT.

![amazon-buddy docs](https://i.imgur.com/5erIfJB.png)

And it worked!

![amazon-buddy worked](https://i.imgur.com/vcq4oJc.png)

## UI

This was actually the longest part, cause I really didn't want to do ANYTHING manually, so **I was asking ChatGPT to do EVERYTHING for me**. Not the best idea, I actually hit GPT-4's 25 requests/3-hours limit so I had to fallback to GPT-3.5. It's not as smart as GPT-4, but it's pretty good, enough for this project.

I tweaked TailwindCSS, some components, dark mode, `next-seo`, buttons here and there, and a search bar that actually works. OH WAIT I ALSO ASKED IT TO MAKE A LOGO WITH DALLE·2! Well, I asked it to give me a prompt, and it kinda worked. Here's what the website looks like at the moment of writing these lines.

![autopartcove.com](https://i.imgur.com/sDDffeD.png)

## Blog

As you might have noticed in the screenshot, I didn't wanna stop there, so **I asked it to create a blog** with some posts (that later I would ask it to fill with content 😁) related to the site. It also took some back-and-forth talking about UI, the format of the posts, etc. The final idea was a `pages/blog/index.tsx` that rendered the list of posts, and each post is an actual component inside `pages/blog/<slug>.tsx`. It can easily be done better, using a CMS or using MDX, but that was good enough.

![blog](https://i.imgur.com/JBrAWR1.png)

Did I mention that it created a responsive menu without me asking for it? LOOK AT THAT!

![responsive menu](https://i.imgur.com/Jikhy8o.gif)

## Conclusion

No. That won't make you money. If someone tells you that generating affiliate stores will make you rich they will also probably tell you about Bitcoin, NFTs, and the keto diet. **Run**.

But that was a fun project. I did all of that in only one morning, and I could actually create something useful in the future. I'm currently using it to improve code that I already did or fill in gaps.

Go try it for yourself, or visit my new awesome store [AutoPartCove.com](https://autopartcove.com) and buy $1,000 worth of things, you know, just for fun :).

Yes, it's THAT good. Since I discovered ChatGPT I don't write boilerplate or stuff I wrote hundreds of times, I ask for it. Today I wanted to make it create a store to generate passive income.

I told ChatGPT to create a passive store and now I don't code anymore

At the start of this year I bought an M1 macbook air. Not because I needed one, but I was really curious about how it could perform on my daily tasks and my job also. I had a 2019 16" MacBook Pro so I didn't have any expectations about the small cheap MBA being better than my beast. I was wrong.

My plan was to try it out for a couple of weeks to see if I would suffer much from compatibility issues (virtualization, not-supported apps...) or poor performance while doing webdev work. **I ended up selling my 16-inch MBP!**

## The issues

I got my MBA and started to love the small form factor again. I was kinda hating my big-ass 16-inch macbook now, I really liked the portability even if it meant having a bit less performance. I started to install all the dev tools I needed. I thought this was gonna be the biggest issue but it wasn't. I did have some problems installing the native ARM version of [homebrew](http://brew.sh/), but I ended up installing the virtualized version. So all the tools I was using were actually virtualized (x86 binaries running on the ARM chip). How did that go performance-wise?

* **A-m-a-z-i-n-g**

I wish I still had my MBP to do the benchmarks again and show you the results. But I remember I was developing a nodejs/react project with webpack, and the compilation time was **THREE (3) TIMES FASTER ON THE VIRTUALIZED M1 CHIP**. Oh, I didn't mention this is a **1200**€ machine vs a **2700**€ one. Yes.

So I started to think this could really replace my current laptop. I was still using my 2 monitors at home, so screen real estate was not an issue. Although as you might know, M1 macbooks can only have **1 external display at a time**. The workaround was buying an (expensive) dongle **displaylink**-compatible, which basically connects via USB and you can have as many displays as you want. [This is](https://www.amazon.es/Kensington-K33972EU-Replicador-puertos-conector/dp/B009JZHEVU/ref=sr_1_13?__mk_es_ES=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dchild=1&keywords=displaylink+plugable&qid=1625490304&sr=8-13) the one I got. At first it was kind of tricky making it work with the laptop closed, but the drivers improved since then and nowadays they're almost perfect.

I'm not sure if it's placebo, but the every-day experience with macOS feels snappier on the M1 MBA. Although it's not a surprise considering Apple is now controlling both the hardware and the software. Actually it feels faster for apps like **Cura Slicer and Autodesk Fusion 360** (both virtualized) compared to my 3060TI custom PC 👀 .

## How did it save me money then?

Although some things were not perfect (for example some Docker images wouldn't work on M1 yet, I needed to wait) I ended up selling my MBP for more (**1500€**) than the MBA costs (**1200€**). I not only gained in performance but also in performance per watt. Did I mention this macbook has a **30W** charger? My *older* MBP had a **96W**. Big difference. At high loads the cost is three times higher, and the battery is also amazing. I can go days without charing the laptop and having it around for daily tasks, turned on all the time. Which is also great for remote-working on coffee shops, etc.

I actually **never missed the MBP.** Maybe the speakers are better, when I use it on the go. But I'm always with my Airpods on.

Oh, and I did save some generic benchmarks when I had both at home. Here they are (geekbench):

![Img](https://a.storyblok.com/f/113260/2148x836/d4308bb0f5/captura_de_pantalla_2021-01-24_a_las_19-11-12.png)![Img](https://a.storyblok.com/f/113260/1726x678/e3e5b70744/captura_de_pantalla_2021-01-24_a_las_19-12-02.png)

If you have any comments or questions ping me on [twitter](https://twitter.com/pablopunk) or [email me](mailto:pablo@pablopunk.com).

 I had a 2019 16" MacBook Pro so I didn't have any expectations about the small cheap MBA being better than my beast. I was wrong.

How buying an M1 Macbook Air saved me money

## The architecture

First, let's talk about the pieces I used for this:

* [NextJS](https://nextjs.org): The framework for React. Next has lots of cool features out of the box, but none are really important for this project, only that we can use the latest react with hooks.
* [Supabase](https://supabase.io): The open-source alternative to Firebase. Supabase is a new tool to create databases with lots of features, but the most important one for us here is that we can subscribe to live changes in the data via web sockets. We'll use [react-supabase](https://github.com/tmm/react-supabase) hooks for that.

## Set up

### NextJS

I won't go into much detail, as it's not important for this project. But I used my own starter kit that you can find [here](https://github.com/pablopunk/next-starter).

### Supabase

**First, you need a Supabase account.** Their free tier will give you 3 projects for free. Go ahead and create an organization and then a project inside it. It should take a couple of minutes to **create de database**.

Supabase has a very nice UI that lets you not only directly execute SQL queries, but also create and manage tables right there in your browser. For our project, we'll **create a new table** called clicks

![Img](https://a.storyblok.com/f/113260/203x265/42be63dc75/captura-de-pantalla-2021-08-01-a-las-21-23-03.png)

![Img](https://a.storyblok.com/f/113260/655x1002/04deecca01/captura-de-pantalla-2021-08-01-a-las-21-23-30.png)

Then we'll create a row (attribute) for our data called `type` by clicking the `+` button right after the `id` column in our empty table. This will indicate the type of button the user pressed, so there will be one row per button click (another approach would be just one row per button and another column that indicates the number of clicks, but that would require to deal with insert collisions and it's out of the scope of this project).

![Img](https://a.storyblok.com/f/113260/378x180/1744675632/captura-de-pantalla-2021-08-01-a-las-21-23-58.png)![Img](https://a.storyblok.com/f/113260/655x1002/04deecca01/captura-de-pantalla-2021-08-01-a-las-21-23-30.png)

Now we need to tell supabase we want that table to handle **real-time updates**, so we'll go into the left sidebar button `Database > Replication` and there we select the `0 tables` option from `supabase_realtime`, and then toggle our table `clicks`.

![Img](https://a.storyblok.com/f/113260/697x582/47e48194eb/captura-de-pantalla-2021-08-01-a-las-21-30-18.png)

That's it for supabase!

### The frontend

For the client, we'll use **supabase JS client and the hooks library for react**:

~~~
npm i @supabase/supabase-js react-supabase
~~~

Now go back to Supabase and copy your table tokens for the client. You can find those under `Settings > API`. Copy the `anon-public` key and the `URL`.

![Img](https://a.storyblok.com/f/113260/1189x693/2b93e772d4/captura-de-pantalla-2021-08-01-a-las-21-25-02.png)

In my case I put them on an `.env` file:

~~~
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
~~~

Now let's connect your client to supabase:

~~~
import { createClient } from '@supabase/supabase-js'
import { Provider } from 'react-supabase'

// client connected to your database
const client = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

export default client

// React component to wrap your app
export function SupabaseProvider({ children }) {
  return <Provider value={client}>{children}</Provider>
}
~~~

As you can see I'm also creating a `SupabaseProvider` to wrap your app inside it. In NextJS I do this in `pages/_app.tsx`. This will make sure all supabase hooks are connected to the created client:

~~~
const App = ({ Component, pageProps }) => (
    <SupabaseProvider>
        <Component {...pageProps} />
    </SupabaseProvider>
)

export default App
~~~

Now we can go ahead and create our own hooks. Let's create one to get the clicks in real-time. We can use the hook `useRealtime` from `react-supabase`;

~~~
import { useRealtime } from 'react-supabase'

export function useClicks() {
  const [{ data, error }] = useRealtime('clicks', {
    select: {
      columns: 'id,type',
    },
  })

  return data
}
~~~

As you can see it's very simple, it just gets the data from the database and every time the table changes it will update the hook value.

Let's create another hook for inserting. This one is even simpler, as there's already a `useInsert` hook:

~~~
import { useInsert } from 'react-supabase'

export function useInsertClicks() {
  const [_data, execute] = useInsert('clicks')

  return execute
}
~~~

We don't really care about the data here, so we just return the `execute` function, which takes an array of elements to insert.

Bored yet? Don't worry, **this is the last step. Let's create 4 buttons with 4 emojis**. The idea here is to display all 4 buttons with the number of clicks they have:

~~~
const buttons = [
  {
    type: 'happy',
    label: '😊',
  },
  {
    type: 'sad',
    label: '😞',
  },
  {
    type: 'party',
    label: '🎉',
  },
  {
    type: 'love',
    label: '❤️',
  },
]

const Buttons = () => {
  const clicks = useClicks()
  const insertClicks = useInsertClicks()
  const clickedButton = (type: string) => () => insertClicks([{ type }])

  return <>
    {
      buttons.map((button) => {
        const clicksForType = clicks?.filter((c) => c.type === button.type).length || 0
        return (
          <button onClick={clickedButton(button.type)}>
            <span>{clicksForType}</span>
            <span>{button.label}</span>
          </button>
        )
      })	
    }
  </>
}
~~~

Let's break this code into parts. First, you can see we **declare the 4 buttons** as an array, so we don't repeat all the HTML for each one. **Then we display those buttons** with their corresponding clicks: `clicksForType` is counting how many rows there are of the current button type. Then we insert a **new row on every click**, that's done by inserting an array of one here `insertClicks([{type}])`.

![Img](https://a.storyblok.com/f/113260/447x124/56eb9cc256/captura-de-pantalla-2021-08-02-a-las-14-09-00.png)

### Demo

That's really it! We have a working demo!

> [realtime.pablopunk.com](https://realtime.pablopunk.com)

**The source code for that is on GitHub**: [pablopunk/realtime-next](https://github.com/pablopunk/realtime-next). As you can see, the code there is fancier because it has some animations and styles, but the basic functionality is the same we've built in this post.

Pablo Varela

Blog