This is a submission for the DEV Weekend Challenge: Community
The Community
I built this application for local neighborhoods, apartment complexes, and tight-knit local communities. We often have household items lying around that we rarely use, or we possess skills we can easily share with our neighbors. On the flip side, people frequently need to borrow a tool for just 10 minutes or need quick help but don't want to buy something brand new or hire an expensive professional.
The community I built this for is everyone who wants to foster local connection, sustainability, and mutual aid in their immediate geographic area, aiming to turn strangers living next door into a true community.
What I Built
Community Help is a premium, real-time community sharing platform. It enables neighbors to share resources, lend items, offer skills, and connect through secure private messaging.
Key features include:
- 📋 Live Feed: Real-time community posts filtered by categories like items to lend, free gifts, help requests, and skill shares.
- 🪄 Premium UI/UX: A beautiful glassmorphism design, sleek dark/light mode toggle, dynamic loading states, micro-interactions, and a highly responsive interface.
- 🛡️ Private Chat: A secure in-app messaging and inbox system allowing neighbors to coordinate hand-offs without needing to share personal phone numbers.
- ⚡️ Real-time Sync: Instant updates across all devices without needing to refresh the page.
- 🗝 Secure Authentication & Rules: Integrated Google & Email Auth, paired with robust Firestore backend rules to ensure data privacy and prevent unauthorized access.
Demo
(Feel free to sign in, set up a profile, and test out the live feed and real-time chat!)
Code
The project is completely open and built natively. The core application logic resides in a single, well-architected Vanilla JS file.
🛠️ How I Built It
I wanted to challenge myself to go "back to the roots." I built this entire application using Vanilla HTML5, CSS3, and JavaScript (ES6+). It is a testament that you don't always need a heavy frontend framework to build a blazing-fast, premium-feeling Single Page Application (SPA).
The Stack
| Layer | Technology |
|---|---|
| Frontend | Vanilla JS (ES6+), Modern CSS3 (Variables, Grid, Flexbox) |
| Backend | Firebase (Authentication, Firestore Database) |
| Hosting | Firebase Hosting |
Implementation Details
- Real-time Architecture: The nature of Firestore
onSnapshotlisteners was perfect for creating the Live Feed and Private Chat features without complex WebSocket servers. - Security First: I wrote strict Firestore Security Rules to ensure users can only modify their own posts and read chats they are participating in.
- Design System: I implemented a glassmorphism aesthetic using CSS
backdrop-filterand a dynamic CSS-variable based theming engine for instant Dark/Light mode switching.
💻 Code & Resources
The project is completely open and built natively. The core application logic resides in a single, well-architected Vanilla JS file.
Live Demo: Community Help Platform
(Feel free to sign in, set up a profile, and test out the live feed and real-time chat!)
Built with ❤️ for neighborhoods everywhere
Top comments (0)