React30-Project27: Building a Home Decor Website with Material-UI in React
Introduction
In the dynamic world of web development, creating visually appealing and responsive user interfaces is crucial. One way to achieve this is by using robust and customizable UI libraries. Material-UI is a popular React component library that implements Google’s Material Design principles. In this article, we’ll explore how to build a home decor website using Material-UI in React.
Goals
Build a home decor website using Material UI library as shown below:
Prerequisites
Before diving into the implementation, ensure you have the following prerequisites:
- Node.js and npm: Make sure you have Node.js installed on your machine. You can download it from nodejs.org.
- Create React App: Use the Create React App (CRA) tool to set up a new React project. If you haven’t installed it, run the following command:
npx create-react-app home-decor-website3. Material-UI: Install Material-UI in your project by running:
npm install @mui/material @emotion/react @emotion/styledImplementation
Project Structure
Before implementing the components, organize your project structure. Create a components folder to store your React components. Inside the src folder, you might have the following structure:
src
|-- components
| |-- Header.js
| |-- ProductCard.js
| |-- ProductList.js
|-- App.js
|-- index.js
Building Components
- Header Component(Header.js)
import React from "react";
import { AppBar, Toolbar, Typography } from "@mui/material";
const Header = () => {
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Home Decor Store</Typography>
</Toolbar>
</AppBar>
);
};
export default Header;
2. ProductCard Component (ProductCard.js):
import React from "react";
import {
Card,
CardContent,
CardMedia,
Typography,
Button,
Link
} from "@mui/material";
const ProductCard = ({ product }) => {
const splitURLText = product.alt?.split(":");
const { name, description, image, price, rating, alt } = product;
return (
<Card>
<CardMedia
component="img"
height="280"
image={image}
title={alt}
alt={name}
/>
<CardContent>
<Typography variant="h6">{name}</Typography>
<Typography variant="body2">{description}</Typography>
<Typography variant="h6" color="primary">
${price}
</Typography>
<Typography variant="body2">Rating: {rating}/5</Typography>
<Typography variant="body2" sx={{ mt: 1 }}>
{splitURLText && (
<Link
href={`${splitURLText[1]}:${splitURLText[2]}`}
color="primary"
>
{splitURLText[0]}
</Link>
)}
</Typography>
<Button
variant="contained"
color="primary"
style={{ marginTop: "10px" }}
>
Buy Now
</Button>
</CardContent>
</Card>
);
};
export default ProductCard;
3. ProductList Component (ProductList.js):
import React from "react";
import { Grid } from "@mui/material";
import ProductCard from "./ProductCard";
const ProductList = ({ products }) => {
return (
<Grid container spacing={3} sx={{ mt: 0.1 }}>
{products.map((product) => (
<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
<ProductCard product={product} />
</Grid>
))}
</Grid>
);
};
export default ProductList;
Integrating Components in App
Now, integrate these components into your App.js file:
import React from "react";
import Header from "./components/Header";
import ProductList from "./components/ProductList";
const products = [
{
id: 1,
name: "Elegant Sofa",
description: "Luxurious sofa for your living room.",
image: "/images/Sofa.jpg",
alt:
"Photo by Martin Péchy: https://www.pexels.com/photo/2-seat-orange-leather-sofa-beside-wall-1866149/",
price: 799.99,
rating: 4.5
},
{
id: 2,
name: "Modern Coffee Table",
description: "Sleek and contemporary coffee table for your lounge area.",
image: "/images/coffeetable.jpg",
price: 149.99,
rating: 4.2,
alt:
"Photo by Vicky Tran: https://www.pexels.com/photo/round-brown-dining-table-near-brown-couch-3104527/"
},
{
id: 3,
name: "Chic Wall Clock",
description:
"A decorative wall clock to add a touch of elegance to any room.",
image: "/images/wall-clock.jpg",
price: 39.99,
rating: 4.0,
alt:
"Photo by Anthony DeRosa: https://www.pexels.com/photo/brown-wooden-framed-clock-showing-2-19-191703/"
},
{
id: 4,
name: "Cozy Throw Blanket",
description: "Soft and cozy throw blanket, perfect for chilly evenings.",
image: "/images/throw-blanket.jpg",
price: 29.99,
rating: 4.7,
alt:
"Photo by Isabelle Taylor: https://www.pexels.com/photo/couture-book-on-sofa-1421176/"
}
];
const App = () => {
return (
<div>
<Header />
<ProductList products={products} />
</div>
);
};
export default App;
Add relevant images in `public/images` folder as per product details and update `alt` text accordingly.
I have used images from Pexels website.
Explanation of Material-UI Usage
1. AppBar, Toolbar, Typography:
AppBar: Represents the top app bar.
Toolbar: Contains app bar content.
Typography: Displays text with specified variants.
2. Card, CardContent, CardMedia:
Card: Basic building block for displaying information.
CardMedia: Displays images inside a card.
CardContent: Holds the main content of the card.
Grid:
3. Grid:
Provides a flexible and responsive layout system.
Material-UI components come with default styles and themes following the Material Design guidelines, providing a consistent and visually appealing UI.
Live demo:
Conclusion
In this tutorial, we explored how to build a home decor website using Material-UI in React. Leveraging the power of Material-UI components allows you to create a professional-looking and responsive user interface with ease. The modular structure of React components and the customizable nature of Material-UI make it a great choice for building engaging web applications. Feel free to extend this project by adding more features, enhancing styling, and incorporating additional Material-UI components to suit your needs. Happy coding!
Check out my YouTube channel for more content:
