TrailerTime - Permissions Redefined

This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

🎬 TrailerTime

Watch. Manage. Control Trailers Like a Pro.

A submission for the Permit.io Authorization Challenge: Permissions Redefined

"What if Netflix had a little sibling who only cared about trailers, and also had an overprotective parent (aka Permit.io) deciding who gets to press which button?"

Well, meet TrailerTime — my entry to the Permissions Redefined Challenge by Permit.io.

🔗 Table of Contents

• 🍿 What is TrailerTime?
• 🔐 Why Authorization Matters
• 👥 Roles & Permissions
• 🎥 Demo & Screenshots
• 💻 Project Repo
• 🛠️ How I Built It
• 🤯 Challenges Faced
• 💡 Solutions & Learnings
• 🔌 Integrating Permit.io Like a Pro
• 📚 Code Snippets
• 💬 Final Thoughts

🍿 What is TrailerTime?

🎉 TrailerTime is a web app that lets users view a curated list of movie trailers — think Netflix, but no sign-ups, no streaming, and no ex-boyfriends calling mid-show.

It’s focused, clean, and smartly protected with role-based access control using Permit.io.

But here’s the twist: Not all users get to wear the Editor’s cape or wield the mighty Delete button—not everyone gets the keys to the kingdom.

Using Permit.io, I baked in fine-grained role-based access control so that Admins, Editors, and Users each see a different experience. No more accidental trailer deletions by your curious cousin.

🔐 Why Authorization Matters

Ever had a friend "borrow" your Netflix and mess up your watchlist?

Yeah, now imagine they could also delete movies. 🎬💥

That's why authorization isn’t just a backend problem—it's a user experience decision.

With Permit.io, I avoided spaghetti authorization code and instead used policy-as-code. Clean, scalable, and secure. Just how modern apps should be.

👥 Roles & Permissions

The frontend reacts to the user's role and dynamically shows/hides buttons like Create, Edit, and Delete.

The backend uses Permit.io's middleware to authorize API requests, ensuring no one sneaks into the editing room uninvited.

The UI and API both respect this table like it’s the law. Because it kinda is.

🎥 Demo & Screenshots

While it's not deployed (YET), here's what you can look forward to:

🔗 Video Demo on Loom

Application Demo Overview 🚀 - Watch Video

📸 Screenshots:

🏠 Login Page with Trailers

🛠️ Admin Dashboard

Add, Edit, Delete all the things.

✍️ Editor View

You can edit, but you can’t delete. Sorry, editors.

👀 User View

Pure read-only bliss.

Permit policy:

Permit integration:

💻 Project Repo

👉 GitHub: TrailerTime Repo

Everything’s open-source, from the React frontend to the Express backend. Cleanly structured, well-documented, and ready for feedback!

🛠️ How I Built It

🧠 The Idea:

• Netflix-style UI but permission-aware
• Auth with Permit.io – because DIY auth logic is a dark path
• Frontend: React
• Backend: Node.js + Express
• Database: Sqlite
• Authz: Permit.io

🛠️ How I Used Permit.io

🎯 Zero CLI, 100% middleware magic.

Since I didn’t use the CLI, all permission checks were baked into the app using Permit.io's Node.js and React SDKs.

🔒 Backend Authorization

I used Permit.io's middleware in Express to protect routes:

const { Permit } = require('permitio');
const permit = new Permit({ pdp: "https://cloudpdp.api.permit.io", token: process.env.PERMIT_API_KEY });

const checkPermission = async (req, res, next) => {
  const allowed = await permit.check(req.user.id, 'trailer:create');
  if (!allowed) return res.status(403).json({ error: 'Unauthorized' });
  next();
};

• ✅ Keeps backend logic clean
• ✅ No more hardcoded roles
• ✅ Centralized access control

🎨 Frontend Logic

Permit.io's SDK helped me render UI conditionally:

import { useCheck } from '@permitio/react-access-control';

const { loading, result } = useCheck('trailer:create');

return !loading && result ? Add Trailer : null;

🤩 This way, Users only see buttons they’re allowed to click.

🤯 Challenges Faced

😅 Fun, Fails & Fixes

🔍 "Why is the Delete button showing for Users?"

Turns out, I forgot to wrap the permission check around a button. Frontend users are sneaky!

⏳ Time pressure meant sacrificing a fancier UI for solid security.

Would I love a slicker design? Yes.

Would I prefer to sleep this week? Also yes.

🤹 Learning Permit.io as a first-timer was fun—especially when docs saved me from inventing my own RBAC system.

• Used React SDK to control UI elements.
• Want the "Delete" button? Better be an admin.
• Backend uses middleware checks to validate every action against Permit.io's policy.
• Policy-as-code helped me version-control my permissions. Git diff > digging through auth logic spaghetti.

💬 Final Thoughts

Building TrailerTime was a blast 🎆—and a serious learning experience. Here's what I walked away with:

• ✅ Role-based access is more than a backend checkbox.
• ✅ Permit.io lets you move fast without breaking permissions.
• ✅ Policy-as-code is scalable, readable, and GitHub-approved.
• ✅ UI/UX and security can be friends. Who knew?
• ✅ Would I use it in a real production app? Absolutely.
• ✅ Would I recommend it to teams struggling with access control? 100%.

🤝 Permit.io Team: Feedback Welcome!

I’d love it if this submission helps:

• Educate newcomers on integrating Permit.io in full-stack apps
• Inspire additions to the Permit.io docs or examples
• Start a conversation around best practices in frontend-backend authz integration

📣 Shoutout

I would like to thank my friend and saviour Aamir Kalimi, because sometimes you need someone else to look at your code to find out your silly, stupid mistakes 😂

If you're ever hiring a trailer-loving, RBAC-obsessed developer — I'm available 😄

Also, feel free to feature this in your docs (just send me the swag 👕😉).

To the Permit.io team—thank you for simplifying something that’s usually a pain to get right. With tools like this, even solo devs like me can build secure, scalable apps in a hackathon timeline ✨

👋 Want to Connect?

• 💼 LinkedIn
• 🐙 GitHub

If you found this helpful or interesting, give it a ❤️ or drop a comment. I’d love feedback!