The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Project Overview
The Gatekeeper is a web application built to showcase modern authentication architecture, robust security protocols, and a seamless user onboarding experience. Instead of relying on basic out-of-the-box setups, this project was engineered from scratch to handle complex security workflows, minimize vulnerability attack surfaces, and maintain a highly intuitive, accessible user interface.
The Tech Stack & Tools:
- Framework: Next.js 15 (App Router) & TypeScript
- Styling: Tailwind CSS
- Database & Backend: Supabase
- Security & Cryptography: Bcrypt (password hashing) & JWT cookie logic
- Validation: Zod
- Deployment: Vercel
The Challenge & Strategy
Most authentication flows suffer from two main issues, they are either highly secure but frustrating for the user, or they are user-friendly but riddled with security vulnerabilities (like token theft or insecure session storage).
My goal was to bridge the gap between robust security and frictionless UX by building a production-ready authentication framework that stands up to modern security audits while ensuring users can log in effortlessly.
Technical Implementation
1. Leveraged Next.js Server Components and secure server actions to cleanly separate backend processing logic from client-side UI layers.
2. Integrated Supabase to manage secure database persistence and handle backend operations seamlessly.
3. Implemented Bcrypt for industry-standard, multi-layered password hashing to safeguard credential storage against security exploits.
4. Implemented secure session handling utilizing HTTP-only, SameSite cookies to mitigate XSS and CSRF risks.
5. Utilized Zod to enforce strict type safety and catch malformed input data on both the client and server levels before it ever hits the database.
6. Styled with Tailwind CSS to build a modern, high-fidelity responsive design system that handles state transitions (loading, error, success) elegantly.
Technical Result
The project successfully demonstrates a reusable, heavily audited full-stack boilerplate capable of scaling safely for any commercial SaaS MVP or enterprise application. It stands as concrete proof that complex backend data handling and highly polished frontend user experiences can live perfectly in a single unified system.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
what if your portfolio page was just all of it?
we put every project from our contra profile on one wall for the new apollo studio site.
Really great to see all of your work
I Built "My Perfect Interior" an Interior Design company website.
This website combines a premium, editorial design experience with AI-powered room visualization. Visitors upload a photo of their empty room, describe their vision, and receive a generated design concept. Each submission is automatically saved to a studio dashboard with the client's email, original photo, generated concept, and design brief.
This addresses a key challenge in interior design: translating a client's imagination into something a designer can understand and act on. By automating early-stage visualization and enquiry collection, the platform helps interior design businesses understand client needs faster, reduce repetitive consultations, and turn ideas into actionable project leads—all within a beautifully designed, responsive experience.
Solving the imagination translation problem is the smart move here, Charles. Letting visitors upload a room photo and get back a generated design concept turns the early consultation into something genuinely productive, and saving every brief to the studio dashboard makes the whole flow work like a real business.
