Project -UOMO

Lesson - 1 Initial Setup

1. Install Vite

Step 1: Check Node.js

Make sure Node.js is installed:

node -v

If not installed, install Node.js first.

Step 2: Create Vite Project

Run this command:

npm create vite@latest

Step 3: Project Setup

After running, it will ask:

1. Project name

✔ Project name: my-app

2. Framework

✔ Select a framework: React

3. Variant

✔ Select a variant: JavaScript (or TypeScript)

Step 4: Go into Project Folder

cd my-app

Step 5: Install Dependencies

npm install

Step 6: Run Development Server

npm run dev

Step 7: Open in Browser

You will see something like:

Local: http://localhost:5173/

Open that URL in your browser

📁 Project Structure (Important)

Project UOMO/
 ├── public/
 ├── src/
 │    ├── assets/
 │    ├── App.jsx
 │    └── main.jsx
 ├── index.html
 ├── package.json

Step 8: Clean Default Code (Recommended)

`App.jsx`

function App() {
  return <h1>Hello</h1>;
}

export default App;

2. Install Tailwind CSS

Step 1: Install Tailwind

Run:

npm install tailwindcss @tailwindcss/vite

Step 2: Configure Vite Plugin

Open vite.config.js and update:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Step 3: Add Tailwind to CSS

Open your main CSS file:

usually: src/index.css

Replace everything with:

@import "tailwindcss";

Step 4: Run Project

npm run dev

Step 5: Test Tailwind

Go to App.jsx:

function App() {
  return (
    <h1 className="text-4xl text-blue-500 font-bold text-center mt-10">
      Tailwind is working.
    </h1>
  );
}

export default App;

📁 Final Structure

src/
 ├── index.css   ← Tailwind here
 ├── App.jsx
 └── main.jsx
vite.config.js   ← plugin added

3. Tailwind Class Sorting with Prettier

Step 1: Install Required Packages

Run:

npm install -D prettier prettier-plugin-tailwindcss

-D = dev dependency (correct)

Step 2: Create Prettier Config File

Create a file in your root:

.prettierrc

Add this:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Step 3: (Optional but Recommended) Add Settings

Update .prettierrc:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Step 4: Install VS Code Extension

Install:

Prettier – Code formatter

(very important for auto formatting)

Step 5: Enable Auto Format in VS Code

Go to settings → search:

Format On Save → Enable

Or add to settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Step 6: Test It

Write messy Tailwind classes:

<div className="text-center bg-blue-500 p-4 flex items-center justify-between text-white">

Save file → it becomes:

<div className="flex items-center justify-between bg-blue-500 p-4 text-center text-white">

Automatically sorted

4. Install React Router

Step 1: Install React Router

Run:

npm install react-router-dom

5. File Tree

Project UOMO
├── 📁 markdown images
├── 📁 public
│   ├── 🖼️ favicon-16x16.png
│   ├── 🖼️ favicon.svg
│   └── 🖼️ icons.svg
├── 📁 src
│   ├── 📁 assets
│   │   ├── 🖼️ hero.png
│   │   ├── 🖼️ react.svg
│   │   └── 🖼️ vite.svg
│   ├── 📁 components
│   │   ├── 📁 common
│   │   ├── 📁 pages
│   │   │   ├── 📄 About.jsx
│   │   │   └── 📄 Home.jsx
│   │   └── 📁 ui
│   │       ├── 📄 Footer.jsx
│   │       ├── 📄 Header.jsx
│   │       ├── 📄 RootLayout.jsx
│   │       └── 📄 Test.jsx
│   ├── 🎨 App.css
│   ├── 📄 App.jsx
│   ├── 🎨 index.css
│   └── 📄 main.jsx
├── ⚙️ .gitignore
├── ⚙️ .prettierrc
├── 📝 README.md
├── 📄 eslint.config.js
├── 🌐 index.html
├── ⚙️ package-lock.json
├── ⚙️ package.json
└── 📄 vite.config.js

6. Components Config

main.jsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'

const root = createRoot(document.getElementById('root'))

root.render(
  <App/>
)

App.jsx

import { createBrowserRouter } from "react-router-dom";
import { RouterProvider } from "react-router-dom";

import RootLayout from "./components/ui/RootLayout";
import Home from "./components/pages/Home";
import About from "./components/pages/About";

export default function App() {

  const router = createBrowserRouter([
    {
      path: "/",
      Component: RootLayout,
      children: [
        { index: true, Component: Home },
        { path: "about", Component: About },
      ],
    },
  ]);

  return <RouterProvider router={router} />
}

RootLayout.jsx

import { Outlet } from "react-router-dom"

import Header from "./Header"
import Footer from "./Footer"
import { Test } from "../pages/Test"

export default function RootLayout() {
    return (
        <>
            <Header />
            <Outlet />
            <Footer />
            {/* <Test /> */}
        </>
    )
}

About.jsx

export default function About() {
    return (
        <h1>About</h1>
    )
}

Home.jsx

const Home = () => {
    return (
        <div>Home</div>
    )
}

export default Home

Header.jsx

export default function Header() {
    return (
        <h1>
            Header
        </h1>
    )
}

Footer.jsx

export default function Footer() {
    return (
        <h1>Footer</h1>
    )
}

Lesson - 2 Header

Project UOMO Figma Link

1. Create `images` folder with `Image.jsx`

├── 📁 public
│   ├── 📁 images
│   │   └── 🖼️ logo.png
│   ├── 🖼️ favicon-16x16.png
│   ├── 🖼️ favicon.svg
│   └── 🖼️ icons.svg
├── 📁 src
│   ├── 📁 assets
│   │   ├── 🖼️ hero.png
│   │   ├── 🖼️ react.svg
│   │   └── 🖼️ vite.svg
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx

Image.jsx

export default function Image({ src, alt, className }) {
    return (
        <img
            src={src}
            alt={alt}
            loading="lazy"
            className={className}
        />
    )
}

2. Develop `Header.jsx` & `Container.jsx`

Container.jsx

export default function Container({ children }) {
    return (
        <div className="mx-auto max-w-352.5">
            {children}
        </div>
    );
}

Header.jsx

import Image from "../common/Image";
import Container from "./Container";

export default function Header() {
    return (
        <header>
            <nav>
                <Container>
                    <Image
                        src="/images/logo.png"
                        alt="Project UOMO Logo"
                    />
                </Container>
            </nav>
        </header>
    );
}

3. Create `api` folder and `navbarData.js`

1. 📁 Folder Tree

├── 📁 src
│   ├── 📁 api
│   │   └── 📄 navbardata.js
│   ├── 📁 assets
│   │   ├── 🖼️ hero.png
│   │   ├── 🖼️ react.svg
│   │   └── 🖼️ vite.svg
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx

2. Dynamic `menu` with optional chaining and `map()`

Header.jsx

import { navitems } from "../../api/navbardata";

<ul>
    {
        navitems?.map((item) =>(
            <li key={item.id}>{item.name}</li>
        ))
    }
</ul>

navbarData.js

export const navitems = [
    {
        id: 1,
        name: "HOME",
    },
    {
        id: 2,
        name: "SHOP",
    },
    {
        id: 3,
        name: "COLLECTION",
    },
    {
        id: 4,
        name: "JOURNAL",
    },
    {
        id: 5,
        name: "LOOKBOOK",
    },
    {
        id: 6,
        name: "PAGES",
    },
];

Display :

Lesson - 3: (Class - 2)

Project UOMO Figma Link

1. Folder Tree

Project UOMO
├── 📁 markdown images
│   └── 🖼️ uomo-1.png
├── 📁 public
│   ├── 📁 images
│   │   └── 🖼️ logo.png
│   ├── 🖼️ favicon-16x16.png
│   ├── 🖼️ favicon.svg
│   └── 🖼️ icons.svg
├── 📁 src
│   ├── 📁 api
│   │   └── 📄 navbardata.js
│   ├── 📁 assets
│   │   ├── 🖼️ hero.png
│   │   ├── 🖼️ react.svg
│   │   └── 🖼️ vite.svg
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx
│   │   ├── 📁 pages
│   │   │   ├── 📄 About.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   └── 📄 Test.jsx
│   │   └── 📁 ui
│   │       ├── 📄 Container.jsx
│   │       ├── 📄 Footer.jsx
│   │       ├── 📄 Header.jsx
│   │       └── 📄 RootLayout.jsx
│   ├── 🎨 App.css
│   ├── 📄 App.jsx
│   ├── 🎨 index.css
│   └── 📄 main.jsx
├── ⚙️ .gitignore
├── ⚙️ .prettierrc
├── 📝 README.md
├── 📄 eslint.config.js
├── 🌐 index.html
├── ⚙️ package-lock.json
├── ⚙️ package.json
└── 📄 vite.config.js

2. Make `layout` folder and move `RootLayout.jsx`, `Footer.jsx`, `Header.jsx`

│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx
│   │   ├── 📁 layout
│   │   │   ├── 📄 Footer.jsx
│   │   │   ├── 📄 Header.jsx
│   │   │   └── 📄 RootLayout.jsx
│   │   ├── 📁 pages
│   │   │   ├── 📄 About.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   └── 📄 Test.jsx
│   │   └── 📁 ui
│   │       └── 📄 Container.jsx

3. `menu` Design with Font `Jost`

1. Font `Jost`

index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

index.css

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@theme {
    --font-jost: "Jost", sans-serif;
}

2. menu Design

Header.jsx

<header>
    <nav>
        <Container>
            <div className="
                flex
                items-center
            ">
                <Image
                    src="/images/logo.png"
                    alt="Project UOMO Logo"
                />
                <ul className="
                    ml-14
                    flex
                    gap-11
                ">
                    {
                        navitems?.map((item) => (
                            <li 
                                key={item.id}
                                className="
                                    font-jost 
                                    text-primary-black 
                                    text-sm 
                                    leading-6 
                                    font-medium
                                "
                            >{item.name}</li>
                        ))
                    }
                </ul>
            </div>
        </Container>
    </nav>
</header>

Index.css

@theme {
    --font-jost: "Jost", sans-serif;
    --color-primary-black: #222;
}

3. menu Design with TailwindCSS `hover` effect

Header.jsx <li>

<li 
    key={item.id}
    className="
        font-jost 
        text-primary-black 
        after:bg-primary-black 
        relative 
        text-sm 
        leading-6 
        font-medium 
        after:absolute 
        after:bottom-0 
        after:left-0 
        after:h-px 
        after:w-0 
        after:duration-300
        after:content-['']
        hover:after:w-[40%]
    "
>{item.name}</li>

Display :

4. `Navbvar` Icons

1. Navbar `Icon Button`

Loupe

User

Shopping Bag

Heart

Nav Icon

Header.jsx <ui> & <li>

<header>
    <nav>
        <Container>
            <div className="
                flex
                items-center
                justify-between
            ">
                <div className="
                flex
                items-center
            ">
                    
                    <ul className="
                        ml-14
                        flex
                        gap-11
                    ">
                    </ul>
                </div>
                <ul className="
                    flex
                    items-center
                    gap-8
                ">
                    <li>
                        <button>
                            <svg></svg>
                        </button>
                    </li>
                    <li>
                        <button>
                            <svg></svg>
                        </button>
                    </li>
                    <li>
                        <button>
                            <svg></svg>
                        </button>
                    </li>
                    <li>
                        <button>
                            <svg></svg>
                        </button>
                    </li>
                    <li>
                        <button>
                            <svg></svg>
                        </button>
                    </li>
                </ul>
            </div>
        </Container>
    </nav>
</header>

2. Bag Curt Effect

Header.js

const cartItems = 3;

<li className="relative">
    <button>
        <svg width="21" height="20" viewBox="0 0 fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.6869 4.6875H15.3021C14.05164 12.74 0 10.0174 0C7.29479 0 5.005164 4.73264 4.6875H2.3478C1.91556 4.56519 5.03727 1.56519 5.46875V19.2188C119.6502 1.91556 20 2.3478 20H17.6869C18.118.4696 19.6502 18.4696 19.2188V5.46875C15.03727 18.1192 4.6875 17.6869 4.6875ZM11.5625C11.8754 1.5625 13.4225 2.91621 13.6875H6.31332C6.61228 2.91621 8.1593 1.50174 1.5625ZM16.9043 18.4375H3.13041V69563V8.59375C4.69563 9.02523 5.046 947824 9.375C5.91047 9.375 6.26084 9.026084 8.59375V6.25H13.7739V8.59375C13.02523 14.1243 9.375 14.5565 9.375C14.988715.3391 9.02523 15.3391 8.59375V6.25H16.94375Z" fill="#222222" />
        </svg>
    </button>
    <span className="
    font-jost 
    bg-thirdcolor 
    text-primary-white 
    absolute 
    bottom-0 
    left-3 
    rounded-full 
    px-1.25 
    text-[10px] 
    font-medium
    ">
        {cartItems}
    </span>
</li>

index.css

@theme {
    --font-jost: "Jost", sans-serif;
    --color-primary-black: #222;
    --color-primary-white: #fff;
    --color-thirdcolor: #B9A16B;
}

.u-list {
    @apply
        ml-14
        flex
        gap-11
}

.list-item {
    @apply
        font-jost 
        text-primary-black 
        after:bg-primary-black 
        relative 
        text-sm 
        leading-6 
        font-medium 
        after:absolute 
        after:bottom-0 
        after:left-0 
        after:h-0.5 
        after:w-0 
        after:duration-300
        after:content-['']
        hover:after:w-[40%]
}

Display :

5. `Header.jsx` Repositioning

Header.jsx

<header className="
    mt-7.25
    mb-4.75
">
<Container />
</header>

Display

6. Banner Section

Lesson - 1: Make `home` folder inside `components` then create `Banner.jsx`

File Tree

Project UOMO
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx
│   │   ├── 📁 home
│   │   │   └── 📄 Banner.jsx
│   │   ├── 📁 layout
│   │   │   ├── 📄 Footer.jsx
│   │   │   ├── 📄 Header.jsx
│   │   │   └── 📄 RootLayout.jsx
│   │   ├── 📁 pages
│   │   │   ├── 📄 About.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   └── 📄 Test.jsx
│   │   └── 📁 ui
│   │       └── 📄 Container.jsx

Banner.jsx

const Banner = () => {
    return (
        <div>Banner</div>
    )
}

export default Banner

Home.jsx

import Banner from "../home/Banner"

const Home = () => {
    return (
        <Banner />
    )
}

export default Home

Lesson - 2: Banner Image

Make `images` folder and insert banner image

File Tree

├── 📁 src
│   ├── 📁 api
│   │   └── 📄 navbardata.js
│   ├── 📁 assets
│   │   ├── 📁 images
│   │   │   └── 🖼️ banner.png
│   │   ├── 🖼️ hero.png
│   │   ├── 🖼️ react.svg
│   │   └── 🖼️ vite.svg

Banner,jsx

import Image from "../common/Image"
import BannerImage from "../../assets/images/banner.png"

const Banner = () => {
    return (
        <>
            <Image src={BannerImage} />
        </>
    )
}

export default Banner

Make `bannerdata.js` API inside api folder

File Tree

├── 📁 src
│   ├── 📁 api
│   │   ├── 📄 bannerdata.js
│   │   └── 📄 navbardata.js

bannerdata.js

import BannerImage from "../assets/images/banner.png"

export const BannerData = [
    {
        id: 1,
        banner: BannerImage,
    },
    {
        id: 2,
        banner: BannerImage,
    },
    {
        id: 3,
        banner: BannerImage,
    },
    {
        id: 4,
        banner: BannerImage,
    },
]

Use map() to exract banner image from `bannerdata.js`

Banner.jsx

import Image from "../common/Image"
import { BannerData } from "../../api/bannerdata"

const Banner = () => {
    return (
        <div>
            {
                BannerData?.map((item) => (
                    <Image key={item.id} src={item.banner} />
                ))
            }
        </div>
    )
}

export default Banner

Lesson - 3: REACT Slick

1st,

npm install react-slick --save

2nd,

npm install slick-carousel --save

3rd, Banner.jsx

import Image from "../common/Image"
import { BannerData } from "../../api/bannerdata"
import SliderImport from "react-slick";
import "slick-carousel/slick/slick.css";

const Slider = SliderImport.default || SliderImport;

const Banner = () => {

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
    };

    return (
        <div>
            <Slider {...settings}>
                {
                    BannerData?.map((item) => (
                        <Image key={item.id} src={item.banner} />
                    ))
                }
            </Slider>
        </div>
    )
}

export default Banner

7. React Slick Slider Design

Banner.jsx

import Image from "../common/Image"
import { BannerData } from "../../api/bannerdata"
import SliderImport from "react-slick";
import "slick-carousel/slick/slick.css";

const Slider = SliderImport.default || SliderImport;

const Banner = () => {

    const settings = {
        dots: true,
        arrows: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        appendDots: dots => (
            <div>
                <ul
                    className="
                        flex 
                        gap-5 
                        absolute
                        bottom-14.5
                        left-48.75
                    "
                    style={{ margin: "0px" }}
                >
                    {" "}{dots}{" "}
                </ul>
            </div>
        ),
        customPaging: () => (
            <div
                className="
                    bg-[#ddc2b9]
                    h-1.5
                    w-1.5
                    rounded-full
                "
            >
            </div>
        )
    };

    return (
        <div className="
            mx-15
        ">
            <Slider {...settings}>
                {
                    BannerData?.map((item) => (
                        <Image
                            className="
                                w-full
                                text-center
                            "
                            key={item.id}
                            src={item.banner}
                        />
                    ))
                }
            </Slider>
        </div>
    )
}

export default Banner

index.css

.slick-dots .slick-active {
    @apply
        border-primary-black
        flex
        h-7.5
        w-7.5
        items-center
        justify-center
        rounded-full
        border
}

.slick-dots ul {
    @apply
        flex
        items-center
        justify-center
}

.slick-active div {
    @apply
        bg-primary-black;
}

Display

8. Social Icon

Banner,jsx

<div className="
                w-6
                fixed 
                top-91.75 
                left-5
                flex 
                flex-col
                items-center
                gap-[24.74px] 
            ">
                <Link to="/facebook" className="transition-transform duration-300 hover:scale-110">
                    <svg width="8" height="15.57" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.10547 14V7.73828H0V5.25H2.10547V3.28125C2.10547 2.24219 2.39714 1.4401 2.98047 0.875C3.5638 0.291667 4.33854 0 5.30469 0C6.08854 0 6.72656 0.0364583 7.21875 0.109375V2.32422H5.90625C5.41406 2.32422 5.07682 2.43359 4.89453 2.65234C4.7487 2.83464 4.67578 3.1263 4.67578 3.52734V5.25H7L6.67188 7.73828H4.67578V14H2.10547Z" fill="#767676" />
                    </svg>
                </Link>

                <Link to="/twitter" className="transition-transform duration-300 hover:scale-110">
                    <svg width="14" height="15.57" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.5508 2.81641C12.5508 2.95312 12.5508 3.0625 12.5508 3.19922C12.5508 7 9.67969 11.3477 4.40234 11.3477C2.76172 11.3477 1.25781 10.8828 0 10.0625C0.21875 10.0898 0.4375 10.1172 0.683594 10.1172C2.02344 10.1172 3.25391 9.65234 4.23828 8.88672C2.98047 8.85938 1.91406 8.03906 1.55859 6.89062C1.75 6.91797 1.91406 6.94531 2.10547 6.94531C2.35156 6.94531 2.625 6.89062 2.84375 6.83594C1.53125 6.5625 0.546875 5.41406 0.546875 4.01953V3.99219C0.929688 4.21094 1.39453 4.32031 1.85938 4.34766C1.06641 3.82812 0.574219 2.95312 0.574219 1.96875C0.574219 1.42188 0.710938 0.929688 0.957031 0.519531C2.37891 2.24219 4.51172 3.39062 6.89062 3.52734C6.83594 3.30859 6.80859 3.08984 6.80859 2.87109C6.80859 1.28516 8.09375 0 9.67969 0C10.5 0 11.2383 0.328125 11.7852 0.902344C12.4141 0.765625 13.043 0.519531 13.5898 0.191406C13.3711 0.875 12.9336 1.42188 12.332 1.77734C12.9062 1.72266 13.4805 1.55859 13.9727 1.33984C13.5898 1.91406 13.0977 2.40625 12.5508 2.81641Z" fill="#767676" />
                    </svg>
                </Link>

                <Link to="/instagram" className="transition-transform duration-300 hover:scale-110">
                    <svg width="13" height="15.57" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.15234 2.98047C7.875 2.98047 9.29688 4.40234 9.29688 6.125C9.29688 7.875 7.875 9.26953 6.15234 9.26953C4.40234 9.26953 3.00781 7.875 3.00781 6.125C3.00781 4.40234 4.40234 2.98047 6.15234 2.98047ZM6.15234 8.17578C7.27344 8.17578 8.17578 7.27344 8.17578 6.125C8.17578 5.00391 7.27344 4.10156 6.15234 4.10156C5.00391 4.10156 4.10156 5.00391 4.10156 6.125C4.10156 7.27344 5.03125 8.17578 6.15234 8.17578ZM10.1445 2.87109C10.1445 3.28125 9.81641 3.60938 9.40625 3.60938C8.99609 3.60938 8.66797 3.28125 8.66797 2.87109C8.66797 2.46094 8.99609 2.13281 9.40625 2.13281C9.81641 2.13281 10.1445 2.46094 10.1445 2.87109ZM12.2227 3.60938C12.2773 4.62109 12.2773 7.65625 12.2227 8.66797C12.168 9.65234 11.9492 10.5 11.2383 11.2383C10.5273 11.9492 9.65234 12.168 8.66797 12.2227C7.65625 12.2773 4.62109 12.2773 3.60938 12.2227C2.625 12.168 1.77734 11.9492 1.03906 11.2383C0.328125 10.5 0.109375 9.65234 0.0546875 8.66797C0 7.65625 0 4.62109 0.0546875 3.60938C0.109375 2.625 0.328125 1.75 1.03906 1.03906C1.77734 0.328125 2.625 0.109375 3.60938 0.0546875C4.62109 0 7.65625 0 8.66797 0.0546875C9.65234 0.109375 10.5273 0.328125 11.2383 1.03906C11.9492 1.75 12.168 2.625 12.2227 3.60938ZM10.9102 9.73438C11.2383 8.94141 11.1562 7.02734 11.1562 6.125C11.1562 5.25 11.2383 3.33594 10.9102 2.51562C10.6914 1.99609 10.2812 1.55859 9.76172 1.36719C8.94141 1.03906 7.02734 1.12109 6.15234 1.12109C5.25 1.12109 3.33594 1.03906 2.54297 1.36719C1.99609 1.58594 1.58594 1.99609 1.36719 2.51562C1.03906 3.33594 1.12109 5.25 1.12109 6.125C1.12109 7.02734 1.03906 8.94141 1.36719 9.73438C1.58594 10.2812 1.99609 10.6914 2.54297 10.9102C3.33594 11.2383 5.25 11.1562 6.15234 11.1562C7.02734 11.1562 8.94141 11.2383 9.76172 10.9102C10.2812 10.6914 10.7188 10.2812 10.9102 9.73438Z" fill="#767676" />
                    </svg>
                </Link>

                <Link to="/pinterest" className="transition-transform duration-300 hover:scale-110">
                    <svg className="transition-transform duration-300 hover:scale-110" width="13" height="15.57" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.5625 6.78125C13.5625 10.5273 10.5273 13.5625 6.78125 13.5625C6.07031 13.5625 5.38672 13.4805 4.75781 13.2617C5.03125 12.8242 5.44141 12.0859 5.60547 11.4844C5.6875 11.1836 6.01562 9.87109 6.01562 9.87109C6.23438 10.3086 6.89062 10.6641 7.57422 10.6641C9.625 10.6641 11.1016 8.77734 11.1016 6.45312C11.1016 4.21094 9.26953 2.51562 6.91797 2.51562C3.99219 2.51562 2.43359 4.48438 2.43359 6.61719C2.43359 7.62891 2.95312 8.85938 3.80078 9.26953C3.9375 9.32422 4.01953 9.29688 4.04688 9.16016C4.04688 9.07812 4.18359 8.61328 4.23828 8.39453C4.23828 8.33984 4.23828 8.25781 4.18359 8.20312C3.91016 7.875 3.69141 7.24609 3.69141 6.64453C3.69141 5.16797 4.8125 3.71875 6.75391 3.71875C8.39453 3.71875 9.57031 4.83984 9.57031 6.48047C9.57031 8.3125 8.64062 9.57031 7.4375 9.57031C6.78125 9.57031 6.28906 9.02344 6.42578 8.36719C6.61719 7.54688 7 6.67188 7 6.09766C7 5.57812 6.72656 5.14062 6.15234 5.14062C5.46875 5.14062 4.92188 5.85156 4.92188 6.78125C4.92188 7.38281 5.11328 7.79297 5.11328 7.79297C5.11328 7.79297 4.45703 10.6367 4.32031 11.1562C4.18359 11.7578 4.23828 12.5781 4.29297 13.0977C1.77734 12.1133 0 9.67969 0 6.78125C0 3.03516 3.03516 0 6.78125 0C10.5273 0 13.5625 3.03516 13.5625 6.78125Z" fill="#767676" />
                    </svg>
                </Link>
                <div>
                    <h3 className="
                        mt-[18.62px]
                        whitespace-nowrap
                        -rotate-90
                        font-jost
                        text-[14px]
                        font-medium 
                        leading-6 
                        text-[#767676]
                ">FOLLOW US</h3>
                </div>

            </div>

Display

Lesson - 4: (Class - 3)

Project UOMO Figma Link

Lesson - 4.1: Make a `Category.jsx` component inside `home` folder

File Tree

Project UOMO
│  
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx
│   │   ├── 📁 home
│   │   │   ├── 📄 Banner.jsx
│   │   │   └── 📄 Category.jsx

Category.jsx

export default function Category() {
    return (
    <>
        <h1>Category</h1>
    </>
)
}

Home.jsx

import Banner from "../home/Banner"
import Category from "../home/Category"

const Home = () => {
    return (
        <>
            <Banner />
            <Category />
        </>
    )
}

export default Home

Lesson - 4.2: Make `categorydata.js` API and link it with `Category.jsx`

File Tree

Project UOMO
├── 📁 src
│   ├── 📁 api
│   │   ├── 📄 bannerdata.js
│   │   ├── 📄 categorydata.js
│   │   └── 📄 navbardata.js

categorydata.js

import MenImage from "../assets/images/men.png"
import WomenImage from "../assets/images/woman.png"
import KidsImage from "../assets/images/kids.png"
import E_Gift from "../assets/images/e-gift.png"

export const CategoryData = [
    {
        id: 1,
        name: "WOMEN",
        link: "/women",
        image: MenImage,
    },
    {
        id: 2,
        name: "MEN",
        link: "/men",
        image: WomenImage,
    },
    {
        id: 3,
        name: "KIDS",
        link: "/kids",
        image: KidsImage,
    },
    {
        id: 4,
        name: "E-GIFT CARDS",
        link: "/e-gift",
        image: E_Gift,
    },
    
]

Category.jsx

import { CategoryData } from "../../api/categorydata"

export default function Category() {
    return (
    <>
        <h1>Category</h1>
    </>
)
}

Lesson - 4.3: Call API from `Category.jsx` using `map()` and `?.`

Optional chaining (?.) is a JavaScript operator (introduced in ES2020) that allows you to safely access deeply nested object properties, call functions, or access array elements without manually checking if each level exists.

Home.jsx

import Banner from "../home/Banner"
import Category from "../home/category/Category"

const Home = () => {
    return (
        <>
            <Banner />
            <Category />
        </>
    )
}

export default Home

Card.jsx

import { Link } from "react-router-dom";
import Image from "../../common/Image";

const Card = ({ item }) => {
    return (
        <div
            key={item.id}
            className={`h-full w-full ${item.id == 1 && "col-span-2 row-span-2"} ${item.id == 2 && "col-span-2 row-span-1"} relative`}
        >
            <Image className="h-full w-full" src={item.image} alt={item.name} />
            <div className="absolute bottom-10 left-10">
                <h4 className="font-jost text-primary-black text-sm leading-6 font-normal">
                    HOT LIST
                </h4>
                <h2 className="font-jost text-[24px] font-medium">
                    <span className="font-bold">{item.name}</span> COLLECTION
                </h2>
                <Link
                    className="font-jost text-primary-black after:bg-primary-black relative text-sm leading-6 font-medium after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:duration-300 after:content-[''] hover:after:w-[40%]"
                    to={item.link}
                >
                    SHOP NOW
                </Link>
            </div>
        </div>
    );
};

export default Card;

Category.jsx

import { CategoryData } from "../../../api/categorydata";
import Container from "../../ui/Container";
import Card from "./Card";

export default function Category() {
    return (
        <section className="mt-25.25">
            <Container>
                <div className="grid h-150 grid-cols-4 grid-rows-2 gap-7.5">
                    {CategoryData?.map((item) => (
                        <Card key={item.id} item={item} />
                    ))}
                </div>
            </Container>
        </section>
    );
}

File Tree

Project UOMO
├── 📁 markdown images
│   ├── 🖼️ uomo-1.png
│   ├── 🖼️ uomo-2.png
│   ├── 🖼️ uomo-3.png
│   ├── 🖼️ uomo-4.png
│   ├── 🖼️ uomo-5.png
│   └── 🖼️ uomo-6.png
├── 📁 public
│   ├── 📁 images
│   │   ├── 🖼️ 001-loupe.svg
│   │   ├── 🖼️ 002-user.svg
│   │   ├── 🖼️ 003-shopping-bag.svg
│   │   ├── 🖼️ 004-heart.svg
│   │   ├── 🖼️ facebook_ icon.svg
│   │   ├── 🖼️ instagram_icon.svg
│   │   ├── 🖼️ logo.png
│   │   ├── 🖼️ nav_icon.svg
│   │   ├── 🖼️ printerest_icon.svg
│   │   └── 🖼️ twitter_ icon.svg
│   └── 🖼️ favicon-16x16.png
├── 📁 src
│   ├── 📁 api
│   │   ├── 📄 bannerdata.js
│   │   ├── 📄 categorydata.js
│   │   └── 📄 navbardata.js
│   ├── 📁 assets
│   │   └── 📁 images
│   │       ├── 🖼️ banner.png
│   │       ├── 🖼️ e-gift.png
│   │       ├── 🖼️ kids.png
│   │       ├── 🖼️ men.png
│   │       └── 🖼️ woman.png
│   ├── 📁 components
│   │   ├── 📁 common
│   │   │   └── 📄 Image.jsx
│   │   ├── 📁 home
│   │   │   ├── 📁 category
│   │   │   │   ├── 📄 Card.jsx
│   │   │   │   └── 📄 Category.jsx
│   │   │   └── 📄 Banner.jsx
│   │   ├── 📁 layout
│   │   │   ├── 📄 Footer.jsx
│   │   │   ├── 📄 Header.jsx
│   │   │   └── 📄 RootLayout.jsx
│   │   ├── 📁 pages
│   │   │   ├── 📄 About.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   └── 📄 Test.jsx
│   │   └── 📁 ui
│   │       └── 📄 Container.jsx
│   ├── 🎨 App.css
│   ├── 📄 App.jsx
│   ├── 🎨 index.css
│   └── 📄 main.jsx
├── ⚙️ .gitignore
├── ⚙️ .prettierrc
├── 📝 README.md
├── 📄 eslint.config.js
├── 🌐 index.html
├── ⚙️ package-lock.json
├── ⚙️ package.json
└── 📄 vite.config.js

Display

Name		Name	Last commit message	Last commit date
markdown images		markdown images
public		public
src		src
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

Project -UOMO

Lesson - 1 Initial Setup

1. Install Vite

Step 1: Check Node.js

Step 2: Create Vite Project

Step 3: Project Setup

1. Project name

2. Framework

3. Variant

Step 4: Go into Project Folder

Step 5: Install Dependencies

Step 6: Run Development Server

Step 7: Open in Browser

📁 Project Structure (Important)

Step 8: Clean Default Code (Recommended)

App.jsx

2. Install Tailwind CSS

Step 1: Install Tailwind

Step 2: Configure Vite Plugin

Step 3: Add Tailwind to CSS

Step 4: Run Project

Step 5: Test Tailwind

📁 Final Structure

3. Tailwind Class Sorting with Prettier

Step 1: Install Required Packages

Step 2: Create Prettier Config File

Step 3: (Optional but Recommended) Add Settings

Step 4: Install VS Code Extension

Step 5: Enable Auto Format in VS Code

Step 6: Test It

4. Install React Router

Step 1: Install React Router

5. File Tree

6. Components Config

Lesson - 2 Header

1. Create images folder with Image.jsx

2. Develop Header.jsx & Container.jsx

3. Create api folder and navbarData.js

1. 📁 Folder Tree

2. Dynamic menu with optional chaining and map()

Lesson - 3: (Class - 2)

1. Folder Tree

2. Make layout folder and move RootLayout.jsx, Footer.jsx, Header.jsx

3. menu Design with Font Jost

1. Font Jost

2. menu Design

3. menu Design with TailwindCSS hover effect

4. Navbvar Icons

1. Navbar Icon Button

2. Bag Curt Effect

5. Header.jsx Repositioning

6. Banner Section

Lesson - 1: Make home folder inside components then create Banner.jsx

Lesson - 2: Banner Image

Make images folder and insert banner image

Make bannerdata.js API inside api folder

Use map() to exract banner image from bannerdata.js

Lesson - 3: REACT Slick

7. React Slick Slider Design

8. Social Icon

Lesson - 4: (Class - 3)

Lesson - 4.1: Make a Category.jsx component inside home folder

Lesson - 4.2: Make categorydata.js API and link it with Category.jsx

Lesson - 4.3: Call API from Category.jsx using map() and ?.

Lesson - 4.4: (00:52:03)

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

`App.jsx`

1. Create `images` folder with `Image.jsx`

2. Develop `Header.jsx` & `Container.jsx`

3. Create `api` folder and `navbarData.js`

2. Dynamic `menu` with optional chaining and `map()`

2. Make `layout` folder and move `RootLayout.jsx`, `Footer.jsx`, `Header.jsx`

3. `menu` Design with Font `Jost`

1. Font `Jost`

3. menu Design with TailwindCSS `hover` effect

4. `Navbvar` Icons

1. Navbar `Icon Button`

5. `Header.jsx` Repositioning

Lesson - 1: Make `home` folder inside `components` then create `Banner.jsx`

Make `images` folder and insert banner image

Make `bannerdata.js` API inside api folder

Use map() to exract banner image from `bannerdata.js`

Lesson - 4.1: Make a `Category.jsx` component inside `home` folder

Lesson - 4.2: Make `categorydata.js` API and link it with `Category.jsx`

Lesson - 4.3: Call API from `Category.jsx` using `map()` and `?.`