Gadget-Zone is an e-commerce platform tailored for tech enthusiasts, specializing in a range of products including laptops, smartphones, smartwatches, and accessories. Built with React for efficient component-based design, the website utilizes React Router for seamless navigation and Tailwind CSS with DaisyUI for a responsive, visually appealing layout. The platform also includes a shopping cart, wishlist, and product filtering, with the Context API managing state across components. To enhance user experience, LocalStorage is implemented for data persistence, ensuring users can continue where they left off even after reloading the page.
- Navbar: Provides easy navigation across the website, allowing users to access different product categories and sections.
- Banner: Displays promotional content or featured products at the top of the homepage for immediate user engagement.
- Home: The landing page showcasing popular products, categories, and introductory information about Gadget-Zone.
- Statistics: Provides data insights, such as the number of products, users, and other key metrics, to enhance user trust and site credibility.
- ProductCart: Shows selected items, allowing users to view, adjust quantities, or remove products before proceeding to checkout.
- ProductDetails: Displays in-depth information about individual products, including specifications, pricing, and reviews.
- Dashboard: An interface for managing user accounts or administrative tasks, like tracking orders or managing products.
- Errorpage: A user-friendly page that appears when navigation fails or pages aren’t found, helping redirect users effectively.
- Footer: Contains essential links, contact information, and social media connections, found at the bottom of each page.
- JavaScript (ES6): Powers the site's functionality and logic, enabling interactivity.
- CSS/Tailwind: Provides responsive and utility-first styling for a consistent design.
- DaisyUI: A component library that complements Tailwind for a polished, uniform UI.
- Node.js and npm: Manages the environment and dependencies efficiently.
- JSX: Allows HTML-like syntax in React components for streamlined component building.
- React Router: Enables seamless navigation across different pages without full reloads.
- React Icons: Adds a wide range of icons to enhance visual elements across the site.
- React Recharts: Provides dynamic data visualization for features like the statistics page.
- React Toastify: Delivers in-app notifications for user interactions.
- Git and GitHub: Version control for tracking changes and collaborating.
- Surge Deploy: Deploys the site on the web for accessibility.