TopVibeCoder Feed

Discover, evaluate, and share cinematic AI demos in a TikTok-style feed. Upload HTML playgrounds, videos, or YouTube embeds, then let the local-first recommendation engine surface the best content via "For You"/"Latest" tabs.

Features

• Google / email-free viewing with local recommendation cache
• Upload single-file HTML demos or short-form videos
• Eval flow publishes scored demos straight into the feed
• Topic + category taxonomy with auto-detection
• Interest picker cold start & interaction-based ranking
• Profiles, follow, like, comment, share, and dark/light themes
• PWA-ready, responsive layout, IntersectionObserver autoplay

Tech Stack

Layer	Tooling
Framework	Next.js 15 + TypeScript
CMS	Sanity
Styling	Tailwind CSS + Headless UI
State	Zustand
Auth	NextAuth.js (Google OAuth 2.0)

Getting Started

git clone git@github.com:zwelhtetyan/tiktok-clone.git topvibecoder
cd topvibecoder
npm install

Remove the original remote if you plan to push elsewhere:

git remote remove origin

Environment Variables

Copy .env.example → .env.local and fill the following:

Variable	Description
SANITY_PROJECT_ID	e.g. 6xxk95yq
SANITY_TOKEN	Server token with write + asset scope
NEXT_PUBLIC_SANITY_API_VERSION	e.g. 2023-11-11
NEXTAUTH_SECRET	Any long random string
NEXTAUTH_URL	e.g. http://localhost:39432
NEXT_PUBLIC_ROOT_URL	optional; used for share links
GOOGLE_CLIENT_ID	OAuth client ID (see below)
GOOGLE_CLIENT_SECRET	OAuth secret

Google OAuth Setup

1. Open https://console.cloud.google.com/apis/credentials (select your project).
2. Configure the OAuth consent screen (app name, logo, scopes, test users).
3. Click Create Credentials → OAuth client ID → Web application.
4. Add the exact redirect URI you run locally, e.g.
   • http://localhost:39432/api/auth/callback/google
5. Create the client and copy the Client ID / Secret into .env.local.
6. Restart npm run dev:39432 (env vars are read at boot).

⚠️ Google requires that the redirect URI match exactly (scheme, host, port, path). HTTPS is not required on localhost, but it must be registered in the console.

Run the app

npm run dev:39432

The app defaults to http://localhost:39432. You can also run npm run dev to use port 3000, but remember to update NEXTAUTH_URL and the Google redirect URI accordingly.

Production build

npm run build
npm run start

Sanity Studio (Included)

cd sanity
npm install
npm run dev

• Studio served at http://localhost:3333
• In Sanity Manage → API add CORS origin http://localhost:39432
• Generate a token with at least Editor permissions and set as SANITY_TOKEN (never expose it via NEXT_PUBLIC_*).

Seeding HTML Demos

Import the official demos into Sanity:

SANITY_PROJECT_ID="6xxk95yq" SANITY_TOKEN="YOUR_TOKEN" node scripts/import-demos-to-sanity.mjs --limit 50

Deployment Notes

• Ensure NEXTAUTH_URL points to your deployed origin (https://topvibecoder.com).
• Register the production redirect URI with Google: https://topvibecoder.com/api/auth/callback/google.
• Run npm run build && npm run start or deploy via Vercel/Netlify with the same env vars.

Contributing

Issues and PRs are welcome. Before pushing:

npm run lint
npm run lint:type
npm run build

Author

• @xihajun
• @zwelhtetyan