Hacker Portal

Next.js

TypeScript

Tailwind CSS

Shadcn/UI

Jotai

Storybook

Drizzle ORM

Vercel

SFU Surge's comprehensive hackathon application management platform, enabling users to submit applications, and admins to track status, and manage event registrations seamlessly for over 1,500 hackers yearly.

Project Brief

SFU Surge Hacker Portal is an application management system designed to streamline event registration and application processes for hackathons. The platform supports role-based access control, real-time application tracking, file uploads via Vercel Blob storage, and integrates with multiple systems to provide a seamless experience for both applicants and organizers. Scaled to 1,500+ active users and processed over 3,000 applications in its first year. Brief for Hacker Portal.

The Process

As the Front-End Lead, I spearheaded the development of the portal using Next.js and TypeScript with a modern tech stack. The project involved revamping the component library with Storybook, leveraging Tailwind CSS and Shadcn/UI to create a cohesive design system called Strike. I implemented Jotai for atomic state management, providing a lightweight and scalable alternative to Context API for handling global application state. The portal features dynamic form handling with Drizzle ORM for type-safe database operations, secure file uploads using Vercel Blob storage for resumes and supporting documents, and cryptographically secure UUID generation for application tracking. I collaborated closely with Product and Graphic Designers to ensure seamless integration with our design standards. We implemented robust authentication and authorization flows to ensure data security and proper access control across different user roles, with an admin dashboard for managing submissions in real-time.

The Outcome

The Hacker Portal project presented unique challenges in scaling a platform to handle thousands of concurrent users while maintaining performance and user experience. A key architectural decision was adopting Jotai for state management, which provided atomic, composable state with minimal boilerplate compared to traditional Context API approaches. This enabled efficient re-renders and better performance at scale. Building a comprehensive component library with Storybook enabled consistent design patterns and improved development velocity across the team, allowing designers and developers to iterate independently. Integrating Vercel Blob for file storage solved our resume upload challenges, providing reliable CDN-backed storage without managing infrastructure. Using Drizzle ORM with TypeScript gave us end-to-end type safety from database to UI, reducing runtime errors significantly. The portal successfully scaled to support 1,500+ users and processed over 3,000 applications, demonstrating the effectiveness of our modern tech stack and architecture decisions. The project reinforced the importance of choosing the right tools for scalability, cross-functional collaboration, and building maintainable systems that can evolve with growing user demands. Outcome for Hacker Portal.