Merch Store

Next.js

TypeScript

Tailwind CSS

Prisma

tRPC

NextAuth.js

Jotai

Zod

UploadThing

A merchandise management platform for the SFU Software Systems Student Society, enabling students to browse, order, and manage apparel inventory with secure authentication and real-time order tracking.

Project Brief

SSSS Merch MVP is a full-stack merchandise management system built for the SFU Software Systems Student Society. The platform features custom SFU CAS authentication integration, enabling students to securely access and order merchandise using their university credentials. It includes an admin dashboard for inventory management, order processing, and analytics. Built with the T3 Stack (Next.js, tRPC, Prisma, NextAuth.js), the application provides type-safe API routes and end-to-end TypeScript coverage for reliability and maintainability. Brief for Merch Store.

The Process

I architected and developed the platform using the T3 Stack, implementing custom SFU CAS authentication through NextAuth.js to provide seamless single sign-on for students. The backend leverages tRPC for fully type-safe API routes, eliminating the need for API documentation and reducing runtime errors. Prisma ORM handles database operations with type-safe queries and migrations. For state management, I used Jotai for global cart and user state, providing atomic updates without prop drilling. Forms are built with React Hook Form and validated using Zod schemas, ensuring data integrity at both client and server levels. File uploads for product images are handled through UploadThing, providing reliable CDN-backed storage. The UI components are built with Radix UI primitives and styled with Tailwind CSS for accessibility and consistency. I implemented role-based access control to distinguish between students, admins, and super admins, with different permissions for viewing products, managing inventory, and processing orders.

The Outcome

Building the SSSS Merch MVP reinforced the power of modern full-stack TypeScript development with the T3 Stack. Integrating custom SFU CAS authentication was a unique challenge that required deep diving into NextAuth.js providers and session management to ensure secure, university-wide SSO. The combination of tRPC and Prisma provided an exceptional developer experience with end-to-end type safety—catching errors at compile time rather than runtime. Using Jotai for state management kept the codebase clean and performant, especially for the shopping cart functionality that needed to persist across page navigation. React Hook Form with Zod validation ensured robust form handling with minimal boilerplate. The project demonstrated how choosing an integrated tech stack can significantly improve development velocity and code quality. The platform successfully serves the SFU Software Systems Student Society community, streamlining merchandise operations and providing a modern, user-friendly experience for students. Outcome for Merch Store.