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:
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: https://jh-link.vercel.app/login
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.
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, which allowed me to focus on the overall architecture, user experience, and critically reviewing the generated code to ensure its quality and correctness. We collaborated on everything from feature implementation to complex debugging of SQL policies and asynchronous JavaScript, enabling the creation of a feature-rich application in a very short amount of time.
More...
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: https://jh-link.vercel.app/login
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: The app is a fully Progressive Web App (PWA), installable on mobile devices for a native-like experience. It includes page transition animations and a navigation progress bar.
- Tooling: I used bun as the package manager and the entire development was done 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, which allowed me to focus on the overall architecture, user experience, and critically reviewing the generated code to ensure its quality and correctness. We collaborated on everything from feature implementation to complex debugging of SQL policies and asynchronous JavaScript, enabling the creation of a feature-rich application in a very short amount of time.
More...