Travlr.com
A Hotel Booking App
Travlr.com is a hotel booking web app I built to practice front-end development and UI design. I wanted to create a user facing interface that is functional and feels smooth, clear, and modern.
The app lets users search for hotels, view filtered results, and book accommodations, while admins can manage listings. The design allowed me to explore layout, interaction, and component design.
Built With:
React.js
Node.js
JWT
Stripe
MongoDB
Process
For this project, I wanted to focus on creating a clean, responsive interface to life using React. I took inspiration from booking sites I admire like Hotels.com and Booking.com. I built out reusable UI components that felt smooth and intuitive across devices. To support basic booking flows and admin views, I added a simple backend with Node and MongoDB. It was a great way to sharpen my front-end skills and explore how design and functionality work together.
Features
Intuitive search functionality
Users can search by location, dates, and number of guests.
Real-time filtering instantly displays tailored results
Seamless booking management
Users can view their bookings with clear details on check-in/check-out dates and total costs.
Admins can manage hotel listings, availability, and pricing.
Integrated Stripe payments ensure secure transactions
Responsive design
Optimized for desktop and mobile devices to enhance usability across platforms.
Ensures a consistent and visually appealing experience.
Lessons Learned
Working on Travlr.com taught me to think more modularly by designing reusable components from the start. Planning for responsiveness early on made the whole build process smoother and more intuitive.
Even with a lightweight backend, simulating real booking logic helped me understand how the front and back ends need to work together. More than anything, I learned how to turn a visual idea into something people can actually use.