Loading...
Zashub
A community and neighborhood platform built with the MERN stack. Users discover businesses, browse events, and business owners can register their listing through an authenticated form.
Core Engineering Achievement
Built a full MERN application with authenticated business listing submission, category-based filtering, and a responsive layout optimized for mobile use.
System Interface & Feature Tour
home-town-hub-pi.vercel.app
Discovery
Click for Fullscreen
Production Stats
0
User-Facing Modules0
MongoDB Collections0+
Git Commits0%
Mobile ResponsiveMERN Stack
Architecture
JWT Bearer Token
Auth
MongoDB + Mongoose
Database
The Challenge
Most small local businesses in a neighborhood have no digital presence. Residents rely on word of mouth to find services. There's no single place to discover businesses, see upcoming events, or register a new listing.
Project Goals
- Build a simple, browsable business directory backed by a real API and database.
- Allow authenticated business owners to submit and manage their own listings.
- Keep the UI fast and mobile-friendly since most local users browse on phones.
Technology Stack
frontend
backend
database
infrastructure
tooling
System Architecture
Client Layer
React SPA with React Router v6. Context API holds the auth state (token + user). Tailwind CSS for responsive layout across all screen sizes.
Application Layer
Express.js with separate route modules: /api/businesses, /api/events, /api/auth. express-validator validates POST body before DB write.
Data Layer
MongoDB with two main collections: businesses and events. Mongoose schemas enforce field types and required fields at the ORM level.
Performance & Security Architecture
⚡ Performance & Scalability
The client only fetches listings matching the current filter, not the full dataset. This keeps the API response payload small on mobile connections.
🔒 Security & Access Control
JWT validated on all write routes (POST, PATCH). Owners can only modify listings where the ownerId matches their token userId — enforced in the route handler.
Engineering Decisions & Trade-offs
MongoDB for listings data
Reasoning
Business listings don't have complex relationships — each document can store all the business info (name, category, hours, contact) in one place. A document store is a natural fit.
Trade-off
No enforced referential integrity. If a user account is deleted, their business listings remain orphaned in the collection.
Server-side regex filter instead of client-side filter
Reasoning
With a large number of listings, returning everything to the client and filtering in JavaScript would be wasteful. The API accepts a category query param and filters at the database level.
Trade-off
Regex queries on unindexed fields perform a full collection scan. Adding an index on the category field would be the next step for scalability.
Key Results & Production Impact
- End-to-end working application: users browse and search, owners register listings, events display correctly.
- Mobile-responsive layout that works on small screens without layout breakage.
- Clean route structure in Express that is easy to extend with more resource types.
Engineering Takeaways & Lessons Learned
Server-side filtering is always preferable to loading everything and filtering on the client. Even for small datasets, it's the right habit and the architecture that scales.