This is a submission for the DEV Weekend Challenge: Community
The Community
I built this for a beginner-friendly front-end learning community — the kind of space where people are building portfolios, sharing progress, doing review swaps, and joining weekend co-working sessions.
Weekend challenges are exciting... but coordination gets chaotic fast:
- "When are we meeting?"
- "Who's hosting?"
- "Can someone send that resource link again?"
- "Wait, did anyone RSVP?"
Most of this happens inside chat threads, which means important details get buried quickly.
I wanted to build something lightweight that makes weekend collaboration feel organized, intentional, and energizing — without adding friction or requiring accounts.
What I Built
I created Weekend Hub — a minimal community planner designed specifically for weekend learning sessions.
It includes:
📅 Events
- Create weekend sessions (co-working, study groups, review swaps, mini workshops)
- Display date, time, host, type, and notes
- One-click RSVP toggle with live RSVP count
- Search and filter (including "Hosted by me")
- Copy event details to clipboard
📣 Announcements
- Post quick updates for the community
- Remove individual announcements or clear all
- Clean, chip-style display for easy scanning
📌 Resources
- Pin useful links (docs, tools, tutorials)
- Open links in a new tab
- Remove or clear resources easily
🎨 UX Details
- Light/Dark theme toggle (remembers preference)
- Responsive layout (mobile-friendly)
- Keyboard-accessible controls with focus styles
- Toast feedback messages
- Empty states with friendly microcopy
- All data stored locally using LocalStorage (no accounts required)
The goal was to make something practical, fast, and genuinely helpful for a real community scenario.
Demo
- Live Preview URL: Live preview URL
Code
Weekend Hub — Community Weekend Planner
A lightweight community hub for weekend events, RSVPs, announcements, and shared resources.
Why this exists
Weekend challenges and study groups often struggle with coordination:
- "When are we meeting?"
- "Who's hosting?"
- "Where do I share links?"
- "Wait... who RSVP'd?"
Weekend Hub keeps it simple with a single-page app and LocalStorage.
Features
- Create events (title, host, date/time, type, notes)
- RSVP toggle + RSVP counts
- Search events + filters (upcoming, hosted-by-me)
- Announcements (post/remove/clear)
- Resources (pin links, remove/clear)
- Theme toggle (saved)
- Responsive + keyboard-friendly
Tech
- HTML + CSS
- Vanilla JavaScript
- LocalStorage
Run locally
Just open index.html in your browser.
Or use a local server:
- VS Code extension: “Live Server”
- Or:
python -m http.server
Data & privacy
All data stays in your browser using LocalStorage.
Ideas for next version
- Export/import JSON
- Shareable event links
- Multi-user sync (Firebase/Supabase)
- Calendar (.ics) export
How I Built It
This app was intentionally built with simplicity and clarity in mind.
🧱 Structure
- Semantic HTML for accessibility
- Clear separation between UI, state management, and rendering
- Small reusable rendering functions (events, announcements, resources)
🗂 State Management
- Central
stateobject - Read/write to LocalStorage with safe JSON parsing
- Derived values for stats and filtered event lists
⚡ Interactivity
- Event delegation for dynamic elements
- Clipboard API for quick sharing
-
aria-liveregions for screen reader feedback - Safe HTML escaping to prevent injection issues
🎨 Styling Approach
- CSS custom properties for theming
- Dark-first design with a light theme override
- Responsive grid layout
- Accessible focus states
- Soft gradients and subtle depth for a modern SaaS feel
Why This Matters
Communities thrive on momentum.
When logistics are smooth, people focus more on building, learning, and collaborating.
Weekend Hub removes friction so a community can:
- Organize quickly
- Participate easily
- Share resources clearly
- Feel connected
It’s small — but it meaningfully serves the real rhythm of a weekend learning group.
Thanks for the challenge — this was a fun one to build. 🚀
Top comments (0)