RareLootVault - SvelteKit + Convex Marketplace

A modern gaming marketplace built with SvelteKit and Convex, featuring secure escrow payments via Stripe.

🚀 Tech Stack

• Frontend: SvelteKit + TypeScript
• Styling: Tailwind CSS v3
• Backend: Convex (realtime database)
• Payments: Stripe
• Auth: Auth.js (to be integrated)

✅ Completed Features

Pages

• ✅ Sign In (/auth/signin)
• ✅ Sign Up (/auth/signup)
• ✅ Dashboard (/dashboard)
• ✅ Browse Listings (/listings)
• ✅ Listing Detail (/listings/[id])
• ✅ Create Listing (/listings/new)
• ✅ Profile (/profile)

Components

• ✅ Sidebar navigation
• ✅ Button component
• ✅ Input component
• ✅ Stat Card component
• ✅ Listing Card component

Backend (Convex)

• ✅ Database schema (users, listings, transactions, reviews)
• ✅ CRUD functions for listings
• ✅ User management functions
• ✅ Transaction handling functions

Design System

• ✅ All CSS variables from .pen design
• ✅ Color palette (dark theme)
• ✅ Typography (Inter font)
• ✅ Border radius tokens
• ✅ Game-specific colors (COD, Fortnite, Minecraft)

🚧 To-Do

High Priority

• Set up Convex authentication
• Integrate Stripe payments
• Implement file upload for listing images
• Connect frontend to Convex backend
• Add form validation
• Implement real-time updates

Additional Pages

• Verify Email page
• Auth Error page
• Transaction Success page
• System Health Dashboard (admin)
• Messages page
• Wallet page
• Settings page

Features

• Search functionality
• Filtering and sorting
• Wishlist
• Reviews system
• Messaging between users
• Admin panel
• Email notifications

🛠️ Setup Instructions

1. Install Dependencies

```bash npm install ```

2. Set up Convex

1. Sign up at convex.dev
2. Run the Convex setup: ```bash npx convex dev ```
3. Follow the prompts to create a new project
4. Copy the deployment URL to .env.local: ``` VITE_CONVEX_URL=https://your-deployment.convex.cloud ```

See CONVEX_SETUP.md for detailed instructions.

3. Set up Stripe

1. Get your Stripe keys from stripe.com/dashboard
2. Add to .env.local: ``` VITE_STRIPE_PUBLISHABLE_KEY=pk_test_... STRIPE_SECRET_KEY=sk_test_... STRIPE_WEBHOOK_SECRET=whsec_... ```

4. Run Development Server

```bash npm run dev ```

Visit http://localhost:5173

📁 Project Structure

``` src/ ├── lib/ │ ├── components/ # Reusable UI components │ │ ├── Button.svelte │ │ ├── Input.svelte │ │ ├── Sidebar.svelte │ │ ├── StatCard.svelte │ │ └── ListingCard.svelte │ └── convex.ts # Convex client setup ├── routes/ │ ├── auth/ │ │ ├── signin/ # Sign in page │ │ └── signup/ # Sign up page │ ├── dashboard/ # User dashboard │ ├── listings/ # Listings pages │ │ ├── [id]/ # Listing detail │ │ └── new/ # Create listing │ ├── profile/ # User profile │ └── +layout.svelte # Root layout └── app.css # Global styles & design tokens

convex/ ├── schema.ts # Database schema ├── listings.ts # Listing queries/mutations ├── users.ts # User queries/mutations └── transactions.ts # Transaction queries/mutations ```

🎨 Design System

Colors

• Primary: --accent-primary (#6366F1)
• Secondary: --accent-secondary (#22D3EE)
• Background: --bg-primary, --bg-secondary, --bg-tertiary
• Text: --text-primary, --text-secondary, --text-muted
• Game Colors: --game-cod, --game-fortnite, --game-minecraft

Typography

• Font: Inter (Google Fonts)
• Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)

Border Radius

• sm: 8px
• md: 12px
• lg: 16px
• full: 9999px

🔐 Security Features

• Email verification (to be implemented)
• Two-factor authentication (to be implemented)
• Escrow payment system
• Secure file uploads
• Rate limiting
• Audit logs

📝 License

Private - All rights reserved