FrameSignal is a portfolio-level, production-minded full-stack project for spoiler-safe movie decision making. It is designed as a movie guidance platform, not a streaming site.
Live demo: https://frame-signal.vercel.app
Movie sites often force users to choose between vague recommendations and spoiler-heavy discussion. Someone who wants to know whether a movie fits their night may accidentally learn too much about the ending, twist, or emotional payoff before deciding.
FrameSignal solves that by making the decision layer explicit: should I watch this, what mood does it fit, how risky are the spoilers, and where should deeper analysis begin?
FrameSignal combines quick decision cards, spoiler labels, ending explanations, theory analysis, mood-based discovery, and legal availability guidance. The result is a public editorial experience that helps readers decide what to watch while controlling how much story detail they see.
FrameSignal is organized around decisions, not only articles. A normal movie blog might publish reviews, lists, and theories as separate content streams. FrameSignal connects those streams through Signal Cards, spoiler levels, mood chips, legal guidance, movie profiles, and a protected CMS.
The platform also treats speculation carefully. Theory Lab content is labelled as confirmed, evidence-backed, possible, speculative, or fan interpretation instead of presenting every theory as a fact.
The core product idea is simple: give readers a fast, spoiler-safe answer first, then let them choose how deep they want to go.
Key product pieces:
- Signal Score and final decision.
- Best For and Avoid If guidance.
- Mood, runtime feel, family-safety, and spoiler risk.
- Ending Explained articles with clear warning levels.
- Theory Lab analysis with labelled confidence.
- Legal Watch Signal copy that points users toward official platforms.
- A reader lands on the homepage and sees a decision-first headline.
- They browse reviews, movie profiles, endings, theories, or mood-based discovery.
- Spoiler badges appear before clicking into deeper content.
- A movie profile or article shows the Signal Card before long-form reading.
- If they need deeper analysis, they can continue into ending or theory content with clearer spoiler boundaries.
- If they want updates, they can use the newsletter form.
- If they need to contact the site, they can submit the contact form.
The design direction is warm dark editorial with cinematic, decision-first layouts. The visual system uses strong typography, restrained borders, gold decision accents, violet theory accents, and high-contrast dark surfaces.
The goal is to feel premium and readable without turning into a marketing landing page or a poster gallery.
FrameSignal uses the Next.js App Router with server components as the default. Public pages read published content server-side and fall back to local demo data when Supabase is unavailable.
The admin area is separated from the public layout and protected through Supabase Auth plus server-side profile checks. Admin create/edit workflows use server actions instead of public API routes.
The database is PostgreSQL through Supabase. Schema changes are migration-based. Public content, private form submissions, CMS content, analytics-style tables, audit logs, profiles, and settings are separated by table and policy.
RLS is central to the security model:
- Public visitors can read published public content.
- Public visitors can insert contact/newsletter rows but cannot read them.
- Admin access requires an authenticated user with an active profile role.
- New auth users are inactive by default until manually activated.
- Service role keys are not used in client code.
The protected CMS includes:
- Dashboard overview.
- Read-only admin lists.
- Article create/edit workflow.
- Movie create/edit workflow.
- Category, tag, mood, and genre create/edit workflow.
- CMS page create/edit workflow.
- Site setting edit workflow with JSON and secret-safety validation.
Delete, upload, and advanced editorial workflows are intentionally deferred.
The SEO foundation includes:
- App Router metadata.
- Canonical URL helper.
- Sitemap generation.
- Robots rules that exclude admin routes.
- JSON-LD for homepage, article, movie, CMS page, and breadcrumb structures.
- No fake rating schema.
- No fake streaming availability schema.
Only published content should appear in public SEO surfaces.
The project is deployed to Vercel and connected to Supabase Cloud. The production handoff includes environment variables, database migrations, seed data review, first-admin activation, and smoke tests for public pages, admin login, forms, sitemap, and robots.
- Building spoiler-safe content patterns without weakening the editorial experience.
- Keeping public data read-only while admin data stays protected.
- Designing RLS policies around active staff profiles instead of client-only checks.
- Supporting local development with mock fallback and generated database types.
- Creating admin forms without adding delete or upload behavior too early.
- Keeping legal guidance clear without implying streaming, file access, or unofficial availability.
This project reinforced how much product clarity matters in full-stack development. The database, RLS policies, admin UX, public content model, and SEO output all had to support the same promise: help people make movie decisions without ruining the story.
It also made the security boundary more concrete. Hiding links is useful for UX, but the real protection comes from server-side checks, Supabase Auth, active profile roles, and RLS.
- Add Supabase Storage and an image credit workflow.
- Add richer editorial tooling.
- Add advanced search and filters.
- Add rate limiting and spam protection for public forms.
- Add analytics dashboards from collected events.
- Add audit trail UI.
- Add motion polish after performance testing.
- Add a custom domain and final Core Web Vitals pass.