# rikeshacharya/ecommerce architecture

> Architecture diagram of the GitHub repository rikeshacharya/ecommerce, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rikeshacharya/ecommerce
- Repository: https://github.com/rikeshacharya/ecommerce

## Overview

This is a browser-based stationery e-commerce application with a Django backend. The visible workflow routes users through the React app to shop, view products, manage a cart, and access account and order pages; staff have separate administration pages. Sampled frontend services send authenticated HTTP requests through a shared Axios client. The tree also shows category, wishlist, quote, and review capabilities. Backend implementation links are limited because its URL, view, and model source was not sampled.

Main entry points: [`frontend/src/App.tsx`](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/App.tsx) (App routing), [`frontend/src/api/client.ts`](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/client.ts) (HTTP client), [`frontend/src/api/services/productService.ts`](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/productService.ts) (Product service), [`frontend/src/api/services/cartService.ts`](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/cartService.ts) (Cart service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Web application"]
  node_app["App routing<br/>[App.tsx]"]
  node_http["HTTP client<br/>[client.ts]"]
end

subgraph group_commerce["Shopping features"]
  node_catalog["Product catalog<br/>[ProductCatalog.tsx]"]
  node_product["Product details<br/>[ProductDetail.tsx]"]
  node_cart["Cart<br/>[Cart.tsx]"]
  node_checkout["Checkout<br/>[Checkout.tsx]"]
  node_categories["Categories<br/>[CategoryList.tsx]"]
  node_orders["Orders<br/>[OrderList.tsx]"]
  node_products_api["Product service<br/>[productService.ts]"]
  node_cart_api["Cart service<br/>[cartService.ts]"]
  node_order_api["Order service<br/>[orderService.ts]"]
  node_category_api["Category service<br/>[categoryService.ts]"]
  node_wishlist_api["Wishlist service<br/>[wishlistService.ts]"]
  node_quote_api["Quote service<br/>[quoteService.ts]"]
  node_review_api["Review service<br/>[reviewService.ts]"]
end

subgraph group_account["Account features"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
  node_login["Login<br/>[Login.tsx]"]
  node_profile["Profile<br/>[Profile.tsx]"]
  node_addresses["Addresses<br/>[AddressList.tsx]"]
  node_auth_api["Auth service<br/>[authService.ts]"]
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_admin_products["Admin products<br/>[AdminProducts.tsx]"]
  node_admin_orders["Admin orders<br/>[AdminOrders.tsx]"]
  node_admin_categories["Admin categories"]
  node_admin_users["Admin users<br/>[AdminUsers.tsx]"]
end

subgraph group_backend["Backend API"]
  node_django_routes["Django routes<br/>[urls.py]"]
  node_api_views["API views<br/>[views_api.py]"]
  node_models[("Commerce models<br/>[models.py]")]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_app
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_product
node_app -->|"routes to"| node_cart
node_app -->|"routes to"| node_checkout
node_app -->|"routes to"| node_categories
node_app -->|"routes to"| node_orders
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_addresses
node_app -->|"routes to"| node_admin_dashboard
node_app -->|"routes to"| node_admin_products
node_app -->|"routes to"| node_admin_orders
node_app -->|"routes to"| node_admin_categories
node_app -->|"routes to"| node_admin_users
node_app -->|"provides state"| node_auth
node_products_api -->|"sends requests"| node_http
node_cart_api -->|"sends requests"| node_http
node_order_api -->|"sends requests"| node_http
node_category_api -->|"sends requests"| node_http
node_wishlist_api -->|"sends requests"| node_http
node_quote_api -->|"sends requests"| node_http
node_review_api -->|"sends requests"| node_http
node_auth_api -->|"sends requests"| node_http
node_http -->|"HTTP requests"| node_django_routes

click node_app "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/App.tsx"
click node_catalog "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/components/ProductCatalog.tsx"
click node_product "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/ProductDetail.tsx"
click node_cart "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Cart.tsx"
click node_checkout "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Checkout.tsx"
click node_categories "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/CategoryList.tsx"
click node_orders "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/OrderList.tsx"
click node_products_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/productService.ts"
click node_cart_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/cartService.ts"
click node_order_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/orderService.ts"
click node_category_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/categoryService.ts"
click node_wishlist_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/wishlistService.ts"
click node_quote_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/quoteService.ts"
click node_review_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/reviewService.ts"
click node_auth "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/context/AuthContext.tsx"
click node_login "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/components/Login.tsx"
click node_profile "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Profile.tsx"
click node_addresses "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AddressList.tsx"
click node_auth_api "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/authService.ts"
click node_admin_dashboard "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminDashboard.tsx"
click node_admin_products "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminProducts.tsx"
click node_admin_orders "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminOrders.tsx"
click node_admin_categories "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminCategories.tsx"
click node_admin_users "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminUsers.tsx"
click node_http "https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/client.ts"
click node_django_routes "https://github.com/rikeshacharya/ecommerce/blob/Main/backend/backend/urls.py"
click node_api_views "https://github.com/rikeshacharya/ecommerce/blob/Main/backend/ecommerceAPP/views_api.py"
click node_models "https://github.com/rikeshacharya/ecommerce/blob/Main/backend/ecommerceAPP/models.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_http toneBlue
class node_catalog,node_product,node_cart,node_checkout,node_categories,node_orders,node_products_api,node_cart_api,node_order_api,node_category_api,node_wishlist_api,node_quote_api,node_review_api toneAmber
class node_auth,node_login,node_profile,node_addresses,node_auth_api toneMint
class node_admin_dashboard,node_admin_products,node_admin_orders,node_admin_categories,node_admin_users toneRose
class node_django_routes,node_api_views,node_models,node_shopper toneIndigo
```

## Components

### Web application

- [App routing](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [HTTP client](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/client.ts): `frontend/src/api/client.ts`

### Shopping features

- [Product catalog](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/components/ProductCatalog.tsx): `frontend/src/components/ProductCatalog.tsx`
- [Product details](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/ProductDetail.tsx): `frontend/src/pages/ProductDetail.tsx`
- [Cart](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Cart.tsx): `frontend/src/pages/Cart.tsx`
- [Checkout](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Checkout.tsx): `frontend/src/pages/Checkout.tsx`
- [Categories](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/CategoryList.tsx): `frontend/src/pages/CategoryList.tsx`
- [Orders](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/OrderList.tsx): `frontend/src/pages/OrderList.tsx`
- [Product service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/productService.ts): `frontend/src/api/services/productService.ts`
- [Cart service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/cartService.ts): `frontend/src/api/services/cartService.ts`
- [Order service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/orderService.ts): `frontend/src/api/services/orderService.ts`
- [Category service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/categoryService.ts): `frontend/src/api/services/categoryService.ts`
- [Wishlist service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/wishlistService.ts): `frontend/src/api/services/wishlistService.ts`
- [Quote service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/quoteService.ts): `frontend/src/api/services/quoteService.ts`
- [Review service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/reviewService.ts): `frontend/src/api/services/reviewService.ts`

### Account features

- [Authentication state](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/context/AuthContext.tsx): `frontend/src/context/AuthContext.tsx`
- [Login](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/components/Login.tsx): `frontend/src/components/Login.tsx`
- [Profile](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/Profile.tsx): `frontend/src/pages/Profile.tsx`
- [Addresses](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AddressList.tsx): `frontend/src/pages/AddressList.tsx`
- [Auth service](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/api/services/authService.ts): `frontend/src/api/services/authService.ts`

### Administration

- [Admin dashboard](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminDashboard.tsx): `frontend/src/pages/AdminDashboard.tsx`
- [Admin products](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminProducts.tsx): `frontend/src/pages/AdminProducts.tsx`
- [Admin orders](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminOrders.tsx): `frontend/src/pages/AdminOrders.tsx`
- [Admin categories](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminCategories.tsx): `frontend/src/pages/AdminCategories.tsx`
- [Admin users](https://github.com/rikeshacharya/ecommerce/blob/Main/frontend/src/pages/AdminUsers.tsx): `frontend/src/pages/AdminUsers.tsx`

### Backend API

- [Django routes](https://github.com/rikeshacharya/ecommerce/blob/Main/backend/backend/urls.py): `backend/backend/urls.py`
- [API views](https://github.com/rikeshacharya/ecommerce/blob/Main/backend/ecommerceAPP/views_api.py): `backend/ecommerceAPP/views_api.py`
- [Commerce models](https://github.com/rikeshacharya/ecommerce/blob/Main/backend/ecommerceAPP/models.py): `backend/ecommerceAPP/models.py`

### Other components

- **Shopper**

## Connections

- Shopper → App routing: uses
- App routing → Product catalog: routes to
- App routing → Product details: routes to
- App routing → Cart: routes to
- App routing → Checkout: routes to
- App routing → Categories: routes to
- App routing → Orders: routes to
- App routing → Login: routes to
- App routing → Profile: routes to
- App routing → Addresses: routes to
- App routing → Admin dashboard: routes to
- App routing → Admin products: routes to
- App routing → Admin orders: routes to
- App routing → Admin categories: routes to
- App routing → Admin users: routes to
- App routing → Authentication state: provides state
- Product service → HTTP client: sends requests
- Cart service → HTTP client: sends requests
- Order service → HTTP client: sends requests
- Category service → HTTP client: sends requests
- Wishlist service → HTTP client: sends requests
- Quote service → HTTP client: sends requests
- Review service → HTTP client: sends requests
- Auth service → HTTP client: sends requests
- HTTP client → Django routes: HTTP requests