Architecture & System Design

How the Barnyard Listing platform is structured, from the browser to the database.

Technology Stack

Frontend

React 18 + Vite, Tailwind CSS, shadcn/ui (Radix primitives), React Router. Data fetched via the Base44 SDK client and TanStack Query.

Backend

Base44 BaaS — managed auth, entities (NoSQL documents), and serverless functions on Deno. Shared logic lives in base44/shared/.

Integrations

Facebook Pages (OAuth connector) for auto-posting, Base44 Payments (Wix) for ad subscriptions, and Core AI (InvokeLLM) for image safety moderation.

Deployment

Single codebase published to web, iOS, and Android. Published at prime-agri-hub.base44.app with a connected custom domain.

Component Map

The app is organized into four layers:

1. Pages (src/pages/)

Route-level React components: Home, BrowseListings, ListingDetail, CreateListing, Dashboard, Advertise, Admin, Blog/BlogPost, About, Contact, SafetyTips, plus auth pages (Login, Register, ForgotPassword, ResetPassword).

2. Components (src/components/)

Reusable UI: Navbar, Footer, ScrollToTop, listing components (ListingCard, MegaMenu, SearchBar, ListingBadges, EditListingDialog, MessageOwnerDialog), ad components (AdBanner), admin components (BlogManager), and shadcn/ui primitives in src/components/ui/.

3. Backend functions (base44/functions/)

9 serverless HTTP handlers (see the Data Dictionary API reference). Each is an isolated Deno entry point that initializes a per-request SDK client.

4. Entities (base44/entities/)

JSON schema documents defining stored data: Listing, Inquiry, Advertisement, BlogPost, FacebookPost, and the built-in User.

Request & Data Flow

A typical listing-creation flow:

Browser (CreateListing.jsx)
  → base44.functions.invoke("create-listing", data)
    → create-listing/entry.ts
      → base44.auth.me()  (validates session)
      → validates + sanitizes user fields
      → base44.asServiceRole.entities.Listing.create({...})
      → returns { ok, id }
  → base44.functions.invoke("notify-admin", { action: "new_listing" })
    → notify-admin/entry.ts → emailAdmins()
  → navigate(/listing/:id)

Admin approval then triggers admin-portal → postListingToFacebook, which runs an AI safety check on the cover photo before posting to the Facebook page.

Security Model

Security is enforced at multiple layers so no single misconfiguration exposes user data.

Row-Level Security (RLS)

Every entity with PII declares an rls block. Listings and inquiries are owner-scoped; admin-only operations are gated on role === "admin". Public reads remain open for browse/search; writes are locked down.

Server-side field control

System-sensitive fields (approval_status, views, inquiries, fb_posted, discounted_price, created_by_id) are never accepted from the client. The create-listing and update-listing functions run as service role and set these exclusively. Direct SDK writes are blocked by RLS for non-admins.

Contact-info anchoring

A listing's contact_email is always the poster's verified account email, and contact_phone is always the poster's profile phone. Client-supplied values for these fields are ignored on both create and update — a poster can never list someone else's contact details.

Input sanitization

All user-controlled text injected into emails is stripped of CRLF, angle brackets, and control characters to prevent header splitting and HTML/phishing injection. External URLs (ad target_url) are validated to http/https schemes only, blocking javascript: and data: XSS.

Webhook verification

The Wix payments webhook verifies the RS256 JWT signature using WIX_PAYMENTS_WEBHOOK_PUBLIC_KEY before processing any event. Unsigned or tampered payloads return 401.

Admin-gated sensitive endpoints

create-checkout (ad purchase), admin-portal (all moderation), and the Facebook posting functions require role === "admin". The checkout redirect URL is built from a server-side env var, never caller-supplied headers, to prevent open redirect.

External Integrations

Facebook Pages (OAuth connector)

A shared platform OAuth connection (facebook_pages) with scopes pages_show_list, pages_manage_posts, pages_read_engagement. The shared fb-post.ts module retrieves a page access token, runs an LLM safety check on listing photos, and posts policy-safe messages (category + link only — no price or transactional language).

Base44 Payments (Wix)

Subscription checkout for ad banners. create-checkout builds a Wix checkout session; the wix-payments-webhook confirms payment and advances the ad to review. Subscription cancellation/expiry marks the ad expired. See the Integration Guides page for the full lifecycle.

Core AI (InvokeLLM)

Used for image safety moderation before Facebook posting — analyzing listing photos for nudity, violence, or cruelty and reverting to a branded graphic if flagged.

Design principle

The platform is referred to as an advertising platform, not a marketplace or broker, in all user-facing copy. BarnyardListing.com is not a party to any transaction — this is reflected in the listing agreement, safety tips, and footer disclaimers.