Urban Store Architecture and System Design

  Browser
     │
     │  HTTP / HTTPS
     ▼
┌─────────────────────────────────┐
│        Next.js 16 Frontend      │  :3000
│  App Router · Zustand · GSAP    │
│  Three.js · Recharts · Stripe.js│
│  Middleware (JWT route guard)   │
└────────────────┬────────────────┘
                 │  REST API calls (fetch)
                 │  Authorization: Bearer <JWT>
                 ▼
┌─────────────────────────────────┐
│     Django 6 + DRF Backend      │  :8000
│  /api/users/   /api/products/   │
│  /api/cart/    /api/orders/     │
│  /api/payments/ /api/analytics/ │
│  Auth: PyJWT + bcrypt (custom)  │
└──────┬──────────────────┬───────┘
       │ MongoEngine       │ External HTTP
       ▼                   ▼
┌────────────┐   ┌─────────────────────────┐
│  MongoDB   │   │   Third-Party Services  │
│  Atlas     │   │  • Cloudinary (images)  │
│  :27017    │   │  • Stripe (payments)    │
│  urbanstore│   │  • Gmail SMTP (email)   │
└────────────┘   └─────────────────────────┘

// Excerpt from frontend/middleware.js
if (pathname.startsWith('/admin') && token) {
  try {
    const payload = JSON.parse(atob(token.split('.')[1]))
    if (!payload.is_admin) {
      return NextResponse.redirect(new URL('/', request.url))
    }
  } catch (error) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

# backend/config/urls.py
urlpatterns = [
    path('admin/',          admin.site.urls),
    path('api/users/',      include('users.urls')),
    path('api/products/',   include('products.urls')),
    path('api/cart/',       include('cart.urls')),
    path('api/orders/',     include('orders.urls')),
    path('api/payments/',   include('payments.urls')),
    path('api/analytics/',  include('analytics.urls')),
]

authentication_classes = []
permission_classes = []

def get_payload(request):
    auth = request.headers.get('Authorization', '')
    if not auth.startswith('Bearer '):
        return None
    try:
        token = auth.split(' ')[1]
        return jwt.decode(token, settings.SECRET_KEY, algorithms=['HS256'])
    except:
        return None

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

mongoengine.connect(
    db='urbanstore',
    host=config['MONGODB_URI'],
    tlsCAFile=certifi.where()   # TLS certificate pinning via certifi
)

1. POST /api/users/register/
   → bcrypt hashes the password
   → User document saved in MongoDB (is_verified: false)
   → 6-digit code generated and emailed via Gmail SMTP

2. POST /api/users/verify-email/  { code: "123456" }
   → Code and expiry checked against the User document
   → User document updated: is_verified: true

3. POST /api/users/login/
   → bcrypt.checkpw() validates the submitted password
   → jwt.encode() produces a signed HS256 token containing:
       { email, is_admin, exp }
   → Token returned in response body

4. Client stores the token in the `access` cookie

5. Subsequent requests include:
   Authorization: Bearer <token>

6. Each backend view calls get_payload(request) to decode
   and validate the token against SECRET_KEY

User browses /catalog
  └─► GET /api/products/
        └─► MongoEngine queries MongoDB → product list returned

User adds item to cart
  └─► Cart state updated in Zustand (localStorage)
  └─► POST /api/cart/  (syncs with backend cart document)

User proceeds to checkout → enters shipping address
  └─► Shipping address held in client state

User submits order
  └─► POST /api/orders/
        ├─► JWT validated by get_user_id()
        ├─► Cart items read from backend
        ├─► Product stock decremented in MongoDB
        └─► Order document created (status: 'pending')

Stripe PaymentIntent created
  └─► POST /api/payments/create-intent/
        ├─► JWT validated
        ├─► Order total read from MongoDB
        └─► stripe.PaymentIntent.create() called
              └─► client_secret returned to frontend

User enters card details in Stripe Element
  └─► stripe.confirmPayment() called client-side
        └─► Stripe processes the card directly (PCI-compliant)

Payment confirmed
  └─► POST /api/payments/confirm/
        ├─► Order status updated to 'paid' in MongoDB
        ├─► paid_at timestamp recorded
        └─► Confirmation email sent via Gmail SMTP

User redirected to /order-confirmation