Vegas Hockey

• NextJS
• TypeScript
• React
• JavaScript
• PostgreSQL
• Oauth

Vegas Hockey is a social networking application made for the pupose of increasing the awareness of Inline Hockey in the Summerlin, Las Vegas area.

Category: Social Networking

Project link: https://www.vegashockey.app

Project Purpose and Goal

Created a user-friendly mobile-first app designed to connect hockey enthusiasts and make finding games more accessible. Unlike existing solutions with closed ecosystems requiring invite codes, this app prioritizes discoverability with SEO-friendly architecture. The aim was to build an open platform for players of all levels to find games without barriers, enhancing community involvement.

Key features include editing check-ins with personal notes and integrated chat functionality, allowing players to coordinate and share game details seamlessly. This app fills the gap in the sports app market, where connecting for niche sports like hockey often lacks accessible, well-designed platforms.

Problems and Thought Process

The core challenge of this project was to create an intuitive and streamlined app that made it easier for hockey players to find games and engage with teams from the first visit. I aimed to incorporate all the standard features offered by other sports apps, but in a cleaner, mobile-first design with drop-in information accessible right away. I focused heavily on user onboarding and team joining flows, iterating multiple times to produce a process that felt both efficient and natural.

One notable area for development was the messaging system. I set out to build a fully functional comment and attendance system, where users could edit messages and update their availability. Though the initial messaging is simple, the backend is designed to support future updates like comment reactions, notifications, and other interactive features that will improve user engagement. This project was also an opportunity to refine my server actions with PostgreSQL queries, ensuring the app ran smoothly and was ready to scale.

While the app may currently appear suited to a single team or event, I built its infrastructure with future expansion in mind, allowing for the creation of multiple teams, events, and admin roles.

Although the application's code is not publicly accessible, here are some examples of Server Action PostgreSQL queries designed to dynamically adjust the UI based on user selections and attendance status.

            export async function fetchGoalieYesCount(event_id: string){
              const goalieCount = await sql`
                SELECT COUNT(*)
                FROM attendance
                WHERE
                 event_id=${event_id} AND
                 goalie = 'yes'
              `
              const totalYes: number = Number(goalieCount[0].count ??'0');
              return totalYes;
            }

            export async function fetchNetCount(event_id: string){
              const netCount = await sql`
                SELECT SUM(nets)
                FROM attendance
                WHERE
                 event_id=${event_id}
              `
              return Number(netCount[0].sum);
            }

            export async function fetchAttendingStatus(event_id: string){
              const user: User = await fetchCurrentUser();
              const status = await sql`
                SELECT attending
                FROM attendance
                WHERE
                 event_id=${event_id} AND
                 player=${user.id}
              `
              const statusStr = status[0]?.attending;
              return statusStr === 'yes';
            }

Overall, I'm pleased with the result, as it achieves everything I set out to accomplish, positioning the app as an accessible platform for the hockey community and one that can grow alongside its users.

Web Stack and Explanation

I built the app using Next.js, hosted on Vercel for a seamless, high-performance infrastructure. Next.js provided server-side rendering and dynamic routing, ideal for displaying all drop-in data directly on the public site. This setup allowed me to leverage layouts that dynamically showcase custom components after successful user login, delivering an intuitive and personalized user experience.

For storage, I chose PostgreSQL and crafted my own schemas without relying on ORMs. This choice allowed for more control and optimized use of foreign keys to keep data efficiently organized and easily retrievable. I also implemented cascading deletions, ensuring user data and comments could be removed upon request, simplifying data management and compliance with privacy requirements.

Since the app handles a lot of interactive user input, data validation was a priority. I used Zod for strong validation on the frontend and DOMPurify to sanitize all data before it reaches the database, safeguarding against potential injection attacks.

This combination of Next.js, Vercel, and PostgreSQL allowed for a responsive, secure, and well-organized platform. It met all my initial goals for scalability, performance, and user accessibility, laying a foundation that can grow with future features and users.

Lesons Learned & Future Work

This project, driven by my passion for hockey, taught me a lot about creating community-focused apps while simplifying team management. It was incredibly rewarding to see local players embrace the platform, making it easier to organize and join games. The initial rollout of a free version allowed me to gather valuable user feedback and insights into desired features, which will shape future development.

Looking ahead, I plan to enhance the app with in-app messaging, notifications, and customizable player profiles to foster even more engagement. Additionally, I’m considering adding a blog to boost organic reach and make it easier for new players to discover local games, leveraging my SEO experience. This project has been a rewarding blend of my interests and skills, with plenty of exciting opportunities for growth and improvement on the horizon.

Let's connect and see what we can accomplish together! hi@johan.me