Transform Reddit into an infinite scroll video experience with intelligent AI search
Next.js TypeScript Prisma React License: MIT
Features โข Screenshots โข Quick Start โข Tech Stack
Natural language queries powered by Ollama LLM with intelligent rule-based fallback
Virtual 3-slot DOM window โ swipe changes only CSS translateY. No unmount, no refetch, no rebuffer.
Full Reddit video playback with tuned buffer lengths: 30s active, 8s preload
Save and organize favorite reels with tags and collections
JWT sessions with bcrypt encryption and role-based access control
Service worker caches last 10 viewed reels โ instant load on slow or no connection
Age-gated adult content with 500+ subreddit coverage
User management, analytics, and content moderation
Node.js 18+ | npm | PostgreSQL 14+ | Ollama (optional)
# Clone the repository git clone https://github.com/tarunkumar-sys/next_llm.git cd next_llm # Install dependencies npm install # Setup environment cp .env.example .env.local # Edit .env.local with your configuration # Initialize database (PostgreSQL required) npx prisma generate npx prisma db push # Start development server npm run dev
Visit http://localhost:3000 ๐
Create .env.local in the root directory:
# Authentication (Required) AUTH_SECRET=your-secret-key-here # Generate: npx auth secret DATABASE_URL=postgresql://user:pass@host:5432/db?sslmode=require # Reddit API (Optional - improves rate limits) REDDIT_CLIENT_ID=your-client-id REDDIT_CLIENT_SECRET=your-client-secret # AI Features (Optional) OLLAMA_URL=http://localhost:11434 OLLAMA_MODEL=llama3.2
๐ Getting Reddit API Credentials
- Go to reddit.com/prefs/apps
- Click "Create App" or "Create Another App"
- Select "web app"
- Set redirect URI to
http://localhost:3000 - Copy your client ID and secret
reddit-reel-ai/
โโโ app/
โ โโโ api/
โ โ โโโ reddit/ # Reddit content fetcher + personalization
โ โ โโโ interpret/ # AI query interpreter (Ollama)
โ โโโ actions/
โ โ โโโ auth.ts # Register / login server actions
โ โ โโโ db.ts # SavedReel / Note / Board CRUD
โ โ โโโ admin.ts # Admin operations
โ โโโ admin/ # Admin dashboard
โ โโโ dashboard/ # User dashboard
โ โโโ _landing.tsx # Landing page
โโโ components/
โ โโโ ReelFeed.tsx # Virtual 3-slot reel window + HLS.js
โ โโโ ChatPanel.tsx # AI search interface
โ โโโ Notepad.tsx # Saved reels manager
โ โโโ LoginModal.tsx # Auth modal
โ โโโ ...
โโโ lib/
โ โโโ feedEngine.ts # Weighted round-robin feed algorithm
โ โโโ ...
โโโ prisma/
โ โโโ schema.prisma # PostgreSQL schema
โ โโโ migrations/
โโโ public/
โ โโโ sw.js # Service worker (10-reel LRU cache)
โ โโโ manifest.json # PWA manifest
โ โโโ demo_img/
โโโ next.config.ts # next-pwa + security headers
โโโ next-pwa.d.ts # Type shim for next-pwa
Only 3 <video> elements ever exist in the DOM. On swipe, only CSS translateY changes โ no component unmount, no network request, no HLS.js reinit. Zero-lag swipe at any speed.
- Active slot:
maxBufferLength: 30s,maxMaxBufferLength: 60s - Preload slots:
maxBufferLength: 8s - HLS instance reused across swipes โ destroyed only when the URL changes
Query in natural language: "Show me funny cat videos" โ Ollama interprets โ fetches from 2000+ subreddits
Two-tier system:
- Ollama LLM โ Advanced natural language understanding
- Rule-based fallback โ Always available, regex-based matching
- Weighted round-robin for subreddit variety
- Personalization weights from watch history (last 200 events)
startTransitionbackground prefetch when user is 5 reels from end
Service worker at /sw.js caches:
- App shell (JS/CSS/fonts) โ CacheFirst, long TTL
- Last 10 viewed reels media โ LRU eviction, instant revisit
/api/redditJSON โ NetworkFirst with stale fallback
- ๐ JWT Authentication with HttpOnly cookies
- ๐ bcrypt Password Hashing (10 rounds)
- ๐ก๏ธ HTTP Security Headers (X-Frame-Options, nosniff, XSS-Protection)
- ๐ฎ Role-Based Access Control (USER / ADMIN)
- ๐ซ API Route Protection with server-side auth guards
- ๐ Input Validation on all server actions
- ๐ Row-level data isolation via
userIdfiltering - โ All security is server-side โ no client-side DevTools blocking
npm run dev # Start development server npm run build # Build for production npm start # Start production server npm run lint # Run ESLint npm run seed # Seed admin user npx prisma studio # Open database GUI npx prisma db push # Push schema to PostgreSQL npx prisma generate # Regenerate Prisma Client
Deploy to Vercel
- Push your code to GitHub
- Import project in Vercel
- Add environment variables (see SYSTEM.md)
- Deploy โ Vercel auto-detects
NEXTAUTH_URL, do NOT set it manually
See DEPLOYMENT.md for detailed instructions.
Docker Deployment
# Build image docker build -t reddit-reel-ai . # Run container docker run -p 3000:3000 --env-file .env reddit-reel-ai
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Reddit API for content delivery
- Ollama for local AI capabilities
- HLS.js for robust video streaming
- Next.js Team for the amazing framework
- Vercel for hosting platform
Made with โค๏ธ by Tarun Kumar
โญ Star this repo if you find it useful!
Report Bug โข Request Feature โข Documentation