The latest articles on DEV Community by Whitney (@whitney_343fa7c484924bf63). https://dev.to/whitney_343fa7c484924bf63 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3717706%2F7ee1a8cb-4344-488b-997a-32f391275fba.png https://dev.to/whitney_343fa7c484924bf63 en Whitney Fri, 27 Feb 2026 16:43:53 +0000 https://dev.to/whitney_343fa7c484924bf63/weekend-hub-a-tiny-community-planner-for-frontend-studio-ab8 https://dev.to/whitney_343fa7c484924bf63/weekend-hub-a-tiny-community-planner-for-frontend-studio-ab8 <p><em>This is a submission for the <a href="https://dev.to/challenges/weekend-2026-02-28">DEV Weekend Challenge: Community</a></em></p> <h2> The Community </h2> <p>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.</p> <p>Weekend challenges are exciting... but coordination gets chaotic fast:</p> <ul> <li>"When are we meeting?"</li> <li>"Who's hosting?"</li> <li>"Can someone send that resource link again?"</li> <li>"Wait, did anyone RSVP?"</li> </ul> <p>Most of this happens inside chat threads, which means important details get buried quickly.</p> <p>I wanted to build something lightweight that makes weekend collaboration feel organized, intentional, and energizing — without adding friction or requiring accounts.</p> <h2> What I Built </h2> <p>I created <strong>Weekend Hub</strong> — a minimal community planner designed specifically for weekend learning sessions.</p> <p>It includes: </p> <h3> 📅 Events </h3> <ul> <li>Create weekend sessions (co-working, study groups, review swaps, mini workshops)</li> <li>Display date, time, host, type, and notes</li> <li>One-click RSVP toggle with live RSVP count</li> <li>Search and filter (including "Hosted by me")</li> <li>Copy event details to clipboard</li> </ul> <h3> 📣 Announcements </h3> <ul> <li>Post quick updates for the community</li> <li>Remove individual announcements or clear all</li> <li>Clean, chip-style display for easy scanning</li> </ul> <h3> 📌 Resources </h3> <ul> <li>Pin useful links (docs, tools, tutorials)</li> <li>Open links in a new tab</li> <li>Remove or clear resources easily</li> </ul> <h3> 🎨 UX Details </h3> <ul> <li>Light/Dark theme toggle (remembers preference)</li> <li>Responsive layout (mobile-friendly)</li> <li>Keyboard-accessible controls with focus styles</li> <li>Toast feedback messages</li> <li>Empty states with friendly microcopy</li> <li>All data stored locally using LocalStorage (no accounts required)</li> </ul> <p>The goal was to make something practical, fast, and genuinely helpful for a real community scenario.</p> <h2> Demo </h2> <ul> <li>Live Preview URL: <a href="https://whitgunt77.github.io/weekend-hub/" rel="noopener noreferrer">Live preview URL</a> </li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmw9w3jmmasadyyhhj4r.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmw9w3jmmasadyyhhj4r.gif" alt="Weekend Hub Preview GIF"></a></p> <h2> Code </h2> <p> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/whitgunt77" rel="noopener noreferrer"> whitgunt77 </a> / <a href="https://github.com/whitgunt77/weekend-hub" rel="noopener noreferrer"> weekend-hub </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Weekend Hub — Community Weekend Planner</h1> </div> <p>A lightweight community hub for weekend events, RSVPs, announcements, and shared resources.</p> <div class="markdown-heading"> <h2 class="heading-element">Why this exists</h2> </div> <p>Weekend challenges and study groups often struggle with coordination:</p> <ul> <li>"When are we meeting?"</li> <li>"Who's hosting?"</li> <li>"Where do I share links?"</li> <li>"Wait... who RSVP'd?"</li> </ul> <p>Weekend Hub keeps it simple with a single-page app and LocalStorage.</p> <div class="markdown-heading"> <h2 class="heading-element">Features</h2> </div> <ul> <li>Create events (title, host, date/time, type, notes)</li> <li>RSVP toggle + RSVP counts</li> <li>Search events + filters (upcoming, hosted-by-me)</li> <li>Announcements (post/remove/clear)</li> <li>Resources (pin links, remove/clear)</li> <li>Theme toggle (saved)</li> <li>Responsive + keyboard-friendly</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Tech</h2> </div> <ul> <li>HTML + CSS</li> <li>Vanilla JavaScript</li> <li>LocalStorage</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Run locally</h2> </div> <p>Just open <code>index.html</code> in your browser.</p> <p>Or use a local server:</p> <ul> <li>VS Code extension: “Live Server”</li> <li>Or: <code>python -m http.server</code> </li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Data &amp; privacy</h2> </div> <p>All data stays in your browser using LocalStorage.</p> <div class="markdown-heading"> <h2 class="heading-element">Ideas for next version</h2> </div> <ul> <li>Export/import JSON</li> <li>Shareable event links</li> <li>Multi-user sync (Firebase/Supabase)</li> <li>Calendar (.ics) export</li> </ul> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/whitgunt77/weekend-hub" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <h2> How I Built It </h2> <p>This app was intentionally built with simplicity and clarity in mind.</p> <h3> 🧱 Structure </h3> <ul> <li>Semantic HTML for accessibility</li> <li>Clear separation between UI, state management, and rendering</li> <li>Small reusable rendering functions (events, announcements, resources)</li> </ul> <h3> 🗂 State Management </h3> <ul> <li>Central <code>state</code> object</li> <li>Read/write to LocalStorage with safe JSON parsing</li> <li>Derived values for stats and filtered event lists</li> </ul> <h3> ⚡ Interactivity </h3> <ul> <li>Event delegation for dynamic elements</li> <li>Clipboard API for quick sharing</li> <li> <code>aria-live</code> regions for screen reader feedback</li> <li>Safe HTML escaping to prevent injection issues</li> </ul> <h3> 🎨 Styling Approach </h3> <ul> <li>CSS custom properties for theming</li> <li>Dark-first design with a light theme override</li> <li>Responsive grid layout</li> <li>Accessible focus states</li> <li>Soft gradients and subtle depth for a modern SaaS feel</li> </ul> <h2> Why This Matters </h2> <p>Communities thrive on momentum.</p> <p>When logistics are smooth, people focus more on building, learning, and collaborating.<br><br> Weekend Hub removes friction so a community can:</p> <ul> <li>Organize quickly </li> <li>Participate easily </li> <li>Share resources clearly </li> <li>Feel connected </li> </ul> <p>It’s small — but it meaningfully serves the real rhythm of a weekend learning group.</p> <p>Thanks for the challenge — this was a fun one to build. 🚀</p> devchallenge weekendchallenge showdev webdev