ShipFast Architecture Diagram

This diagram represents the architecture of the ShipFast template, showing interactions between key services such as the front-end interface, CDN, Cloud Functions, Stripe, Mailgun, Firebase, and more. Below is the diagram illustrating the system's architecture:

Here's how it works:

1. Users (Clients)

End-users interacting with the system through a front-end interface, typically hosted on Vercel.
How it works: The front-end interface interacts with various backend services. Users can view information, sign up, make payments, and interact with the app's features.

2. CDN (Vercel)

The network that serves the static assets of your SaaS application (e.g., HTML, CSS, JavaScript).
How it works: Vercel's CDN optimizes the delivery of static files globally, ensuring faster load times by caching assets closer to the user's location. This helps in reducing the delay when users request static content.

3. Serverless Function (Vercel)

A stateless, cloud-based backend function that handles dynamic requests and manages interactions within the ShipFast.

How it works:
The serverless function serves as a bridge between the front-end and backend services in the ShipFast. It processes API requests, communicates with external services like Stripe for payments, Mailgun for emails, and Firestore for data storage. The primary tasks it handles in the ShipFast include:

1. Subscription routes: Specific routes for handling subscription-related actions, such as initiating checkout sessions or updating subscription details. These routes interact with Stripe to process payments and manage user subscriptions.

2. Email routes: Routes are created to send transactional or notification emails through Mailgun. For example, confirmation emails are sent when a user registers or when a payment is successfully processed.

3. Stripe webhook routes: The serverless function includes routes to process Stripe webhook events. These webhooks notify the backend about events like successful payments, subscription changes, or billing updates. The serverless function uses these events to sync data with Firestore and trigger appropriate actions.

By handling these interactions, the serverless function enables the ShipFast to manage user subscriptions, payments, notifications, and data updates efficiently.

4. Payment Processor (Stripe)

Stripe securely handles user payments, subscription management, and billing information.

How it works:

1. Payment initiation: The front-end application triggers the payment process, and Stripe securely processes the transaction, including handling user payment details.

2. API route interaction and syncing subscription details: After a payment or subscription update, Stripe sends an event notification to the serverless function at the /api/stripe/events route. This route is responsible for both receiving the event and syncing the subscription summary details from Stripe to the backend. It updates Firestore with important information such as payment status, subscription plans, renewal dates, and billing details.

3. Webhook notifications: Stripe uses webhooks to notify the backend of events such as successful payments, subscription updates, or billing cycle changes. The /api/stripe/events route processes these events and triggers further actions as needed.

4. Triggering further actions: After syncing the subscription details in Firestore, the serverless function can trigger additional actions, such as sending confirmation emails via Mailgun or executing other workflows based on the updated subscription status.

5. Email Service (Mailgun)

Mailgun is an email service used for sending automated transactional and notification emails to users.

How it works:
Mailgun sends emails based on specific triggers set within the system, which are activated by Cloud Firestore Triggers. These triggers cause Mailgun to send relevant emails to users at key points in their interaction with the platform. Some examples of these triggers include:

• Changes in subscription plans: When a user's subscription plan is updated (such as a change in price or plan details), this change is reflected in the Firestore subscription document. A Firestore trigger detects this change and automatically sends an email notifying the user about the update.
• Successful payment processing: When a payment is successfully processed (e.g., when a new billing cycle is updated or when a subscription is renewed), the system updates the subscription document in Firestore to reflect this. A Firestore trigger then activates, and Mailgun sends a confirmation email to the user to confirm the successful payment and subscription renewal.
• New user registration: When a new user successfully creates an account, a Firestore trigger detects this event and sends a welcome or confirmation email through Mailgun, notifying the user that their registration was successful.

These triggers ensure that the system communicates essential updates to users automatically at the right time, improving user experience and engagement.

6. Firestore NoSQL Database (Firebase)

A flexible database that stores structured data in documents and collections (e.g., users, subscriptions, payment information).
How it works: Data, such as user accounts, subscriptions, and payment history, is stored in Firestore. Firestore provides real-time synchronization, which helps in keeping data up-to-date across multiple users.

7. Cloud Firestore Triggers (Firebase)

Automated functions that respond to events in the Firestore database (e.g., updates, new entries).
How it works:

• For example, when a user's subscription is updated in Firestore (like changing the plan or price), a trigger could automatically invoke a Cloud Function to send an email to the user notifying them of the change.
• Similarly, when Stripe processes a successful payment and updates Firestore, another Firestore trigger can trigger an email notification (via Mailgun) to confirm the payment.

8. Cloud Storage (Firebase)

Firebase Cloud Storage is used to store and serve user-uploaded content, such as profile photos.

How it works:
In the ShipFast, Cloud Storage is specifically used to store user profile photos. This provides a secure and scalable solution for handling image uploads.

• Profile photo uploads: Users can upload their profile photos directly from the front-end, and these images are securely stored in Firebase Cloud Storage.