Building Bulletproof Tier-Gating Into AdminStack
Had one of those satisfying dev sessions today where everything just clicked. Spent the day doing a comprehensive tier-gating audit for AdminStack and knocked out a few other features along the way.
The Main Event: Making Paywalls Actually Work
The big task was fixing our tier-gating system. You know that feeling when you realize your "premium" features aren't actually gated properly? Yeah, that was AdminStack a few hours ago.
Started with the sidebar - our navigation was showing locked features but the visual feedback was weak. Changed the opacity from 60% to 40% for better contrast, made the lock icons amber instead of boring gray, and added helpful tooltips that actually tell users which plan they need to upgrade to. Small details, but they matter for conversions.
Then came the fun part: adding route-level protection to 16 different pages. Invoices, tasks, time tracking, domains, client portals - everything now has proper PlanGate components that kick in before any data loading happens. I went with an early-return pattern that respects React's hook rules while short-circuiting expensive operations for users who shouldn't be there anyway.
if (!hasFeature('invoicing')) {
return <PlanGate requiredFeature="invoicing" />;
}
Clean, simple, and it works everywhere.
Dashboard Gets the Treatment Too
The dashboard's Financial Summary widget was completely ungated - not great when that's literally our invoicing feature showcase. Now free users see a locked placeholder card with an amber lock icon and a "View Plans" button. I chose to show the locked card rather than hide it completely because FOMO drives upgrades.
Quick Wins on the Side
While I was in the zone, tackled a few other improvements:
Auto-login after registration - Nobody wants to register and then immediately type their password again. Now the registration flow automatically logs users in using our existing JWT pipeline.
Real legal pages - Added proper Terms of Service and Privacy Policy pages. Nothing fancy, but they cover all our data practices with Supabase, Stripe, and SendGrid.
Invoice status changes - Portal users can now manually change invoice statuses with a clean modal interface. Smart enough to auto-set payment dates when marking as paid.
The Tier Structure
For context, here's how AdminStack's plans break down:
- Free ($0): Pretty much a demo
- Basic ($15): Time tracking, tasks, social templates
- Pro ($35): Adds invoicing, domains, client portals
- Agency ($79): API access, white label, priority support
- Enterprise: Whatever you want for whatever you'll pay
What's Next
Everything's locked down tight now at the UI level. The pattern's established, so adding new gated features in the future will be straightforward. Might add middleware-level API route protection down the line, but for now the UI gating does the job.
The build's clean, all commits are pushed, and I'm calling this session a win. Sometimes the best coding days are the ones where you clean up technical debt and make the user experience smoother at the same time.