SmartCart
Developer Documentation — React Native Shopping App
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, shopping functionality, and order management.
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.
Technology Stack
| Technology | Version | Purpose |
|---|---|---|
| React Native | 0.76.7 | Cross-platform mobile framework |
| Expo SDK | 52.0.31 | Development platform & build system |
| TypeScript | 5.3.3 | Type-safe JavaScript |
| AWS Amplify | 5.3.26 | Cloud backend (auth, API) |
| React Navigation | 6.1.18 | Screen navigation |
Architecture Diagram
graph TD
A[App.tsx Entry Point] --> B[AWS Amplify Config]
A --> C[Context Providers]
C --> D[ThemeProvider]
C --> E[CartProvider]
A --> F[Navigation Container]
F --> G[Stack Navigator]
G --> H[Auth Screens]
G --> I[Shopping Screens]
G --> J[Invoice Screen]
H --> K[Login / Register / Confirm]
I --> L[Home / Scan / Cart / Checkout]
B --> M[AWS Cognito]
I --> N[Backend API]
Security
Security Overview
Authentication is handled through AWS Amplify with Cognito user pools. MFA is disabled. Local data storage uses AsyncStorage without encryption. The API client connects over HTTP without HTTPS.
Security Findings
api.js:3)API base URL uses HTTP instead of HTTPS. All communications vulnerable to man-in-the-middle attacks.
Local data stored without encryption using AsyncStorage. Sensitive data accessible to anyone with device access.
api.js)API client configured without authentication headers or token management. Unauthorized access possible.
cli-inputs.json:12)Multi-factor authentication disabled in Cognito configuration.
"mfaConfiguration": "OFF"
Authentication System
The application uses AWS Cognito user pools configured via AWS Amplify. Email verification is required for account activation. Password policy requires minimum 8 characters with no complexity requirements.
// aws-exports.ts (sanitized)
const awsmobile = {
aws_project_region: "us-west-1",
aws_cognito_region: "us-west-1",
aws_user_pools_id: "us-west-1_XXXXXXX",
aws_user_pools_web_client_id: "XXXXXXXXX",
};
Frontend
Component Architecture
The app uses a stack-based navigation pattern with React Navigation. State management relies on React Context API with two providers: CartProvider for shopping cart state and ThemeProvider for UI theming.
Screen Map
| Screen | File | Purpose |
|---|---|---|
| Login | screens/LoginScreen.tsx | Email/password authentication |
| Registration | screens/RegistrationScreen.tsx | New account creation |
| Home | screens/HomeScreen.tsx | Main dashboard |
| Scan | screens/ScanScreen.tsx | Barcode scanner |
| Cart | screens/CartScreen.tsx | Shopping cart view |
| Checkout | screens/CheckoutScreen.tsx | Order finalization |
| Payment | screens/PaymentScreen.tsx | Payment processing |
| Invoices | screens/InvoicesScreen.tsx | Purchase history |
State Management
Two React Context providers manage global state:
- CartContext — manages cart items, quantities, and total calculation
- ThemeProvider — manages light/dark theme preferences