Skip to content

README.md

Latest commit

 

History

History
99 lines (71 loc) · 3.46 KB

README.md

File metadata and controls

99 lines (71 loc) · 3.46 KB
Raw

🛒 Digital-Tools-Platform (React Cart & Tab Management Project)

📝 Project Overview

This is a React-based frontend project built to strengthen core React concepts through practical implementation. The project focuses on real-world UI interaction, state management, and component-based architecture. It simulates modern e-commerce features like dynamic product listings, cart management, and real-time calculations.

Live Demo GitHub Repo

📸 Screenshots

Project Banner

Product Listing Cart System

🚀 Key Features

  • 📦 Dynamic Product Rendering: Products are dynamically loaded and rendered using JSON data.
  • 📑 Tab-based UI: Organized system for better content navigation and discovery.
  • 🛒 Smart Cart System: - Add items to the cart effortlessly.
    • Remove individual items or clear the entire cart in one click.
    • Real-time total price calculation and live cart item counter.
  • 🔔 Interactive Feedback: Integrated toast notifications for every user action.
  • 🖱️ Smooth Navigation: Seamless scrolling between different sections for a polished UX.
  • 📱 Responsive Design: Fully optimized for mobile, tablet, and desktop views.

🛠️ Technologies Used

  • React.js: Core library for component-based architecture.
  • Tailwind CSS & DaisyUI: For modern, responsive styling.
  • JavaScript (ES6+): Logical implementation with modern syntax.

📦 Dependencies Used

The following libraries were used to enhance the application's functionality:

  • react: ^18.x
  • react-dom: ^18.x
  • react-toastify: For interactive toast notifications.
  • react-icons: For scalable vector icons.
  • daisyui: For pre-designed UI components.

🧠 What I Learned

  • State Management: Efficient use of useState to handle cart and tab logic.
  • Component Architecture: Breaking down complex UI into reusable functional components.
  • Props Flow: Managing data flow and event handling between parent and child components.
  • Conditional Rendering: Dynamically showing/hiding elements based on application state.

🏗️ How to Run Locally

Follow these steps to set up the project on your local machine:

  1. Clone the repository: 
    git clone https://github.com/mdabdulawal2001/Digital-Tools-Platform.git
  2. Navigate to the project folder: 
    cd Digital-Tools-Platform
  3. Install all dependencies: 
    npm install
  4. Start the development server: 
    npm run dev

Developed with ❤️ by MD. ABDUL AWAL TOHA