Fakultet za AI
Production-oriented MVP for a bilingual Serbian/English AI education platform built with Next.js App Router, Convex/Auth, Stripe Billing, Mux Video, GSAP, Motion, and Tailwind CSS.
Routes
/sr and /en: localized marketing pages./sr/sign-in and /en/sign-in: Convex Auth sign-in and registration./sr/app and /en/app: student dashboard./sr/app/courses/[courseSlug]/lessons/[lessonSlug]: protected lesson player for a selected course./sr/app/community: student community board./sr/app/profile: profile surface./sr/app/billing: subscription management entrypoint./sr/admin: admin workbench shell./api/stripe/webhook and /api/mux/webhook: raw-body webhook endpoints.
Local setup
npm install
copy .env.example .env.local
npx convex dev
npm run convex:auth
npm run convex:admin-env
npm run convex:oauth
npm run convex:seed
npm run dev
npx convex dev creates or links the Convex deployment and fills CONVEX_DEPLOYMENT / NEXT_PUBLIC_CONVEX_URL. The app intentionally renders a setup state when Convex is not configured, so local UI work can continue before live services are connected.
npm run convex:auth generates the Convex Auth RS256 key material and sets SITE_URL, JWT_PRIVATE_KEY, and JWKS in the active Convex deployment.
npm run convex:admin-env copies INITIAL_ADMIN_EMAILS from .env.local into the active Convex deployment. Editing .env.local alone does not update Convex backend authorization.
npm run convex:oauth sets OAuth provider credentials on the active Convex deployment. Use the production variants below for the production deployment.
npm run convex:seed creates the initial video/audio and websites course records in Convex (idempotent; safe to re-run). It does not use Stripe. Add -- --dry-run to print the plan without writing. For production it is guarded: npm run convex:seed -- --prod prints the plan and stops; npm run convex:seed -- --prod --yes actually writes (it reads WEBHOOK_SYNC_SECRET from the prod Convex env and targets the prod deployment, overridable with -- --prod --url https://<deployment>.convex.cloud --yes).
Required services
Convex:
npx convex dev
npm run convex:auth
npx convex env set AUTH_SECRET "<random-secret>"
npx convex env set AUTH_RESEND_KEY "<resend-api-key>"
npx convex env set AUTH_RESEND_FROM "Nauci AI <[email protected]>"
npx convex env set WEBHOOK_SYNC_SECRET "<same-value-as-env-local>"
npm run convex:admin-env
npm run convex:oauth -- --google-id "<google-client-id>" --google-secret "<google-client-secret>" --skip-apple
For production, configure the production Convex deployment:
npm run convex:auth:prod
npx convex env --prod set AUTH_SECRET "<random-secret>"
npx convex env --prod set AUTH_RESEND_KEY "<prod-resend-api-key>"
npx convex env --prod set AUTH_RESEND_FROM "Nauci AI <[email protected]>"
npx convex env --prod set WEBHOOK_SYNC_SECRET "<same-value-as-vercel>"
npm run convex:admin-env:prod
npm run convex:oauth:prod -- --google-id "<prod-google-client-id>" --google-secret "<prod-google-client-secret>" --skip-apple
Google OAuth should use separate dev and prod web clients:
- Dev redirect URI:
https://wandering-fox-41.eu-west-1.convex.site/api/auth/callback/google
- Prod redirect URI:
https://quick-yak-270.eu-west-1.convex.site/api/auth/callback/google
- Dev JavaScript origin:
http://localhost:3000
- Prod JavaScript origin:
https://nauciai.vercel.app
Vercel production needs only the public Convex bindings and Next-side secrets:
NEXT_PUBLIC_SITE_URL=https://nauciai.vercel.app
NEXT_PUBLIC_CONVEX_URL=https://quick-yak-270.eu-west-1.convex.cloud
NEXT_PUBLIC_CONVEX_SITE_URL=https://quick-yak-270.eu-west-1.convex.site
CONVEX_DEPLOYMENT=prod:quick-yak-270
WEBHOOK_SYNC_SECRET=<same-value-as-convex>
Convex-only secrets such as AUTH_SECRET, AUTH_GOOGLE_ID, AUTH_GOOGLE_SECRET, AUTH_RESEND_KEY, AUTH_RESEND_FROM, JWT_PRIVATE_KEY, and JWKS must live in Convex environment variables. INITIAL_ADMIN_EMAILS also must be synced to Convex env because admin resolution runs in Convex functions. Do not rely on Vercel to provide them to Convex Auth.
If secrets were exposed in screenshots or logs, rotate Google OAuth credentials, AUTH_SECRET, and WEBHOOK_SYNC_SECRET, then update both Convex and Vercel where applicable.
Stripe:
- Create subscription prices for the published courses.
- Put the price IDs in
STRIPE_PRICE_VIDEO_AUDIO_AI and STRIPE_PRICE_VIBE_CODING.
- Forward webhooks to
/api/stripe/webhook.
- Required events:
checkout.session.completed, customer.subscription.created, customer.subscription.updated, customer.subscription.deleted.
Mux:
- Create an access token and set
MUX_TOKEN_ID / MUX_TOKEN_SECRET.
- Configure a signing key when using signed playback tokens.
- Forward Mux webhooks to
/api/mux/webhook.
- Required events:
video.asset.ready, video.asset.errored, video.upload.asset_created.
Verification
npm run lint
npx tsc --noEmit
npm run build
npx convex run --inline-query 'return { cloud: process.env.CONVEX_CLOUD_URL ?? null, site: process.env.CONVEX_SITE_URL ?? null, googleIdLength: process.env.AUTH_GOOGLE_ID?.length ?? null };'
npx convex run --prod --inline-query 'return { cloud: process.env.CONVEX_CLOUD_URL ?? null, site: process.env.CONVEX_SITE_URL ?? null, googleIdLength: process.env.AUTH_GOOGLE_ID?.length ?? null };'
npx convex codegen
npm run convex:seed
npx convex codegen requires a configured CONVEX_DEPLOYMENT; it will fail in a fresh checkout until npx convex dev has linked the project.
Hosting: LiteSpeed
Behind a LiteSpeed server that serves public/ files directly, .webm is served as
text/plain + Content-Encoding: br, which Safari/iOS/Firefox reject — the landing
loops then fall back to their posters. Two safeguards keep video working:
-
Landing <video> sources list MP4 first (type="video/mp4"), WebM second, so any
host that mishandles WebM still plays MP4.
-
public/.htaccess forces the correct MIME types and disables compression for video.
It must reach the hosting doc root — verify it was deployed:
curl -sI https://nauciai.com/images/landing/hero-v2-loop.webm | grep -i content-type
It should print content-type: video/webm (not text/plain) and no
content-encoding. When Next serves the file itself (Vercel/local), the
headers() rule in next.config.ts does the same.
Run npm run check:media (optionally with an origin, default https://nauciai.com) to
HEAD every landing video and print a content-type / content-encoding table; it exits
non-zero if any video is served as text/plain or with a content-encoding.
