🌍 TravelBook - Modern Travel Booking Web App

🔗 Live Demo

A sleek, mobile-first travel booking web application with a modern dark mode UI, built with vanilla HTML, CSS, and JavaScript. Designed exclusively for 375px mobile viewport with beautiful neumorphic design elements.

✨ Features

🎨 Modern Design

• Mobile-Only Focus: Optimized for 375px width, centered on larger screens
• Dark Mode Support: Beautiful dark theme with smooth transitions
• Neumorphic UI: Soft shadows and modern card designs
• Smooth Animations: Micro-interactions and page transitions

🔍 Core Functionality

• Smart Search: Autocomplete destination search with popular suggestions
• Date Selection: Custom date picker with modern UI
• Guest Management: Interactive stepper controls for adults/children
• Hotel Discovery: Featured hotels carousel with swipe support
• Advanced Filters: Price range, star ratings, and amenities
• Saved Hotels: Favorite hotels with localStorage persistence
• User Profile: Customizable preferences including currency (USD/EUR/GBP)

🎯 Technical Highlights

• Pure Vanilla Stack: No frameworks, just HTML, CSS, and JavaScript
• Performance Optimized: Pre-rendered sections with instant navigation
• Responsive Animations: 140ms transitions with cubic-bezier easing
• LocalStorage Integration: Persistent user preferences and saved items
• Accessibility: ARIA labels and keyboard navigation support

📱 Screenshots

Light Mode

Dark Mode

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No build tools or dependencies required!

Installation

1. Clone the repository:

git clone https://github.com/mutlukurt/travelapp.git
cd travelapp

2. Open the app:

open index.html
# or simply double-click index.html

That's it! The app runs entirely in the browser with no server required.

🎨 Design System

Color Palette

Light Theme

--bg-cream: #F5F5F5;
--card: #FFFFFF;
--text: #1A1D1F;
--accent: #9ACD32;

Dark Theme

--bg-cream: #0E1113;
--card: #15191C;
--text: #E7ECF1;
--accent: #98D96F;

Typography

• Font Family: Inter
• Sizes: 28px (display), 22px (h1), 18px (h2), 14px (body), 12px (caption)
• Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

🏗️ Project Structure

travelapp/
├── index.html          # Main HTML structure
├── styles.css          # All styling with dark mode support
├── app.js             # JavaScript functionality
├── assets/            # Screenshots and images
└── README.md          # Project documentation

🛠️ Technical Details

Mobile-First Approach

• Fixed 375px width container
• No responsive breakpoints
• Optimized for touch interactions
• Native-like navigation with tab bar

Performance Optimizations

• Single-page application with instant route switching
• Pre-rendered sections with hidden attribute toggling
• Debounced autocomplete (120ms)
• Lazy loading for search results
• CSS animations using GPU-accelerated properties

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Mutlu Kurt

• GitHub: @mutlukurt

🙏 Acknowledgments

• Design inspired by modern travel booking platforms
• Icons from inline SVG for better performance
• Images from Unsplash for demo content

---

Made with ❤️ using vanilla JavaScript