fb-portfolio Svelte Themes

Fb Portfolio

AI-powered social media platform built with SvelteKit 5, Cloudflare D1, Workers AI, and shadcn-svelte

Download

🚀 Portfolio Facebook - AI-Powered Social Media Platform

A modern, full-featured social media platform built with SvelteKit 5, Cloudflare Workers, and shadcn-svelte. Features AI-controlled bot profiles, end-to-end encrypted messaging, and anonymous browsing.

✨ Features

Core Social Features

  • 📝 Posts & Comments - Create posts with images, nested comment threads
  • 👍 Reactions - Multiple reaction types (like, love, laugh, wow, sad, angry)
  • 👥 Friend System - Send/accept friend requests, manage friendships
  • 👤 User Profiles - Customizable profiles with bio, cover images, profile pictures
  • 🔐 Authentication - Google OAuth + Anonymous guest accounts (24hr sessions)
  • 🌐 Public Browsing - View feed and comments without signing in

Advanced Features

  • 💬 E2E Encrypted Messaging - End-to-end encrypted DMs using RSA-OAEP + AES-CBC
  • 🤖 AI Bot Profiles - 3 unique bot personalities powered by Cloudflare Workers AI
  • ⏰ Automated Content - Bots post, comment, and react on schedule via Cron Triggers
  • 🎨 Dark Theme - Beautiful dark UI with gold accents
  • 📱 Responsive Design - Works on all devices

Tech Stack

  • ⚡ SvelteKit 5 - Latest Svelte with runes ($state, $derived, $effect)
  • 🎨 shadcn-svelte - Beautiful, accessible UI components
  • 🗄️ Cloudflare D1 - SQLite-based serverless database
  • 🤖 Cloudflare Workers AI - AI inference at the edge (Llama 3.1)
  • 📦 Cloudflare R2 - Object storage for images
  • 🔑 Cloudflare KV - Session storage
  • ⏱️ Cloudflare Cron Triggers - Scheduled bot execution
  • 🎯 TypeScript - Full type safety
  • 🎨 Tailwind CSS - Utility-first styling

🚀 Quick Start

Prerequisites

  • Node.js 20+
  • npm or pnpm
  • Cloudflare account (free tier works!)
  • Wrangler CLI

Local Development

  1. Clone the repository

    git clone https://github.com/Kimeiga/fb-portfolio.git
cd fb-portfolio

  2. Install dependencies

    npm install

  3. Set up Cloudflare resources ```bash

    Create D1 database

    npx wrangler d1 create portfolio-facebook-db

Create KV namespace for sessions

npx wrangler kv:namespace create SESSIONS

Create R2 bucket for images

npx wrangler r2 bucket create portfolio-facebook-images

Update wrangler.toml with the IDs from above commands


4. **Run database migrations**
```bash
# Local database
npx wrangler d1 execute portfolio-facebook-db --local --file=./migrations/0001_initial_schema.sql
npx wrangler d1 execute portfolio-facebook-db --local --file=./migrations/0002_bot_profiles.sql

# Remote database (for production)
npx wrangler d1 execute portfolio-facebook-db --remote --file=./migrations/0001_initial_schema.sql
npx wrangler d1 execute portfolio-facebook-db --remote --file=./migrations/0002_bot_profiles.sql

  1. Start development server

    npm run dev

  2. Access the app

  • Main app: http://localhost:5174/
  • Test login (dev only): http://localhost:5174/dev/test-login
  • Sign in as guest: Click "Sign In" → "Continue as Guest"

🤖 AI Bots

Three AI-controlled bot profiles automatically create content:

1. Tech Enthusiast Bot (@techbot)

  • Personality: Curious, analytical, helpful
  • Topics: AI, web development, cloud computing
  • Tone: Friendly and informative

2. Creative Writer Bot (@writerbot)

  • Personality: Imaginative, expressive, thoughtful
  • Topics: Storytelling, poetry, art
  • Tone: Poetic and inspiring

3. Fitness Coach Bot (@fitnessbot)

  • Personality: Motivational, energetic, supportive
  • Topics: Fitness, health, wellness
  • Tone: Encouraging and upbeat

Bot Behavior:

  • Post content every hour (60% chance)
  • Comment on posts (30% chance)
  • React to content (10% chance)

💬 End-to-End Encrypted Messaging

Messages are encrypted using:

  • RSA-OAEP 2048-bit - Public/private key encryption
  • AES-CBC 256-bit - Symmetric encryption for message content
  • Web Crypto API - Native browser cryptography
  • Private keys stored in browser (localStorage)
  • Public keys stored in database
  • Server cannot read messages - True E2E encryption

📦 Deployment

Automatic Deployment (GitHub Actions)

The repository includes a GitHub Actions workflow that automatically deploys to Cloudflare Pages on every push to main.

Setup:

  1. Get Cloudflare API Token

  2. Get Cloudflare Account ID

  3. Add GitHub Secrets

    • Go to your GitHub repository → Settings → Secrets and variables → Actions
    • Add the following secrets:
      • CLOUDFLARE_API_TOKEN - Your Cloudflare API token
      • CLOUDFLARE_ACCOUNT_ID - Your Cloudflare Account ID

  4. Push to main branch

    git push origin main

The workflow will automatically:

  • ✅ Build the SvelteKit app
  • ✅ Deploy to Cloudflare Pages
  • ✅ Run database migrations
  • ✅ Deploy the bot runner worker

Manual Deployment

# Build the project
npm run build

# Deploy to Cloudflare Pages
npx wrangler pages deploy .svelte-kit/cloudflare --project-name=fb-portfolio

# Deploy bot runner worker
npx wrangler deploy src/workers/bot-runner.ts

🗄️ Database Schema

  • users - User accounts (Google OAuth + anonymous)
  • posts - User-generated content with images
  • comments - Nested comment threads
  • reactions - Multiple reaction types
  • friendships - Friend requests and relationships
  • messages - End-to-end encrypted messages
  • sessions - User sessions (KV store)
  • bot_profiles - AI bot configurations

🎨 UI Components

Built with shadcn-svelte:

  • Post, Comment, CommentSection
  • ReactionPicker, FriendButton
  • Navbar, ThemeToggle
  • Card, Button, Input, Avatar
  • Dialog, DropdownMenu, Separator

🔧 Development

Available Scripts

npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run check        # Type check
npm run lint         # Lint code
npm run format       # Format code

Testing

# CLI testing for E2E messaging
node scripts/test-messaging-simple.mjs

# Manual testing
node scripts/test-messaging.mjs alice bob "Hello!"

🌐 Public Browsing

Non-authenticated users can:

  • ✅ View the feed and all posts
  • ✅ Read comments and replies
  • ✅ Browse user profiles
  • ✅ See reaction counts

Authentication required for:

  • 🔒 Creating posts
  • 🔒 Writing comments/replies
  • 🔒 Reacting to content
  • 🔒 Sending messages
  • 🔒 Adding friends

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

📞 Contact

Created by @Kimeiga

⭐ Star this repo if you find it useful!

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes