The B-Roll Marketplace (Overview)

VibeTagz is a modern e-commerce storefront created for social media creators, editors, and advertisers who need top-tier video assets. Built on a stack of React, FastAPI, SQLModel, and PostgreSQL, it offers high-speed browsing and a checkout experience that takes under a second.

Beyond purchasing off-the-shelf video packages, creators can order customized, location-specific, or car-specific footage tailored to their exact specifications.

Here is a visual map of the VibeTagz checkout, caching, and custom fulfillment workflows:

Rendering diagram...

Fuelling the Creator Economy (Vision)

Today’s content economy runs on eye-catching vertical videos. However, many content creators struggle to find high-resolution, aesthetically matching B-roll footage.

VibeTagz solves this bottleneck by establishing a digital catalog where creators can buy bundles of premium, theme-focused clips (like luxury cars, urban lifestyles, cafe aesthetics, and travel flights) with instant delivery.

---

The E-Commerce Engine (How It Works)

VibeTagz is split into three main flows that tie the frontend, backend database, and payment systems together seamlessly:

1. Instant Digital Delivery (The Fast Path)

When a customer purchases a standard video pack:

• Redis Caching: The product listings and details are cached via Upstash Redis to avoid hitting the PostgreSQL database repeatedly, guaranteeing page loads under 1 second.
• Payment Verification: The checkout uses the Razorpay API. When a payment is made, the signature is verified asynchronously on the backend.
• Automated Fulfillment: The order status changes to paid. In the background, FastAPI-Mail compiles a dynamic PDF invoice and instantly emails it along with direct download links to the customer.

2. Custom Video Builder (The Tailored Path)

For categories like "Cars", creators often need specific clips. VibeTagz features a custom order wizard:

• Persistent State: If the user refreshes or changes pages, their custom choices are saved locally using a Zustand state store.
• Flexible Checkout: Custom options (car model, region, clip pack sizes, and descriptions) are sent to the backend and integrated with the checkout process.
• Admin Alerting: When payment is verified, the order is marked as requested. The server emails the user a confirmation explaining that their order is in progress, and immediately alerts the admin with the exact specifications for custom delivery via Google Drive.

3. Secure Admin Panel (The Command Center)

The admin panel is built for managing products, tracking sales, and helping users.

• 2FA Security: To secure sensitive operations, Admin logins are protected by Google Authenticator-compatible TOTP (Time-based One-Time Password) verification.
• Global Toggles: Admins can instantly toggle discount coupons or manage site-wide settings directly from the dashboard.
• Support System: Customers can submit queries using a built-in support module. Each query is assigned a short, unique code (e.g., tkvbtgC1A9D4). Admins can sort, filter, and update these support tickets directly from their dashboard.

The Architecture Blueprint (Tech Stack)

• Frontend: React, Vite, Tailwind CSS, and Shadcn UI. Animations are handled by GSAP and Framer Motion, coupled with Lenis for smooth kinetic scrolling.
• Backend: FastAPI, SQLModel (SQLAlchemy ORM), and PostgreSQL database.
• Caching: Upstash Redis for database query caching (flushed automatically on updates).
• Payments: Secure Razorpay Gateway integration.
• Security: JWT token-based authentication and TOTP 2FA.
• Emails: FastAPI-Mail using secure connection properties.

---

Tackling Latency & Temporary Assets (Challenges)

Dynamic Invoice Generation & Cleanup

Challenge: Generating PDF invoices on the fly consumed server memory, and storing files permanently wasted disk space. Solution: Invoices are created inside a temporary server directory, returned as a streaming FileResponse, and immediately deleted using a FastAPI background thread hook (background_tasks.add_task).

High Traffic Page Speed

Challenge: Database queries for dozens of large video assets can slow down page loading times. Solution: Implementing Upstash Redis database caching for FAQ lists, testimonials, and active products. All cached collections are systematically flushed whenever an admin edits or deletes a model, keeping the website perfectly in sync.

---

Empowering Visual Creators (Conclusion)

VibeTagz shows how a modern full-stack application can combine high-performance database design, secure payment automation, and tailored features to make digital commerce fast, delightful, and highly custom for content creators.