EcommerceApp\SRC
|   App.css                        // global styles for the whole app
|   App.jsx                        // sets up routing between pages
|   index.css                      // base/global CSS reset and defaults
|   main.jsx                       // React entry point, renders App
|   
+---assets                         // images/icons used in the app
|       hero.png                   // banner image used on homepage
|       react.svg                  // React logo icon
|       vite.svg                   // Vite logo icon
|       
+---components                     // small reusable UI pieces
|   +---admin                      // components used only on admin pages
|   |       AdminNavbar.jsx        // top navigation bar shown on admin pages
|   |       ProductFormModal.jsx   // popup form to add or edit a product
|   |       StatCard.jsx           // small card showing a stat/number on admin dashboard
|   |       
|   +---common                     // shared components used by both admin & store
|   |       Logo.jsx               // reusable app logo component
|   |       StarRating.jsx         // read-only star display
|   |       Toasts.jsx             // small popup notifications (success/error messages)
|   |       
|   \---store                      // components used only on customer pages
|           Footer.jsx             // bottom footer shown on customer pages
|           Navbar.jsx             // top navigation bar shown on customer pages
|           ProductCard.jsx        // single product preview shown in product listings
|           
+---context                        // app-wide state management
|       StoreContext.jsx           // shares cart/product data across the app
|       
+---data                           // mock/sample data files
|       orders.js                  // sample/mock order data
|       products.js                // sample/mock product data
|       
+---hooks                          // custom reusable logic
|       useToastQueue.js           // custom hook to manage toast notifications
|       
+---pages                          // full screens/routes of the app
|   +---admin                      // admin-facing pages
|   |       AdminDashboard.jsx     // main admin overview screen
|   |       AdminOrders.jsx        // admin screen to view/manage orders
|   |       AdminProducts.jsx      // admin screen to view/manage products
|   |       
|   \---store                      // customer-facing pages
|           AboutPage.jsx          // "About us" page for customers
|           CartPage.jsx           // shows items customer added to cart
|           CheckoutPage.jsx       // page where customer completes purchase
|           ContactPage.jsx        // contact/support page for customers
|           HomePage.jsx           // main landing page for customers
|           ProductDetailsPage.jsx // full details of a single product
|           ProductsPage.jsx       // page listing all available products
|           ThankYouPage.jsx       // confirmation page shown after checkout
|           
+---router                         // route definitions
|       AdminRouter.jsx            // defines routes/pages for the admin side
|       PageRouter.jsx             // defines routes/pages for the customer side
|       
\---utils                          // helper functions
        formatPrice.js             // helper function to format prices consistently
        placeholderImage.js        // helper to provide a fallback image if none is set