Core Requirements (TED-like website)
Design, very much like Ted.com, but in our blue.
I cant find a template on next, but i what a Clean, fast UI similar to ted.com
1. Frontend (React/Next.js + Tailwind)
Home page: featured videos, categories
Video page:
- Vimeo embed
- Transcript viewer (currently this follows a AI DS
Call that reads the vimeo transcript) ** we want to improve this.
- sidebar of related videos
Searchable tags / categories
Async page loading
Fully responsive
2. Content Management / Video Hosting
Videos hosted on Vimeo (use their API to fetch thumbnails, metadata, transcripts)
Static/dynamic generation of video pages from a JSON/DB/API - we have cloudflare CDN
3. User Access System
IP-based Access (e.g., for university/library users)
Use reverse proxy or edge logic (e.g. Cloudflare Workers) to match IPs
SSO Integration
SAML 2.0 or OAuth2 (Azure AD, Google, Shibboleth, etc.)
Non Inst: Login w/ email + password (optional)
Subscription System
Stripe or Paddle for paywall access
Role-based access to free vs paid videos
Guest view system, 4 free views pm then referred to sign up page
4. Backend (if needed)
API for:
Checking IP range access
User authentication (JWT or SSO)
Serving transcript + AI summary
Tech: FastAPI, Flask, or even Node.js (if JS-only)
5. Admin Dashboard (Phase 2)
Upload new video metadata (or pull from Vimeo)
Tag, edit, assign access levels |
