An ultra-premium, full-stack travel booking platform inspired by Airbnb.
WanderLust is a high-end web application where users can seamlessly explore, list, and manage travel accommodations. Upgraded with a stunning glassmorphic UI, sleek micro-animations, and responsive edge-to-edge grids, it provides a premium booking experience.
The project demonstrates robust full-stack capabilities including real-world CRUD operations, authentication, authorization, interactive mapping, and a RESTful architecture.
- Glassmorphism Aesthetics: Beautiful frosted glass containers, dynamic floating navbars, and soft shadow rendering.
- Dynamic Grid System: Edge-to-edge fluid layouts that scale perfectly on ultra-wide monitors.
- Micro-Interactions: Smooth CSS hover transitions, image scale-zooming, and elegant button states.
- Secure local authentication strategy via Passport.js.
- Encrypted user sessions & cookie management.
- Server-side authorization verifying listing/review ownership before enabling modifications.
- Complete CRUD functionality for travel properties.
- Cloudinary Integration: Reliable, optimized remote image uploading for property photos.
- Real-time tax calculation toggles (pre-tax vs. post-tax pricing views).
- Dynamic category filtering (Mountains, Beach, Arctic, Castles, etc.).
- Geolocation & Mapping: Integrated map rendering pin-pointing the exact coordinates of the property.
- Review System: Authenticated users can leave 1-5 star ratings and detailed reviews, visualized in elegant bubble cards.
| Category | Technologies |
|---|---|
| Frontend | HTML5, CSS3, EJS (Embedded JavaScript), Bootstrap 5, FontAwesome |
| Backend | Node.js, Express.js |
| Database | MongoDB, Mongoose ODM |
| Security & Auth | Passport.js, Express-Session, Joi (Data Validation) |
| Cloud & APIs | Cloudinary (Image Hosting), Leaflet/Mapbox (Maps) |
| Deployment | Render |
WanderLust/
├── models/ # Mongoose DB schemas (Listing, Review, User)
├── routes/ # Express router endpoints
├── controllers/ # Core business logic for routes
├── views/ # EJS templates & dynamic UI layouts
├── public/ # Static assets (Custom CSS, Client-side JS, Images)
├── middleware/ # Auth checks, validation middleware
├── utils/ # Error handling & async wrappers
├── app.js # Application entry point
└── package.json # Dependencies & scripts
git clone https://github.com/darshan02parmar/WanderLust.git
cd WanderLustnpm installCreate a .env file in the root directory and add your credentials:
# Database
ATLASDB_URL=your_mongodb_atlas_connection_string
NODE_ENV=development
# Security
SECRET=your_super_secret_session_key
# Cloudinary (Image Storage)
CLOUD_NAME=your_cloudinary_name
CLOUDINARY_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET=your_cloudinary_api_secretnpm run dev
# OR
node app.jsVisit the application at: http://localhost:8080
Building WanderLust provided immense practical experience in:
- Architecting a complete full-stack web application from scratch.
- Mastering the Model-View-Controller (MVC) design pattern.
- Building secure, stateful user sessions and role-based permissions.
- Upgrading standard frameworks (Bootstrap) with custom, high-end CSS aesthetics.
- Integrating third-party cloud services (Cloudinary, Geocoding APIs).
Darshan Parmar
- 🔗 GitHub: @darshan02parmar
⭐ If you found this project helpful or inspiring, please consider giving it a star on GitHub!