Ndididamaka Scholastica
Full-stack web developer building secure web apps.
New to Contra
Ndididamaka is ready for their next project!
A beautiful website that search engines can't crawl is invisible. A crawlable website that users can't navigate is unusable. The real skill is building both from the same foundation, not layering one on top of the other.
The Lookbook is a curated, high-performance sample portfolio site built with Next.js 15 (App Router) and Tailwind CSS v4, engineered to showcase dynamic project filtering, smooth page transitions, and production-grade accessibility.
Beyond clean UI and fluid motion design, this project serves as a concrete proof-of-concept for Technical SEO Optimization.
To rank on modern search engines (and get cited by AI search engines like Perplexity, Gemini, and ChatGPT), an application must go through three critical phases:
1. Technical SEO Optimization
2. On-Page Content & Search Intent
3. Off-Page Authority
The Lookbook demonstrates Stage 1 in its purest form, laying down a fast, search-engine-crawlable, and AI-parsable foundation that makes every page instantly indexable from day one.
0
35
Project Summary:
The Pulse is a Next.js 15 social feed dashboard engineered for maximum perceived performance, staying fast and responsive even under poor network conditions. The app features a feed of trending creator profiles with follow/like interactions, backed by Supabase for real email authentication and state persistence. Rather than relying solely on API speed, every interaction is designed to feel instant through aggressive client-side caching strategies.
Tech Stack: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, TanStack React Query, Supabase, Zod
The Strategy
Instead of only optimizing the API, the project focused on five core caching patterns that work together to create an instant feel:
1. Stale-While-Revalidate (SWR): Serves cached data immediately while fetching fresh data in the background. Users never stare at loading screens to see content.
2. Optimistic Updates: Updates the UI the moment a user clicks Follow or Like before the server responds, with graceful rollback handling on network failure.
3. Prefetching on Intent (Hover): Prefetches creator detail data when the cursor hovers over a card, ensuring the route payload is already cached if they click.
4. Manual Cache Invalidation: Features a Refresh Feed action that invalidates the query cache on demand, triggering a background refetch without blocking the UI.
5. Background Refetch on Window Focus: Automatically revalidates stale data when the user returns to the tab, keeping content updated without full page reloads.
0
73
Project Overview
Kolo Kept is a digital savings application, much like a piggy bank with vault grade locks. Users create savings vaults, deposit and withdraw funds in real time, and track progress toward their savings goals. The entire experience is built around one principle: security should never be an afterthought. Every login, every signup, and every password reset is protected by multiple independent layers of defense. The result is a fintech style application where the authentication system alone implements rate limiting, account lockout, email enumeration prevention, and cookie based session management, all without compromising on user experience.
The Tech Stack and Tools
Framework: Next.js 15 (App Router)
Language: TypeScript 5
UI: React 19, Tailwind CSS 3, Lucide React icons
Database: PostgreSQL via Supabase
Auth: Supabase Auth, @supabase/ssr
Rate Limiting and Lockout: Upstash Redis and Upstash Ratelimit
Validation: Zod 4
Tooling: PostCSS, Autoprefixer
The Challenge and Strategy
Authentication in financial applications is a highly critical problem. The challenge was to build a login system that resists brute force attacks, credential stuffing, and email enumeration without relying on an external auth wall like Auth0 or Clerk that would lock the project into a fixed pricing tier.
The strategy was defense in depth. Instead of a single gatekeeper, every auth endpoint was wrapped in multiple independent checks. Zod validation rejects malformed input immediately. Redis based rate limiting throttles abusive IPs before they reach the database. An account lockout counter per email prevents targeted brute force attacks even from rotating IPs. Finally, all server actions use Supabase SSR cookie based sessions for secure, browser managed credential storage.
Technical Implementation
The auth module was split into five focused server actions (login, signup, password reset, update password, logout), each with its own validation schema and rate limiter. Redis stores two kinds of state: sliding window rate limit counters (5 attempts per 15 minutes for login, 3 per 30 minutes for password reset) and an account lockout counter per email with a threshold of 10 failures and a 1 hour expiry.
Three separate Supabase clients were created following the principle of least privilege: an anonymous browser client for public reads, a cookie based server client for authenticated server actions, and a service role admin client restricted to user provisioning triggers. Row Level Security is enabled on all database tables, and a database trigger automatically provisions a profile and vault row for every new user at signup. The auth callback handler processes verification tokens on the client and syncs them seamlessly with Supabase's cookie based server client, ensuring secure session persistence that survives full page navigations.
Technical Result
A fully functional, production ready savings application where authentication is resilient to automated attacks. The login endpoint runs four sequential security checks before granting access, the password reset flow is rate limited and immune to enumeration, and account lockout automatically resets after one hour or upon successful password reset.
You can explore the live application here: https://kolo-kept-woad.vercel.app/
#Nextjs #TypeScript #Supabase #WebDevelopment #CyberSecurity #SoftwareEngineering #BuildInPublic #Fintech #React
0
104
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.
0
119