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.
- 📦 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.
- React.js: Core library for component-based architecture.
- Tailwind CSS & DaisyUI: For modern, responsive styling.
- JavaScript (ES6+): Logical implementation with modern syntax.
The following libraries were used to enhance the application's functionality:
react: ^18.xreact-dom: ^18.xreact-toastify: For interactive toast notifications.react-icons: For scalable vector icons.daisyui: For pre-designed UI components.
- State Management: Efficient use of
useStateto 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.
Follow these steps to set up the project on your local machine:
- Clone the repository:
git clone https://github.com/mdabdulawal2001/Digital-Tools-Platform.git
- Navigate to the project folder:
cd Digital-Tools-Platform - Install all dependencies:
npm install
- Start the development server:
npm run dev
Developed with ❤️ by MD. ABDUL AWAL TOHA