Create Order Summaries using React and Tailwind CSS
Last Updated :
30 Sep, 2024
In real-time eCommerce applications, it's essential to provide users with clear and engaging feedback when they perform key actions like confirming or canceling an order. This project demonstrates creating a dynamic Order Summary component using React Tailwind CSS and React Icons.
The order summary will list items and totals and allow users to confirm or cancel their order with visually distinct feedback, including background color changes and animated ribbons for confirmations or cancellations. The project leverages React's state management to track the user's action enabling dynamic UI updates. When an order is confirmed the screen background turns green and a congratulatory ribbon with the message Confirmed appears.
Prerequisites
Approach
This app provides a simple order summary interface using React and Tailwind CSS. It displays a list of ordered items, calculates the total price, and allows users to either confirm or cancel the order. When an order is confirmed or canceled, the background changes color (green for confirmed, red for canceled), and a congratulatory or cancellation message appears with a ribbon at the top-right corner for visual emphasis. The app uses the useState hook to manage order status and smoothly transition between different states.
Steps to Create & Configure the Project
Here we will create a sample React JS project and install Tailwind CSS once it is completed we will start development for Order Summaries using React and Tailwind CSS. Below are the Steps to create and configure the project:
Step 1: Set up a React Application
First, create a sample React JS application using the mentioned command then navigate to the project folder.
npx create-react-app react-app
cd react-app
Project Structure:
Project StructureUpdated dependencies:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Step 2: Install and Configure Tailwind CSS
Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3: Develop Business logic
Once Tailwind css installation and configuration is completed. Now we need to develop user interface for Order Summaries using tailwind CSS and for making it responsive we will use App.js and App.css files.
- App.js ( src\App.js )
- index.css ( src\index.js )
- tailwind.config.js ( tailwind.config.js )
Example: This demonstrates the creation of Order Summaries using React and Tailwind CSS:
CSS
/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: 'Times New Roman', Times, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.ribbon {
position: absolute;
top: -10px;
right: -10px;
z-index: 1;
overflow: hidden;
width: 150px;
height: 150px;
text-align: right;
}
.ribbon span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 200px;
display: block;
background: #FF5733;
/* Customize color for the ribbon */
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 30px;
right: -40px;
}
//App.js
import React, { useState } from "react";
import { FaShoppingCart, FaTrash, FaArrowLeft, FaCheck } from "react-icons/fa";
import './index.css'; // Assuming Tailwind is set up in index.css
const OrderSummary = () => {
const [orderStatus, setOrderStatus] = useState(""); // '' | 'confirmed' | 'canceled'
const items = [
{ id: 1, name: "Product 1", quantity: 2, price: 50 },
{ id: 2, name: "Product 2", quantity: 1, price: 30 },
{ id: 3, name: "Product 3", quantity: 3, price: 20 },
];
const getTotal = () => {
return items.reduce((total, item) => total + item.quantity * item.price, 0);
};
const handleConfirmOrder = () => {
setOrderStatus("confirmed");
};
const handleCancelOrder = () => {
setOrderStatus("canceled");
};
return (
<div className={`min-h-screen flex flex-col
justify-center items-center
relative ${orderStatus ===
"confirmed" ? "bg-green-500" : orderStatus === "canceled" ?
"bg-red-500" : "bg-gray-100"}`}>
{orderStatus === "confirmed" && (
<div className="absolute top-0 left-0
w-full h-full bg-green-500
bg-opacity-90 flex flex-col
justify-center items-center">
<h2 className="text-4xl font-bold
text-white mb-4">Congratulations!</h2>
<p className="text-2xl text-white">Your order has
been confirmed!</p>
<div className="ribbon ribbon-top-right"><span>🎉
Confirmed 🎉
</span></div>
</div>
)}
{orderStatus === "canceled" && (
<div className="absolute top-0 left-0 w-full
h-full bg-red-500 bg-opacity-90
flex flex-col justify-center items-center">
<h2 className="text-4xl font-bold
text-white mb-4">
Order Canceled!
</h2>
<p className="text-2xl text-white">Your order
has been canceled.
</p>
<div className="ribbon ribbon-top-right"><span>❌ Canceled ❌</span></div>
</div>
)}
<div className={`bg-white p-8 rounded-lg
shadow-md max-w-md w-full
${orderStatus ? "hidden" : ""}`}>
<h2 className="text-2xl font-bold mb-4">Order Summary</h2>
<ul className="mb-6">
{items.map((item) => (
<li key={item.id} className="flex justify-between
py-2 border-b border-gray-300">
<span>{item.name} x{item.quantity}</span>
<span>${item.price * item.quantity}</span>
</li>
))}
</ul>
<div className="flex justify-between
items-center mb-6">
<span className="font-semibold">Total:</span>
<span className="font-semibold">${getTotal()}</span>
</div>
<div className="flex flex-col space-y-4">
<button
onClick={handleConfirmOrder}
className="bg-green-500 text-white
py-2 rounded-lg shadow-md
hover:bg-green-600 transition
duration-300 ease-in-out flex
items-center justify-center"
>
<FaCheck className="mr-2" /> Confirm Order
</button>
<button
onClick={handleCancelOrder}
className="bg-red-500 text-white py-2
rounded-lg shadow-md hover:bg-red-600
transition duration-300 ease-in-out
flex items-center justify-center"
>
<FaTrash className="mr-2" /> Cancel Order
</button>
</div>
</div>
</div>
);
};
export default function App() {
return (
<div className="App">
<OrderSummary />
</div>
);
}
/*tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primaryGreen: "#4CAF50", // Green
primaryBlack: "#000000", // Black
primaryWhite: "#FFFFFF", // White
}
},
},
plugins: [],
}
Step 4: Run the Application
Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.
npm start
Output: Once Project is successfully running then open the below URL to test the output.
http://localhost:3000/
Conclusion
This project demonstrates how you can build a highly interactive Order Summary page with feedback mechanisms in place for both order confirmation and cancellation. By using React and Tailwind CSS and React Icons we have made it simple to enhance user engagement and deliver clear visual feedback making the interaction more user friendly and appealing. This approach can be adapted in any eCommerce or similar web application to improve user experience and responsiveness and design quality.