How to Build a Dynamic Wardrobe App with React Drag and Drop

I’m excited to write you through the process of building a dynamic wardrobe app using React. As someone who loves building interactive applications, this project is super fun and educational. By the end of this guide, you’ll be able to create a wardrobe app that lets users drag and drop their clothing items into different categories, making it an intuitive and engaging experience.

Build a Wardrobe App?

Before diving into the code, let me explain why a wardrobe app is such a cool project. It’s a great way to work with interactive components, state management, and of course, drag-and-drop functionality all while building something practical. Think about it: in real life, we organize our clothes, and in this app, we can create a similar experience. It’s like building your own digital closet where everything is organized the way you want it.

Tools & Technologies We’ll Use

To create this wardrobe app, we will rely on a few key tools and technologies:

• React for the user interface (UI).
• React DnD (Drag and Drop) library to implement the drag-and-drop functionality.
• CSS for styling and layout.

If you’re already familiar with React, this will be pretty straightforward. If not, no worries—I’ll break everything down for you.

Setting Up the Project

First things first, let’s create a new React project. Open up your terminal and run:

create-react-app wardrobe-app
cd wardrobe-app
npm install react-dnd react-dnd-html5-backend

Here’s a breakdown:

• create-react-app sets up a boilerplate React app for us.
• react-dnd and react-dnd-html5-backend are the libraries we’ll use for implementing drag-and-drop functionality.

Once that’s all set up, we can start working on our app.

Structure Your App

Now, let’s think about the structure. A basic wardrobe app might need:

• A Clothing Item component that represents each piece of clothing.
• A Wardrobe component that will hold different categories (like Shirts, Pants, Shoes).
• A Drag and Drop area where users can drag clothes to sort them into their wardrobe.

Here’s how we’ll structure our components:

• App.js: The main container that holds everything.
• Wardrobe.js: Where the clothing items will be dropped.
• ClothingItem.js: Represents individual clothing items.

Create the Clothing Item Component

Let’s start by creating the ClothingItem.js component, which will represent each piece of clothing. This component will display the name of the item and its image.

// ClothingItem.js
import React from 'react';
import { useDrag } from 'react-dnd';

const ClothingItem = ({ id, name, image }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'CLOTHING_ITEM',
    item: { id, name },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      className="clothing-item"
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      <img src={image} alt={name} />
      <p>{name}</p>
    </div>
  );
};

export default ClothingItem;

Create the Wardrobe Component

Next, let’s build the Wardrobe.js component. This is where users will drop their clothing items. We’ll also categorize the items into sections like “Shirts,” “Pants,” and “Shoes.”

// Wardrobe.js
import React from 'react';
import { useDrop } from 'react-dnd';
import ClothingItem from './ClothingItem';

const Wardrobe = ({ category, clothes }) => {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'CLOTHING_ITEM',
    drop: (item) => console.log(`Dropped: ${item.name}`),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));

  return (
    <div
      ref={drop}
      className={`wardrobe-category ${isOver ? 'over' : ''}`}
      style={{ backgroundColor: isOver ? 'lightgray' : 'white' }}
    >
      <h2>{category}</h2>
      <div className="clothing-list">
        {clothes.map((clothing) => (
          <ClothingItem
            key={clothing.id}
            id={clothing.id}
            name={clothing.name}
            image={clothing.image}
          />
        ))}
      </div>
    </div>
  );
};

export default Wardrobe;

Bringing Everything Together in App.js

Now, we can bring everything together in App.js:

// App.js
import React, { useState } from 'react';
import Wardrobe from './Wardrobe';

const App = () => {
  const [clothes] = useState([
    { id: 1, name: 'T-Shirt', category: 'Shirts', image: 'shirt.png' },
    { id: 2, name: 'Jeans', category: 'Pants', image: 'jeans.png' },
    { id: 3, name: 'Sneakers', category: 'Shoes', image: 'sneakers.png' },
  ]);

  const categories = ['Shirts', 'Pants', 'Shoes'];

  return (
    <div className="wardrobe-app">
      <h1>Dynamic Wardrobe</h1>
      <div className="wardrobe-container">
        {categories.map((category) => (
          <Wardrobe
            key={category}
            category={category}
            clothes={clothes.filter((item) => item.category === category)}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

In this App.js, we’re using the state to keep track of the clothing items and their categories. The Wardrobe component will receive these items based on the category (Shirts, Pants, Shoes).

Styling the App

Here’s a bit of styling to make the app look nice:

/* App.css */
.wardrobe-app {
  text-align: center;
  padding: 20px;
}

.wardrobe-container {
  display: flex;
  justify-content: space-around;
}

.wardrobe-category {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  width: 200px;
}

.clothing-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px 0;
  cursor: pointer;
}

.clothing-item img {
  width: 100%;
  height: auto;
}

.clothing-list {
  display: flex;
  flex-direction: column;
}

Final Thought

Building a dynamic wardrobe app with React and drag-and-drop functionality is not only a great way to learn React, but it also adds a ton of interactivity to your projects. By combining React’s powerful component model with the react-dnd library, you can create complex and engaging interfaces.

This app, once completed, can be extended with even more features like saving the wardrobe state to local storage, allowing users to filter clothes by color, or even adding a search bar to find specific items. The sky’s the limit with what you can do with this app!