ShopVerse is a modern, high-performance iOS e-commerce application built using Swift (SwiftUI) an...ShopVerse is a modern, high-performance iOS e-commerce application built using Swift (SwiftUI) an...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Muhammad's avatar
Muhammad Saifullah
• Aug 11
ShopVerse is a modern, high-performance iOS e-commerce application built using Swift (SwiftUI) and powered by Firebase as its backend infrastructure.
🏛️ System Architecture: MVVM Pattern
The application is structured around the Model-View-ViewModel (MVVM) architecture to guarantee clean separation of concerns, high maintainability, and testability across both customer and administrator workflows.
1. The Model Layer
The Model layer consists of lightweight, immutable data structures conforming to Swift's Codable and Identifiable protocols.
Product Model: Stores product details such as unique IDs, titles, descriptions, pricing, stock levels, rating summaries, and array paths for high-resolution images stored in the cloud.
Order Model: Captures transaction details including item snapshots, delivery addresses, customer identification, pricing breakdowns, and status states (Pending, Packed, Shipped, Delivered, or Cancelled).
User & Cart Models: Manage profile attributes, assigned roles (Customer or Admin), saved shipping addresses, and live active shopping cart items.
2. The View Layer
Built declaratively using SwiftUI, the View layer handles everything rendered on the screen.
Views remain strictly focused on layout rendering, animations, and capturing user interactions (e.g., button taps, pull-to-refresh gestures, and navigation transitions).
Views do not contain business logic or direct database call implementations; instead, they observe state changes exposed by their corresponding ViewModels.
3. The ViewModel Layer
ViewModels act as the reactive middleware between the data layer and UI screens.
Utilizing @MainActor and @Published properties, ViewModels manage screen-specific states (e.g., loading spinners, active product filters, and checkout step validations).
They process user input, execute asynchronous data operations via async/await, and automatically trigger UI redraws whenever data updates.
4. The Service Layer
Encapsulated as injected singletons or protocols, services manage external network interactions.
Handles low-level Firebase authentication triggers, Cloud Firestore read/write streams, image uploads to Firebase Storage, and payment gateway SDK integrations (e.g., Stripe or Apple Pay).
🔥 Firebase Backend Mechanics & Data Management
Firebase serves as the serverless engine driving ShopVerse, enabling real-time database syncing, secure authentication, and scalable media storage.
1. Authentication & Role-Based Access Control (RBAC)
Security and session management are handled through Firebase Authentication.
Multi-Provider Auth: Supports native Email/Password credentials alongside one-tap sign-ins via Apple ID and Google accounts.
Session Persistence: Authenticated tokens are stored securely in the iOS Keychain, allowing users to remain logged in across app restarts.
Role Verification: Upon successful authentication, the system queries the user's Firestore profile document to check their role attribute. If designated as admin, the app routes the user to the store management dashboard; otherwise, it presents the primary shopping portal.
2. Cloud Firestore Database Structure
Firestore operates as a real-time, NoSQL document-oriented database structured into clean top-level collections.
3. Offline Persistence & Caching
Firestore's local disk caching mechanism is enabled during app launch.
Uninterrupted Browsing: Product listings and cart states are cached locally on the device disk. If the device loses internet connection, users can still view products and manipulate their cart without app crashes or blank screens.
Background Sync: Any state changes made offline are queued locally and automatically committed to the cloud database once connectivity is restored.
4. Real-Time Data Synchronization via Snapshot Listeners
Instead of relying on traditional HTTP polling or manual screen pulls, ShopVerse utilizes Firestore addSnapshotListener connections.
Live Order Tracking: When an administrator updates an order status in the admin portal (e.g., changing an order from Processing to Shipped), a persistent WebSocket listener pushes the updated state directly to the customer's device in real time, updating the UI timeline instantly.
📱 Advanced SwiftUI Concepts & Interactive UX Patterns
To deliver a refined, native iOS user experience, ShopVerse incorporates several specialized SwiftUI and iOS framework capabilities.
1. Skeleton Loading Shimmer Effect
Rather than displaying a generic activity indicator (ProgressView), ShopVerse uses a custom shimmer modifier during initial data fetches.
Visual Continuity: Placeholder wireframe cards matching the dimensions of actual product cards are rendered instantly.
Linear Gradient Wave: An animated gradient mask sweeps horizontally across the placeholder shapes, signaling active loading while maintaining visual context.
2. Tactile Feedback & Haptic Engine Integration
To make digital interactions feel physical, ShopVerse leverages the device's Taptic Engine via UIImpactFeedbackGenerator.
Action Reinforcement: Tapping the Add to Cart button, toggling a wishlist heart icon, or confirming a checkout step triggers precise physical haptic ticks, increasing user confidence during interactions.
3. Query Debouncing using the Combine Framework
Unrestrained search fields can send dozens of unnecessary database queries while a user types, causing performance lag and inflated database read costs.
The Debounce Pattern: Utilizing Combine's .debounce(for: .milliseconds(300)) operator, search queries are held in a reactive pipeline.
Cost Optimization: Database search requests are only fired after the user pauses typing for at least 300 milliseconds, dropping all intermediate keystroke queries.
4. Administrative Data Visualization via Swift Charts
The integrated Admin Portal transforms raw Firestore sales data into actionable visual insights using Apple's native Charts framework.
Real-time Metrics: Aggregated sales figures, daily order totals, and revenue metrics are compiled into interactive bar charts and line graphs, allowing store managers to assess revenue trends dynamically.
FirebaseSwiftecoomerceData VisualizationUI DesignUX DesignVisual Studio Code
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started