Full StackCompletedFeatured SystemJun 2024 – Aug 2024

WanderLust — Travel Exploration & Accommodation Marketplace

Full-stack travel listing platform featuring interactive Mapbox geolocation, Cloudinary cloud media delivery, dynamic tax calculation, and review authorization.

Source Code Live Demo Documentation

Demo Accounts & Test Credentials

2 Test Roles

Use these pre-configured accounts to test live features across different user roles without registering.

Open App to Login

Select Role to Test:Active: Admin / Host

User ID / Email (Admin / Host)

[email protected]

Password

••••••••••••

Role Note:Owns initial seed listings; can create, edit, and delete hosted properties; can test image replacements via Cloudinary; can review stays and delete owned reviews.

WanderLust — Travel Exploration & Accommodation Marketplace

Technologies & Architecture Stack

Node.jsExpress.jsMongoDBMongooseJavaScript (ES6+)EJSejs-mateBootstrap 5Mapbox GL JSMapbox Geocoding SDKCloudinaryMulterPassport.jsconnect-mongoexpress-sessionJoiRESTful APIsHTML5CSS3

Project Overview

WanderLust is an end-to-end travel accommodation platform inspired by Airbnb, engineered to connect hosts worldwide with travelers seeking verified, unique accommodations. Built following the Model-View-Controller (MVC) architectural pattern, the platform integrates forward geocoding with interactive geospatial mapping via Mapbox GL JS, automated image processing and CDN delivery with Cloudinary, session persistence with MongoDB Atlas, and strict server-side schema validations using Joi.

The Engineering Problem

Travelers often face fragmented booking experiences marked by inaccurate property locations, sluggish page loads caused by unoptimized media uploads, and untrusted review systems lacking authorization boundaries. From a system perspective, the application required robust referential integrity (preventing orphaned reviews upon listing deletion), stateful session persistence across stateless server restarts, and reliable address-to-coordinate transformation with fallback mechanisms.

The Solution

Built a modular Express.js web server with RESTful routing and Mongoose ODM models. Forward geocoding converts raw string addresses into GeoJSON Point coordinates, rendered dynamically on interactive Mapbox maps with pins and custom popups. Integrated Multer with Cloudinary storage to ingest multipart image uploads with automatic aspect resizing (w_250 thumbnail generation). Implemented Passport.js authentication paired with custom authorization middleware (isOwner, isReviewAuthor) to guarantee data integrity across all CRUD actions.

System Architecture & Data Flow

MVC Pattern & RESTful API Pipeline: 1. Client Layer: Server-rendered EJS templates using ejs-mate layouts, Bootstrap 5 responsive grid, and client-side tax computation persisting state via localStorage. 2. Routing & Middleware Pipeline: Express Router delegates requests through sequential middleware layers: session lookup (connect-mongo), authentication (isLoggedIn), authorization checks (isOwner / isReviewAuthor), and request payload validation (Joi). 3. Controller Layer: Async controller handlers wrapped in wrapAsync execute core business logic, interact with Mapbox Geocoding and Cloudinary APIs, and handle responses. 4. Persistence Layer: MongoDB Atlas manages relational references across Listing, Review, and User schemas, running Mongoose post('findOneAndDelete') lifecycle hooks for automated cascade deletions.

Core Engineering Features

Interactive Mapbox GL JS geolocation mapping with forward geocoding, custom pins, popups, and coordinate fallbacks.

Cloudinary CDN media pipeline with Multer multipart handling and on-the-fly image transformations.

Complete RESTful CRUD operations with granular authorization policies (ownership verification on edits and deletions).

Nested review & 5-star rating system with Mongoose cascading hooks that automatically purge orphaned reviews.

Instant keyword search querying title, location, and country simultaneously using case-insensitive RegExp matching.

Horizontal category filter supporting 11 accommodation categories with URL-parameter synchronization.

Dynamic 18% GST price calculator switch that updates listing rates in real time and persists user preference via localStorage.

Session management using connect-mongo with a 7-day TTL and 24-hour lazy touch updates to minimize database load.

Dual-tier validation architecture enforcing client-side Bootstrap form checks alongside declarative server-side Joi schemas.

Smart cold-start database auto-seeding mechanism ensuring zero-downtime demonstration on newly deployed instances.

Technical Challenges & Overcoming Them

Address-to-Coordinate Geocoding: Integrated Mapbox Geocoding SDK with defensive coordinate extraction, fallback defaults, and a graceful UI state if tokens are missing.

Cascading Referential Integrity: Implemented a Mongoose 'findOneAndDelete' post-hook to automatically delete all associated reviews when a parent listing is removed.

Post-Authentication Return Redirection: Created a custom 'saveRedirectUrl' middleware saving req.originalUrl to req.session so users return to their intended page after logging in.

Optimized Media Transformations: Leveraged Cloudinary dynamic URL injection to generate lightweight w_250 preview thumbnails on listing edit forms.

Async Error Handling Without Try/Catch Clutter: Designed a higher-order wrapAsync utility wrapping Express route handlers to funnel async rejections directly to the centralized error handler.

Tax Switch State Retention: Engineered client-side DOM manipulation utilizing custom data-base-price attributes and localStorage synchronization across page refreshes.

Results & Impact

- 100% RESTful Architecture: Full compliance across resource endpoints for listings, reviews, and user sessions. - Optimized Image Ingestion: Uploaded listing photos are offloaded to Cloudinary CDN, reducing primary server payload and storage bottlenecks. - Zero Orphaned Records: Automated database middleware guarantees zero review leakage on listing deletions. - High Availability & Resilience: Automated database seed check on boot prevents empty-state failures during live recruiter evaluations.

Key Takeaways

- Deepened proficiency in the Model-View-Controller (MVC) architectural paradigm and clean separation of concerns. - Mastered third-party cloud SDK integrations (Mapbox Geocoding/GL JS and Cloudinary Media API). - Gained practical experience designing role-based route guards and securing session cookies (httpOnly, maxAge, MongoStore). - Learned to handle edge-case schema validations declaratively using Joi to protect endpoints from malformed payloads.

Future Roadmap

- Integrate Stripe / Razorpay for instant booking transactions and calendar reservation management. - Implement real-time host-traveler messaging using WebSockets (Socket.io). - Add OAuth 2.0 social authentication (Google / GitHub login) alongside Passport Local. - Integrate Redis caching for high-frequency queries such as trending category listings.

Back to Projects Discuss This Project