Gadget Heaven Website Design Using Core React and Tailwind CSS

Overview 🌟

This project is a gadget store built with React that includes a homepage with a banner, a categories sidebar, gadget cards, and a detailed view for each gadget. Users can add items to their cart or wishlist, view items by category, and sort their cart by price. This project implements multiple pages, a 404 error page, a persistent navigation bar, and a footer.

🛠️ Technologies Used

• React.js – Dynamic and efficient component-based UI framework for front-end building.
• Tailwind CSS – Utility-first CSS framework for a beautifully responsive and customizable interface.
• JavaScript – Provides interactive functionality and core logic for the app.
• React Toastify – Delightful notifications and alerts for seamless user feedback.
• React Router - For handling navigation and routing across pages.
• Context API - For state management.

📱 Key Features

🚀 Responsive Navbar

• Description: The Navbar includes active route indication and is consistently accessible across all pages, except the 404 page.
• Pages: Includes links to the Home, Dashboard, and Stats pages.

🧩 Dynamic Categories Sidebar

• Description: Displays gadget categories to filter items on the right when clicked.
• Default: Shows all products by default.

🔍 Gadget Details Page

• Description: Each gadget card provides a detailed view showing all product details.
• Functionality: Allows users to add items to a Cart or Wishlist.

🛒 Persistent Cart and Wishlist with Badge Count

• Description: Items in the cart and wishlist are persistent on the Dashboard page, sorted by category.
• Badge Count: Badge indicators on the Navbar for easy access.

🔔 Toast Notifications and 🎉 Modals

• Notifications: Toast messages show when items are added to the Cart or Wishlist.
• Purchase Modal: Congratulates users with a modal upon completing a purchase.

⚛️ React Fundamentals Used

• Functional Components: Applied across the project for building UI sections and components.
• Hooks: Leveraged useState, useEffect, useContext, useNavigate, and useLocation for managing component states, side effects, and routing.
• Conditional Rendering: Renders content based on active categories, cart, wishlist, and current routes.
• Context API: Manages global state for cart and wishlist, ensuring seamless data sharing across components.

📝 Usage

• Navigate: Use the Navbar to access Home, Statistics, Dashboard, and About pages.
• Explore Categories: On the homepage, use the sidebar to filter gadgets by category.
• View Details: Click “View Details” on any gadget card for a full view of the product.
• Add to Cart or Wishlist: Use buttons on the details page to add items to your Cart or Wishlist.
• Dashboard: View items in Cart and Wishlist, and sort Cart items by price.
• Purchase: In the Cart tab, click "Purchase" to complete an order and see a congratulatory modal.

📣 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check out the issues page if you want to contribute.

🎉 Show Your Support

If you like this project, consider giving it a ⭐ on GitHub!

🌐 Live Demo

✨ Experience the Live Version Here! ✨

📂 GitHub Repository

✨ Visit Repository! ✨