JH Link: A PWA to Connect and Engage Our Local Youth Center

Source: Dev.to

This is a submission for the DEV Weekend Challenge: Community

The Community

This project is for my local youth center. While its main focus is on providing a vibrant hub for young people aged 10‑19, the center maintains an open and welcoming atmosphere for the entire community. People of all ages are encouraged to drop in for a chat, grab a drink from the cafe, or even participate in activities. However, communication and engagement are often fragmented, relying on word‑of‑mouth and scattered social media posts. It can be hard for members to track activities, see who’s attending, or feel a persistent sense of belonging when they aren’t physically at the center. Administrators also spend significant time on manual tasks like check‑ins and tracking participation.

What I Built

To address these challenges, I built JH Link, a Progressive Web App (PWA) designed to be the digital heart of our youth center.

It’s a mobile‑first application that provides:

• Activity Feed: A real‑time list of upcoming events and activities that members can register for with a single tap.
• Member Profiles: A space for members to express themselves and see their engagement history.
• Digital Member Card: A QR‑code‑based virtual card for easy check‑ins, replacing the need for physical cards.
• Gamification: A points and leveling system that rewards members for participating in activities, fostering friendly competition and sustained engagement.
• Admin Dashboard: A comprehensive backend for staff to manage activities, check in members, and oversee the points system.

The goal is to make participation easier, more rewarding, and to strengthen the community bond, even when members are apart.

Demo

You can try out a live demo of the application here:

Here’s a video walkthrough of the application:

Code

The full source code is available on GitHub:

How I Built It

I developed JH Link over the weekend, leveraging a modern, full‑stack TypeScript approach.

• Framework: Next.js (using the App Router)
• Backend & Database: Supabase for authentication, a PostgreSQL database with Row Level Security, and storage.
• Deployment: Vercel
• Styling: Tailwind CSS
• UI/UX: Fully Progressive Web App (PWA), installable on mobile devices for a native‑like experience. Includes page transition animations and a navigation progress bar.
• Tooling: bun as the package manager; development performed inside a VS Code Dev Container.

A significant part of the development process involved working with an AI assistant. This co‑development model was incredibly efficient: the AI handled much of the initial scaffolding, boilerplate code, and complex server actions, allowing me to focus on architecture, user experience, and critical code review. Together we implemented features, debugged SQL policies, and refined asynchronous JavaScript, enabling a feature‑rich application in a very short amount of time.