Atomic Shopping Mart App

A modern React + Redux shopping cart application focused on learning scalable frontend architecture, state management, and routing patterns.

Live Demo: https://atomic-cart.vercel.app/

⸻

Tech Stack

• React.js
• Redux Toolkit
• React Router DOM
• JavaScript (ES6+)
• CSS3
• Vite

⸻

Features Implemented

UI & Layout

• Responsive navbar
• Basic shopping layout
• Footer component
• Clean component structure

Routing

• Modern React Router setup using:
  • createBrowserRouter
  • RouterProvider
• Dynamic route structure preparation
• 404 fallback route handling

State Management

Implemented Redux Toolkit cart state management:

• Add item to cart
• Remove item from cart
• Quantity management
• Total cart quantity tracking
• Centralized Redux store architecture

API Integration

• Product fetching from external API
• Dynamic rendering of products
• Async data handling

⸻

Learning Focus

This project is primarily focused on improving:

• React fundamentals
• Redux Toolkit architecture
• Routing patterns in React Router v6+
• Component-based design
• State normalization and cart logic
• Scalable frontend folder structure

⸻

Planned Features

• Product details page
• Persistent cart using localStorage
• Search and filtering
• Category pages
• Checkout flow
• Loading skeletons
• Toast notifications
• Dark mode
• Authentication

⸻

Folder Structure

src/ ├── components/ ├── pages/ ├── store/ ├── routes/ ├── assets/ ├── App.jsx └── main.jsx

⸻

Purpose of the Project

This project is part of my frontend engineering learning journey focused on building production-style React applications while improving Redux and routing fundamentals.

Project started: 01/02/26, 12:31 PM https://atomic-cart.vercel.app/

Had completed basic layout or navbar , routing set up done

Resumed at 07/02/26, 2:37 PM Fetching of Products from api done - 07/02/26, 5:19 PM Resumed at 07/02/26, 6:27 PM Resumed at 15/02/26, 1:17 PM --> watching video is done Resumed at 09/05/26, 4:28 PM --> 10/05/26, 1:12 AM // completed each product page detail, updated routing 10/05/26, 1:11 PM - working on Redux cart 11/05/26, 9:01 AM - need to complete cart page functionality / show all products added to cart 11/05/26, 11:36 PM --> 12/05/26, 12:38 AM - worked on listing cart items by mapping them and created a cart item card component 12/05/26, 10:09 PM -->

• Improved AddToCart component architecture.
• Used .some() instead of .map().includes() for cart existence checks.
• Fixed duplicate add-to-cart bug by adding return after existence check.
• Removed unnecessary key prop misuse from standalone button elements.
• Reduced repeated logic by storing cart existence check in a variable. 13/05/26, 1:20 AM --> added remove cart button 17/05/26, 5:11 PM --> 17/05/26, 7:57 PM --> Project done successfully
• Added remove from cart functionality