0x7b MDX Storefront

🚀 0x7b MDX Storefront Setup Guide

This guide will help you get your boutique digital shop up and running in minutes. The 0x7b MDX Storefront is designed for builders who want to own their platform without the complexity of traditional e-commerce.

1. Local Development

To begin, clone your private repository, install the dependencies, and start the development server:

bun install
bun dev

Open http://localhost:3000 in your browser. Any changes you make to your MDX files will show up instantly.

2. Environment Variables

Your shop needs a few settings to handle payments, auth, and data. Rename .env.example to .env in your root folder and fill in these details:

Google OAuth (Sign-In)

This allows your customers to log in securely with their Google account.

  1. Go to the Google Cloud Console.
  2. Create a new project and go to APIs & Services > Credentials.
  3. Create an OAuth 2.0 Client ID for a "Web application."
  4. Add http://localhost:3000 to Authorized JavaScript origins.
  5. Add http://localhost:3000/api/auth/callback/google to Authorized redirect URIs.
  6. Copy your Client ID and Client Secret to your .env.

Neon PostgreSQL (Your Database)

We use Neon for a fast, serverless database.

  1. Create a free account at Neon.tech.
  2. Create a new project and copy your Connection String.
  3. Paste it as DATABASE_URL in your .env.

Auth Secret

You need a secret key to keep your login sessions safe.

npx auth secret

Copy that random string to BETTER_AUTH_SECRET in your .env.

3. Setting Up the Database

Once your .env is ready, you need to create the tables where your shop will store user data.

Authentication Tables

Run these commands in your terminal to set up the user login tables:

npx auth generate
npx auth migrate

Your Product Tables

Paste the contents of your schema.sql file into the Neon Console SQL Editor and click Run. This creates the tables for memberships and access.

4. How to Add Products

You don't need to touch the database to add products. Everything is handled with MDX files in the content/ folder.

Step 1: Create the File

Create a new file at content/[category]/your-product-name.mdx.

Step 2: Add the "Frontmatter"

At the very top of your file, add these details between the --- lines:

---
title: "Project Name"
description: "A short, clear description for SEO."
tagline: "A one-sentence hook to grab attention."
category: "Category"
from: "folder-name"          # MUST match the ID in lib/collections-index.ts
actionType: "Tool Type"      # e.g., "Python Bot" or "Next.js Template"
index: 1                     # Sorting order (1 = first)
tags: ["example", "demo"]
gumroadUrl: "https://..."    # Your Gumroad product link
gumroadProductId: "..."      # Found in your Gumroad product settings
isFree: false                # Set to 'true' to give it away for free
repoFullName: "owner/repo"   # Use this for automatic GitHub invites
githubUrl: "https://..."     # Link to the code for buyers
---

Note: The from field is important. It tells the shop which category page the product belongs to.

5. Registering Categories

When you create a new folder for a category, you must let the shop know it exists.

  1. Open lib/collections-index.ts.
  2. Add a new item to the collections list:
{
    id: "your-folder-name",    // Must match the 'from' field in your MDX
    title: "Category Title",
    tagline: "A short hook for this category.",
    description: "A detailed description of what's inside.",
    icon: "Monitor",           // Any Lucide icon name
    logo: "python",            // Any icon name from SimpleIcons.org
    slug: "your-category-url",
    group: 'primitives',       // Pick one: 'primitives', 'data-packs', 'resources'
},

The shop will automatically create a new page at /category/your-category-url and list all matching products.

6. Easy Downloads

You can give your customers direct downloads by adding two simple attributes to your code blocks in MDX:

### Example Code
```python title="myfile.py" download
print("Automated download ready.")
```

The engine will automatically bundle these files into a ZIP archive for your customers. No extra work required.