NobleStay

• 

  Home page

• 

  Show page

• 

  Review

• 

  Maps

• 

  Sign-up

💡 Inspiration The inspiration behind NobleStay came from observing how current hotel booking platforms often feel cluttered, impersonal, and overly automated. Many people — especially those not tech-savvy — struggle with usability, trust, or transparency. We wanted to create a system that prioritizes clarity, human-centric design, and seamless experience, without overwhelming the user with unnecessary AI or complexity.

🏡 What it does NobleStay is a hotel and room booking web platform built with clean UX and minimal friction. Key features include:

🔍 Browse and filter available rooms and properties

✨ View detailed listings with pricing, amenities, and map location

📝 Register as a host or guest

🏠 Create and manage listings

⭐ Rate and review listings

🧭 Navigate using integrated maps

⏳ Experience smooth UX with loading overlays for actions

It’s like a simpler, more personal version of Airbnb — focused on clarity and direct usability.

🧱 How we built it We used the MERN-inspired stack with EJS templating for server-side rendering:

MongoDB for the database

Express.js for routing and server logic

Node.js backend runtime

EJS for dynamic page rendering

Bootstrap 5 for responsive UI

TomTom API for maps and geolocation

Cloudinary for image uploads

Google Analytics for live tracking

Custom CSS + JS for interactivity (filters, loaders, and effects)

We used Git for version control and deployed it using cloud hosting.

🧗 Challenges we ran into Making the filter form work dynamically while keeping the user on the same page

Styling and timing the custom loader overlay without blocking button actions

Ensuring cross-browser compatibility and responsiveness

Deploying TomTom Maps correctly in the production environment

Keeping the design simple while adding powerful functionality

🏆 Accomplishments that we're proud of Built a fully functional, user-friendly booking platform from scratch

Designed intuitive filtering and loader mechanics to improve UX

Successfully integrated third-party services (maps, analytics, image hosting)

Deployed a complete MVP within the hackathon timeframe

Learned to balance functionality with clarity and emotion — a key part of this hackathon’s theme

📚 What we learned Deeper understanding of how to improve human experience through simple, intentional design

Gained hands-on skills with APIs, backend routing, and frontend UX

Learned how to deploy, test, and manage a live full-stack application

Realized how powerful even simple loaders, UI feedback, and content structure can be for user trust

🚀 What's next for NobleStay 🧠 Integrate AI-based suggestions (e.g. location, budget matches, seasonal offers)

📱 Launch a mobile-friendly version or dedicated app

🛡 Add more trust-based features like verified listings, secure booking, and live chat

🌐 Expand listings through public submissions

📊 Improve analytics dashboard to give hosts insights into views and performance

Built With

• bootstrap-5
• cloudinary
• css
• ejs
• express.js
• git
• github
• google-analytics
• javascript
• mongodb
• mongoose
• multer
• node.js
• tomtom-maps-api