Let's build a Youtube clone with Nextjs and Tailwind-css🎉
Tags: nextjs, webdev, javascript, beginners
Published: 2022-07-20 07:20:00

**This is the preview of what we are going to build**


![Youtube-clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpohueapyl278tka7waa.png)

Here is the [live preview](https://metubee.vercel.app) of the site and the [link](https://github.com/Sadeedpv/MeTube) to the GitHub repo. This tutorial is part of a series and In this part, we will concentrate only on the website's design.

## SETUP 

### STEP 1
Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

```
npx create-next-app my-project
cd my-project
```
### STEP 2
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

### STEP 3
Add the paths to all of your template files in your tailwind.config.js file.

```
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide")],
}
```
### STEP 4
Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### STEP 5
Clean up the boilerplate code and run the command
```npm run dev```

If you get stuck at the above steps at any point, refer to this [doc](https://tailwindcss.com/docs/guides/nextjs)

## Installing other dependencies

Now before we start, we have a couple of dependencies to download.
```
    "axios": "^0.27.2",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-avatar": "^5.0.1",
    "react-dom": "18.2.0",
    "react-icons": "^4.4.0",
    "react-loading-skeleton": "^3.1.0",
    "react-player": "^2.10.1",
    "react-tooltip": "^4.2.21",
    "tailwind-scrollbar-hide": "^1.1.7"
```

Add these to your package.json file and run the command `npm install`

## Component structure

Now, inside the `<main>` tag of the index.js file, we will have these lines of codes:
```
    <main>
      <div>
        <Header />
        <div className='grid grid-cols-7 mt-20'>
          <Sidebar />
          <Body  /> 
        </div>     
      </div>
    </main>
```

At the root directory, there will be the components folder where we will be creating a new file 'Sidebar.js':

```
// Sidebar.js

import {Items} from './Data/Items';

function Sidebar({) {
  return (
    <div className='flex flex-col justify-between  ml-2 mr-2 col-span-1 z-10 shadow-sm md:ml-7 md:mr-0':'hidden'>
      <ul className="flex flex-col justify-between gap-10 fixed overflow-y-scroll h-[95%]">
        {Items && Items.map((item, index) => {
          return (
            <li className='flex items-center text-center gap-4 transition-none p-3 cursor-pointer hover:text-gray-600 md:p-2'
            key={index}
            >
              {item.icon} {' '}<span className='font-semibold pr-4 hidden lg:block'>{item.name}</span>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Sidebar
```
Inside the components folder, we will create a new folder called 'data' and create the file 'Items.js'

```
import {BsHouse, BsCompass, BsController, BsFilm, BsClockHistory, BsCollectionPlay, BsHandThumbsUp, BsLightbulb, BsTrophy, BsGraphUp, BsMusicPlayer, BsGear} from 'react-icons/bs';
export const Items = [
    {
        name: 'Home',
        icon: <BsHouse size={25} />,
    },
    {
        name: 'Explore',
        icon: <BsCompass size={25} />,
    },
    {
        name: "Trending",
        icon: <BsGraphUp size={25} />
    },
    {
        name: "Subscriptions",
        icon: <BsCollectionPlay size={25} />
    },
    {
        name: "Gaming",
        icon: <BsController size={25} />
    },
    {
        name: "Films",
        icon: <BsFilm size={25} />
    },
    {
        name: "History",
        icon: <BsClockHistory size={25} />
    },
    {
        name:"Likes",
        icon: <BsHandThumbsUp size={25}  />
    },
    {
        name: "Learning",
        icon: <BsLightbulb size={25} />
    },
    {
        name: "Sports",
        icon: <BsTrophy size={25} />
    },
    {
        name:"Music",
        icon: <BsMusicPlayer size={25} />
    },
    {
        name: "Settings",
        icon: <BsGear size={25} />
    }
]
```

That will be it for this part, See you soon with the next part.