Travel Booking Dashboard App
Build a responsive travel booking dashboard app based on the provided designs. The challenge includes multiple screens such as a flight booking homepage, hotel details page, taxi details page, and user profile page. Use HTML for structure, CSS for styling, and JavaScript for interactivity and page behavior. Integrate at least one public or mock API to display travel-related or location-based data dynamically. For example, users can search by location, display hotel or flight examples, render destination suggestions, or show mock booking results based on city selection. The final result should focus on clean dashboard layout, reusable UI sections, responsive design, sidebar navigation, filters, cards, and dynamic content rendering.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build at least 4 screens based on the provided designs
- Use semantic HTML5 structure
- Style the full application using CSS
- Use JavaScript for navigation, filtering, and dynamic rendering
- Create a sidebar navigation with active states
- Build a top bar with user account and action buttons
- Create a flight booking home screen with tabs and search form
- Create a hotel details screen with gallery, details, rating, and pricing
- Create a taxi details screen with vehicle information and supplier details
- Create a profile screen with personal information and profile completion UI
- Use reusable cards and consistent styling across all pages
- Integrate at least one API or mock API for dynamic travel or location data
- Allow users to search or display results for example locations
- Render data dynamically using JavaScript
- Add hover and active states for buttons, tabs, and navigation items
- Make the full layout responsive for tablet and mobile devices
- Keep code organized across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.