AdvancedWeb12-20 hours+320 XPMentor reviewed

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.

travel
dashboard
booking
html
css
javascript
api
flights
hotels
taxi
profile

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Brand colours

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

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

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

0 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...