Oxygen - TikTok Clone

A modern, addictive TikTok clone with AI-powered recommendations, built with Next.js, TypeScript, and Pyodide.

🚀 Features

• 🎥 Vertical Video Feed - Smooth infinite scroll with swipe gestures
• 🤖 AI-Powered Recommendations - Python algorithm running in browser via Pyodide
• 🎨 Modern UI - Minimal, bold, and highly addictive design
• ⚡ Real-Time Data - Integrated with TikTok API using TikTok-Api and insights from reverse-engineered source
• 📱 Mobile-First - Optimized for mobile and desktop
• 🔄 Pull-to-Refresh - Native-like mobile experience
• 🎯 Personalized Feed - Adapts to user behavior in real-time

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐
│  Next.js Frontend (Vercel)                             │
│  - React + TypeScript                                   │
│  - Tailwind CSS + Framer Motion                        │
│  - Pyodide (Python in Browser)                         │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│  TikTok API Integration                                 │
│  - TikTok-Api library approach                          │
│  - Reverse-engineered source insights                   │
│  - Real-time video data                                 │
└─────────────────────────────────────────────────────────┘

🛠️ Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS, Framer Motion
• Algorithm: Python (Pyodide) - runs in browser
• API: Next.js API Routes
• Hosting: Vercel (free tier)
• CDN: jsdelivr (Pyodide runtime)

📦 Installation

# Clone repository
git clone https://github.com/xazalea/oxygen.git
cd oxygen

# Install dependencies
cd web
npm install

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

🔧 Configuration

Environment Variables

Create .env.local in the web/ directory:

# Optional but recommended for better rate limits
TIKTOK_MS_TOKEN=your_tiktok_ms_token_here

# Google Photos Storage Integration
GOOGLE_PHOTOS_CLIENT_ID=your_client_id_here
GOOGLE_PHOTOS_CLIENT_SECRET=your_client_secret_here
GOOGLE_PHOTOS_REFRESH_TOKEN=your_refresh_token_here
GOOGLE_PHOTOS_DEVICE_MODEL=Pixel XL

Getting TikTok Token

1. Go to tiktok.com and log in
2. Open browser developer tools (F12)
3. Go to Application/Storage → Cookies → tiktok.com
4. Find ms_token cookie and copy its value

Google Photos Integration

1. Go to Google Cloud Console
2. Create a project and enable "Photos Library API"
3. Create OAuth credentials (Client ID & Secret) with redirect URI: http://localhost:3000/api/storage/google-photos/callback (or your production URL)
4. Navigate to /api/storage/google-photos/auth in your browser to authorize and get your GOOGLE_PHOTOS_REFRESH_TOKEN
5. Add credentials to .env.local

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push code to GitHub:

   ./publish.sh

2. Go to vercel.com

3. Import your GitHub repository

4. Configure:

   • Root Directory: web
   • Framework: Next.js (auto-detected)

5. Set environment variable TIKTOK_MS_TOKEN (optional)

6. Deploy!

See DEPLOYMENT.md for detailed instructions.

📚 Documentation

• Deployment Guide - Complete deployment instructions
• TikTok Integration - API integration details
• Production Migration - Migration from mock data

🎯 Key Components

Frontend

• VideoFeed.tsx - Main vertical scrolling feed
• VideoPlayer.tsx - Full-screen video player
• RecommendationEngine.tsx - Pyodide integration wrapper
• UI/ - Reusable UI components

API Routes

• /api/trending - Get trending videos
• /api/video/[id] - Get video by ID
• /api/interaction - Record user interactions
• /api/health - Health check

Algorithm

• algorithm_core.py - Core recommendation logic
• ranking.py - Ranking algorithms
• user_model.py - User representation

🔗 Resources

• TikTok-Api: davidteather/TikTok-Api
• TikTok Source: huaji233333/tiktok_source
• Pyodide: pyodide.org

🎨 Design Principles

• Minimal: Clean, uncluttered interface
• Modern: Smooth animations, glassmorphism effects
• Bold: High contrast, vibrant colors, strong visual hierarchy
• Addictive: Infinite scroll, instant feedback, haptic-like interactions

📝 License

See LICENSE file for details.

🙏 Acknowledgments

• TikTok-Api for TikTok data access
• huaji233333/tiktok_source for reverse-engineered insights
• Pyodide for Python in the browser

🚧 Roadmap

• User authentication
• Video upload
• Social features (follow, comments)
• Advanced algorithm optimizations
• Analytics dashboard

🤝 Contributing

Contributions welcome! Please open an issue or submit a pull request.

---

Built with ❤️ using Next.js, TypeScript, and Pyodide