DEV Community

Cover image for Maplewood Heights (Community Connect)
πn
πn

Posted on

Maplewood Heights (Community Connect)

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

Today I’m excited to introduce Maplewood Heights, a warm and inviting hub for our local community!

🏡 It’s a place where neighbors can learn about events, share news, and discover local gems.

☁️ I'd love to hear your thoughts on the design!

The app is already deployed to Google Cloud:: https://community-connect-528833377593.us-central1.run.app

🛠️ Functionality of the first version already has a lot of useful features:
📅 View upcoming events
💬 Live feed of community updates
☕ Favorite local places
🤝 Neighbor profiles and statistics

  • Updates feed: Multi-level comment threads, quick reactions, and emojis.
  • Community: Get to know your neighbors and quickly message them.
  • Events: A board of upcoming activities (from farmers' markets to volunteering).
  • Local "gems": Recommendations for the best bakeries, parks, or coffee shops in the area.

My main goal was to combine the speed of modern frontend technologies with a stylish, warm UI.

Stack & Architecture:
⚡ React 18 + Vite (quick build via SWC)
🎨 Tailwind CSS v3 + CSS-variables (fully custom light/dark theme in honey/sage green tones)
🧱 shadcn/ui (integrated ~50 Radix UI components)
✨ Framer Motion (controls orchestrating animations when scrolling and microinteractions)
🚢 CI/CD: Multi-stage Docker build on top of Nginx -> deployment to Google Cloud Run.

What's inside?

  • Watercolor hero block.
  • Update feed with support for recursive N-level comments and reactions.
  • Neighborhood mutual aid module.
  • Own context-messaging right in the browser.
  • When design (DM Serif Display + warm tones) works in synergy with cool UX, users really want to come back.

Happy to connect people through technology.

Top comments (0)