Build a Pinterest clone with Xata and Cloudinary
Tags: xata, cloudinary, serverless, frontend
Published: 2022-11-24 16:58:06

---
title: Build a Pinterest clone with Xata and Cloudinary

published: true
description: In this article, you'd be building out the core functionality of Pinterest: upload, save, and list pins.
tags: #xata #cloudinary #serverless #frontend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-24 16:47 +0000
---

Pinterest is an American image-sharing and social media service. It allows you to save images, animated GIFs, and videos as pinboards.

In this article, you'd be building out the core functionality of Pinterest: upload, save, and list pins. You'll be exploring the rich capabilities of Xata, a serverless database with built-in powerful search and analytics, and Cloudinary, a cloud-based image, and video management service.

## Prerequisites

A basic understanding of JavaScript and Next.js is needed to follow along with this article.

## Repository

You can find the complete code used in this article on [GitHub](https://github.com/folucode/pinterest-clone).

## Project Setup

[Node](https://nodejs.org/en/) has to be installed on your computer to set up the Next.js application. To install Node, go to the [Nodejs website](https://nodejs.org/en/) and follow the instructions to install the software compatible with your operating system. 

You can verify the Node.js installation by running the command below:


    node -v
    v16.10.0 //node version installed

To create the Next.js app, run the command below. It will automatically set up a boilerplate Next.js app.

`npx` stands for Node Package Execute. It executes any package from the npm registry without installing it.


    npx create-next-app@latest <app-name>
    # or
    yarn create next-app <app-name>

After the installation is complete, change the directory into the app you just created:


    cd <app-name>

Run `npm run dev` or `yarn dev` to start the development server on `http://localhost:3000`.


![nextjs-app](https://paper-attachments.dropboxusercontent.com/s_D6D02CF8B03C42412210DCFD6E1CDFF5C06A3DC4D7010024897EEBF1E682B292_1648074761781_nextjs-app.png)

### Setting up Xata database

Create a new database on your Xata dashboard called `pinterest_clone`

![Xata dashboard](https://paper-attachments.dropboxusercontent.com/s_071945D63A60EFEAA1B90D16D3A83AFB6BF893E1CDBF0B404AE6B378059E64D7_1668551815459_Screenshot+2022-11-15+at+23.34.25.png)


Next, create a table and name it `pins`. Your table schema should look like this:

![xata dashboard](https://paper-attachments.dropboxusercontent.com/s_B29D875419D4435B3A5554984CD0A27875C9F86E21C1542F6901D14945CD5F06_1668628644449_Screenshot+2022-11-16+at+20.57.10.png)

### Setting up Xata instance

Run the command below to install the CLI globally:


    npm install @xata.io/cli -g

Next, run `xata auth login`, which will prompt you to Create a new API key in the browser or use an existing one; go with the first option.

![User-uploaded image: xata-create-new-api-key.png](https://www.dropbox.com/paper/ep/redirect/image?url=https%3A%2F%2Fpaper-attachments.dropboxusercontent.com%2Fs_767BD3F7E260EFDC7E9C209798C513C5E8831A1EBE6D22594749206A5E483F79_1668175038404_xata-create-new-api-key.png&hmac=g3BGJmRJoEPYOihMybnJS1VeTFPEMkDvqnhFC0H%2BzY0%3D)


Now, in the project directory, run `xata init`. You will be prompted with several options to set up Xata in your app. Choose the options below:

![xata initialization](https://paper-attachments.dropboxusercontent.com/s_071945D63A60EFEAA1B90D16D3A83AFB6BF893E1CDBF0B404AE6B378059E64D7_1668553043237_Screenshot+2022-11-15+at+23.50.51.png)

### Installing Cloudinary

[Cloudinary](https://cloudinary.com?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) provides a rich media management experience enabling users to upload, store, manage, manipulate, and deliver images and videos for websites and applications. 

Install the package with the code below:

    npm i @cloudinary/react
## Fetching data from the database

To fetch the data from the database, first replace the existing code in the `index.js` file with the code below:

```javascript
    import styles from '../styles/Home.module.css';
    import { getXataClient } from '../src/xata';
    import Pin from '../components/Pin';
    
    export default function Home({ data }) {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>Welcome to Pinterest clone!</h1>
            <p className={styles.description}>
              Get started by creating your{' '}
              <a
                href='/create-pin'
                style={{
                 color: 'red',
                 fontWeight: 'bolder'
                }}
              >
                pin
              </a>
            </p>
            <Pin pins={data} />
          </main>
        </div>
      );
    }
    export async function getServerSideProps() {
      const xata = getXataClient();
      const data = await xata.db.pins.getAll();
      return { props: { data } };
    }
```    

In the root of your project create a `components` folder. In the `components` folder, create a  `Pin.js` file and add the code below:

```javascript
    import styles from '../styles/Home.module.css';
    
    export default function Pin({ pins }) {
      return (
        <div className={styles.grid}>
          {pins.map((pin) => (
            <div
              className={styles.card}
              style={{
                backgroundImage: `url(${pin.image_url})`,
                borderRadius: '10px',
                backgroundSize: '100% 100%',
                backgroundRepeat: 'no-repeat',
              }}
            >
              <a href={pin.destination_link}>
                <h2>{pin.title}</h2>
                <p>{pin.description}</p>
              </a>
            </div>
          ))}
        </div>
      );
    }
 ```   

In the `Home.module.css` file, replace the contents with the code below:

```css
    .container {
      padding: 0 2rem;
    }
    .main {
      min-height: 100vh;
      padding: 4rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .title a {
      color: #0070f3;
      text-decoration: none;
    }
    .title a:hover,
    .title a:focus,
    .title a:active {
      text-decoration: underline;
    }
    .title {
      margin: 0;
      line-height: 1.15;
      font-size: 4rem;
    }
    .title,
    .description {
      text-align: center;
    }
    .description {
      margin: 4rem 0;
      line-height: 1.5;
      font-size: 1.5rem;
    }
    .grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 800px;
    }
    .card {
      margin: 1rem;
      padding: 1.5rem;
      text-align: left;
      color: inherit;
      text-decoration: none;
      border-radius: 10px;
      transition: color 0.15s ease, border-color 0.15s ease;
      max-width: 300px;
    }
    .card h2 {
      margin: 0 0 1rem 0;
      font-size: 1.5rem;
      color: black;
    }
    .card p {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.5;
      color: #f82929;
    }
    .logo {
      height: 1em;
      margin-left: 0.5rem;
    }
    @media (max-width: 600px) {
      .grid {
        width: 100%;
        flex-direction: column;
      }
    }
    .form {
      width: 400px;
      height: auto;
      padding: 1%;
      display: inline-block;
      background-color: #626161;
    }
    .formInput {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .submitInput {
      width: 100%;
      background-color: #4caf50;
      color: rgb(255, 255, 255);
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .submitInput:hover {
      background-color: #000000;
    }
 ```   

What has happened so far is that you:

- Imported the `getXataClient` utility and initialized a new instance
- Queried the `pins` table and fetched all records with `getServerSideProps`
- Passed the fetched data to the `Pin` component through props.
- Did basic CSS setup
## Inserting new records in the database

To insert new data into the Xata database you created. First, you'd need to create a form and capture all the form data input by the user and send it via an API call to be stored in the database. Remember that you'd need to upload the Image selected by the user to Cloudinary.

Create a new file called `create-pin.js` and add the following code:

```javascript
    import { useState } from 'react';
    import styles from '../styles/Home.module.css';
    
    export default function CreatePin() {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>Welcome to Pinterest clone!</h1>
            <p className={styles.description}>
              <a
                href='/'
                style={{
                  color: 'red',
                  fontWeight: 'bolder',
                }}
              >
                Home
              </a>
              <br />
              create your pin
            </p>
            <div className={styles.form}>
              <label htmlFor='title'>
                <b>Title:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setTitle(e.target.value)}
              />
              <label htmlFor='description'>
                <b>Description:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setDescription(e.target.value)}
              />
              <label htmlFor='destination link'>
                <b>Destination Link:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setDestinationLink(e.target.value)}
              />
              <label htmlFor='image'>
                <b>Image:</b>
              </label>
              <input
                type='file'
                className={styles.formInput}
                onChange={(e) => setImageSrc(e.target.files[0])}
              />
              <button
                onClick={handleOnSubmit}
                type='submit'
                className={styles.submitInput}
              >
                Submit
              </button>
            </div>
          </main>
        </div>
      );
    }
```    

This is just a basic HTML form. Now you’d need to capture the input data like so:

```javascript
    import { useState } from 'react';
    import styles from '../styles/Home.module.css';
    
    export default function CreatePin() {
      const [imageSrc, setImageSrc] = useState([]);
      const [title, setTitle] = useState();
      const [description, setDescription] = useState();
      const [destination_link, setDestinationLink] = useState();
    
      return (
        ...
```
Now, create the function to upload the image to Cloudinary and store the data in the database. 

Create a function called `handleOnSubmit` and add the following code to it:

```javascript
    import { useState } from 'react';
    import styles from '../styles/Home.module.css';
    
    export default function CreatePin() {
     ...
    
      async function handleOnSubmit(event) {
        event.preventDefault();
        let response;
    
        if (imageSrc) {
          const body = new FormData();
          body.append('upload_preset', 'bn1pyehj');
          body.append('file', imageSrc);
          response = await fetch(
            'https://api.cloudinary.com/v1_1/<Your-Cloud-Name>/image/upload',
            {
              method: 'POST',
              body,
            }
          ).then((r) => r.json());
        }
        fetch('/api/create-pin', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            title,
            description,
            destination_link,
            image_url: response.secure_url,
          }),
        }).then((r) => alert('record added successfully'));
      }
    
      return (
        ...
```    

What you’re doing in this function is that you’re:

- Uploading the image, if it exists, to cloudinary using your upload preset. 
- Storing the data in the database through the next.js API. 

You can find your upload preset in the Upload tab of our Cloudinary settings page by clicking on the gear icon in the top right corner of the dashboard page. 

![upload+preset+cloudinary](https://paper-attachments.dropboxusercontent.com/s_4B2ADD3FEB8D8E1F33E2260860C62FB74C629B51D38EF19C3CBB685E1CC815E6_1658093368939_upload+preset+cloudinary.png)


By scrolling down to the bottom of the page to the upload presets section, you’ll see your upload preset, or there will be an option to create one if you don't have any.

### Storing data in the database

Create a new file in the `api` folder and name it `create-pin.js.` Paste the code below in the file:

```javascript
    import { getXataClient } from '../../src/xata';
    const xata = getXataClient();
    
    const handler = async (req, res) => {
      const { title, description, destination_link, image_url } = req.body;
      await xata.db.pins.create({
        title,
        description,
        destination_link,
        image_url,
      });
      res.end();
    };
    
    export default handler;
 ```   
## Running the Application

To see the app in action, run `npm run dev`, and visit the URL. The `create-pin.js` page should look like this:

![nextjs page look](https://paper-attachments.dropboxusercontent.com/s_B29D875419D4435B3A5554984CD0A27875C9F86E21C1542F6901D14945CD5F06_1668629625336_Screenshot+2022-11-16+at+21.13.34.png)


Once you submit the form, the result would show up in the `index.js` page like so:

![nextjs](https://paper-attachments.dropboxusercontent.com/s_B29D875419D4435B3A5554984CD0A27875C9F86E21C1542F6901D14945CD5F06_1668629745040_Screenshot+2022-11-16+at+21.15.31.png)

## Conclusion

In this article, you a pinterest clone that helped you explore using Xata for seamless database storage and Cloudinary for easy image uploads.

## Resources
- [Xata documentation](https://xata.io/docs/quickstart/index?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)
- [Cloudinary documentation](https://cloudinary.com/documentation?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)
- [Next.js documentation](https://nextjs.org/docs/getting-started)