Prank Wizard

Project cover

Architecture

Next.js handles marketing and the authenticated wizard UI. Express exposes JSON APIs with JWT sessions and Google OAuth via Passport. MongoDB stores users, pranks, and admin views.

Product gallery

A focused snapshot of the key screens and flows from this build.

The Challenge

The project needed to turn a playful idea into a structured product with secure accounts, persistent form progress, protected user flows, admin management, and production-ready deployment. The challenge was to keep the experience fun while still applying serious full-stack engineering practices.

The Solution

I built a prank planning platform with a 4-step persisted workflow, user registration, login, Google OAuth, password reset, protected routes, user dashboard, profile management, prank history, and an admin dashboard for managing users and prank submissions.

Technical Implementation

The frontend uses Next.js, React, TypeScript, Tailwind CSS, GSAP, and Three.js. The backend uses Express.js, MongoDB, Mongoose, JWT authentication, Passport.js Google OAuth, bcrypt password hashing, sessions, rate limiting, input sanitization, security headers, CORS configuration, environment validation, health checks, Docker support, and GitHub Actions.

Outcome

Prank Wizard demonstrates my ability to build a complete full-stack product with authentication, protected routes, persistent workflows, MongoDB-backed admin management, role-based access control, pagination, dashboard statistics, security headers, and deployment configuration.

What I learned

• Persisting multi-step form state server-side made refreshes feel native without fragile local-only hacks.
• Separating admin routes and policies early avoided leaking privileged actions into shared components.
• Balancing Three.js flair with bundle cost pushed me toward lazy scenes on non-critical pages.