SmartCart — Docuson

🏗️

Architecture

System Overview

SmartCart is a React Native mobile application built with Expo framework (v52.0.31) using TypeScript. The app implements a stack-based navigation system with screens for authentication (Login, Registration, ConfirmSignUp), shopping functionality (Home, Scan, Cart, Checkout, Payment), and order management (Invoices).

Authentication is handled through AWS Amplify with Cognito user pools. The application entry point is App.tsx which configures AWS Amplify and sets up the navigation stack with context providers for theming and cart state management.

Technology Stack

Technology	Version	Purpose
React Native	0.76.7	Cross-platform mobile framework
Expo SDK	52.0.31	Development platform & build tools
TypeScript	5.3.3	Type-safe JavaScript
AWS Amplify	5.3.26	Cloud backend services (auth)
React Navigation	6.1.18	Screen navigation & routing
React Native Paper	5.12.5	Material Design UI components

Architecture Diagram

Figure 1 — System Architecture

graph TD
    A[App.tsx] --> B[AWS Amplify Config]
    A --> C[Context Providers]
    C --> D[ThemeProvider]
    C --> E[CartProvider]
    A --> F[Stack Navigator]
    F --> G[Auth Screens]
    F --> H[Shopping Screens]
    F --> I[Invoice Screen]
    G --> J[Login / Register / Confirm]
    H --> K[Home / Scan / Cart / Checkout]
    B --> L[AWS Cognito]
    H --> M[Backend API]

Project Organization

SmartCart/
├── App.tsx              # Entry point, Amplify config, navigation
├── aws-exports.ts       # AWS Amplify configuration
├── context/
│   ├── CartContext.tsx   # Cart state management
│   └── ThemeProvider.tsx # Theme context
├── screens/
│   ├── LoginScreen.tsx
│   ├── RegistrationScreen.tsx
│   ├── HomeScreen.tsx
│   ├── ScanScreen.tsx
│   ├── CartScreen.tsx
│   ├── CheckoutScreen.tsx
│   ├── PaymentScreen.tsx
│   └── InvoicesScreen.tsx
└── api.js               # Axios HTTP client

🔒

Security

Security Overview

Authentication uses AWS Cognito with email-based login and 8-character minimum passwords. Email verification is required. MFA is disabled. Local data is stored without encryption via AsyncStorage. The API client communicates over HTTP without HTTPS.

Security Findings

Critical

HTTP API Communication

API base URL uses HTTP instead of HTTPS. All API communications are vulnerable to man-in-the-middle attacks and data interception.

api.js:3 → baseURL: 'http://smartcart.us-west-1.elasticbeanstalk.com'

High

Unencrypted Local Storage

Local data stored without encryption using AsyncStorage. Sensitive data accessible to anyone with physical device access.

@react-native-async-storage/async-storage

High

No API Authentication Headers

API client configured without authentication headers or token management. Requests to the backend carry no user identity.

api.js → Axios instance configuration

Medium

MFA Disabled

Multi-factor authentication is disabled in the Cognito configuration. Accounts rely solely on password-based authentication.

cli-inputs.json:12 → "mfaConfiguration": "OFF"

Medium

Weak Password Policy

Password policy requires only 8 characters with no complexity requirements (no uppercase, lowercase, numbers, or symbols enforced).

cli-inputs.json:16 → "passwordPolicyCharacters": []

🎨

Frontend

Screen Map

Screen	File	Purpose
Login	`LoginScreen.tsx`	Email/password authentication
Registration	`RegistrationScreen.tsx`	New account creation
Home	`HomeScreen.tsx`	Main dashboard after login
Scan	`ScanScreen.tsx`	Camera barcode scanner
Cart	`CartScreen.tsx`	Shopping cart with quantities
Checkout	`CheckoutScreen.tsx`	Order finalization
Payment	`PaymentScreen.tsx`	Payment processing
Invoices	`InvoicesScreen.tsx`	Purchase history

State Management

Two React Context providers manage global state:

CartContext — manages cart items, quantities, add/remove operations, and total calculation
ThemeProvider — manages light/dark theme preferences using React Native Paper's theming system

Navigation Flow

Figure 2 — User Navigation Flow

graph TD
    A((Start)) --> B[Login]
    B --> C{Authenticated?}
    C -->|No| D[Register]
    D --> E[Confirm Email]
    E --> B
    C -->|Yes| F[Home]
    F --> G[Scan Barcode]
    G --> H[Cart]
    H --> I[Checkout]
    I --> J[Payment]
    J --> K[Invoice]
    F --> K