Let's build a Youtube clone with Nextjs and Tailwind-css🎉

This is the preview of what we are going to build

Here is the live preview of the site and the link 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


 run dev

If you get stuck at the above steps at any point, refer to this doc

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.