muntasir-wsx/shopnest-client

1. What this repo is

- This tree is a React/Vite single-page frontend for the ShopNest grocery platform.

- The README describes a broader full-stack system, but in this repository the visible code is mainly the client app, with Firebase and HTTP hooks acting as the integration layer to external services.

2. Application shell

- src/main.jsx, src/App.jsx, src/router/router.jsx, and src/Layouts/MainLayouts.jsx form the top-level app composition.

- Routing appears to be centralized in src/router, with shared layout wrappers for the public-facing site and separate admin/user areas.

3. Authentication and user state

- src/Context/AuthProvider.jsx, UseAuth.jsx, and src/AuthPages/Signin.jsx / SignUp.jsx handle login and registration flows.

- Firebase is configured in src/firebase/firebase.config.js, so authentication is likely Firebase-backed on the client side.

- Role-aware access is supported by src/Context/useAdmin.jsx, which likely feeds route protection and dashboard visibility.

4. Stateful shopping domains

- Cart and wishlist are managed through dedicated context providers: CartProvider.jsx, useCart.jsx, and WishlistProvider.jsx.

- This suggests the app keeps shopping state in a shared client store rather than passing it through page props.

5. Public storefront experience

- The customer-facing content is split into reusable feature sections under src/HomeComponents and shop pages under src/OtherPages/ShopMain.

- Home.jsx assembles marketing and discovery blocks such as banner, categories, featured products, discounts, testimonials, FAQ, blog teaser, and newsletter signup.

- ShopMain.jsx, ProductCard.jsx, SideBar.jsx, ShopDetails.jsx, and ShopDetailsBanner.jsx form the product-browsing and product-detail flow.

6. Commerce flow

- The cart path lives in src/OtherPages/Cart/CartMain, including cart review, checkout form, and a success page.

- This indicates a linear flow from product selection → cart → checkout → confirmation.

- src/OtherPages/UserProfile contains order and invoice views, so purchased orders are surfaced in account history after checkout.

7. AI/chatbot integration

- src/OtherPages/ShopMain/ProductChatBot.jsx is the clearest signal of the Gemini-assisted shopping assistant described in the README.

- Architecturally, this is a feature boundary inside the shop experience: product discovery UI can hand off to an AI assistant for recommendations, likely using product/catalog context from the frontend or backend API.

8. Admin dashboard boundary

- The admin area is isolated under src/Admin with its own layout: AdminLayout.jsx.

- Subpages include product management, user management, order management, analytics, newsletter messaging, and posting products.

- This is a separate operational surface from the shopper UI, consistent with role-based access control.

9. User account area

- src/OtherPages/UserProfile groups the customer account surfaces: personal info, orders, and invoices.

- src/OtherPages/Tracking/TrackingOrder.jsx adds post-purchase order visibility, which sits between checkout and account management.

10. Data access layer

- src/Hooks/useAxiosPublic.jsx and useAxiosSecure.jsx are the main network abstraction points.

- The separation strongly implies two backend interaction modes: unauthenticated/public requests and authenticated/authorized requests using secure headers or tokens.

11. Static/local data sources

- public/features.json and public/productCard.json suggest some parts of the UI are backed by static JSON fixtures or seeded content.

- These likely feed marketing sections, product cards, or demo content without requiring a live backend call.

12. Shared presentation components

- src/Shared Components contains the cross-cutting UI chrome: navbar, footer, logo variants, loader, branding, and error page.

- These are the outer frame around all routes, so they belong in the diagram as shared infrastructure rather than feature-specific logic.

13. Key architectural boundary to capture in a diagram

- The main split is between:

- Public/customer storefront

- Authenticated customer account flows

- Protected admin dashboard

- Cross-cutting concerns are auth/role context, secure API access, and shared layout components.

14. What is not in this repo

- There is no visible Express/MongoDB backend code here, even though the README references it.

- For an accurate architecture diagram, treat those as external services consumed by this frontend, not as components inside this repository.