Travel Booking Platform - Frontend Code Challenge

Overview

This project is a responsive React.js web application that mimics the functionality and design of a travel booking platform. The application is developed to replicate the key sections of the provided Figma design while focusing on accessibility, responsiveness, and state management.

Live Demo

Features

• Header: Displays a catchy heading and a "Try Now" call-to-action button.
• Hero Section: Image section with the tagline "Explore the unseen, Experience the unforgettable."
• Fastest Way to Sell Travel: Cards highlighting the steps to sell travel: "Subscribe", "Customize", "Start selling."
• Comprehensive Features: Sections showcasing search, booking, payment integration, and more.
• Customizable UI: Easily modify content and layout.

Tech Stack

• React.js for component-based architecture.
• CSS/Styled Components for responsive styling.
• Fake API Data simulated using useEffect hooks.
• Vercel for deployment.

Project Setup

1. Clone the repository:

   git clone https://github.com/kaleabo/travel-booking-platform.git

2. Navigate to the project directory:

   cd travel-booking-platform

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open the app at http://localhost:3000 in your browser.

Key Sections

• Search, Book, and Ancillaries: Mock data fetching for flights, hotels, and extra services.
• Payments & Order Management: UI components to demonstrate payment and order handling.
• Responsive Design: Optimized for various screen sizes using CSS media queries.

Testing

• Unit tests are included to ensure component functionality. Run tests using:

  npm test

Deployment

This app is deployed on Vercel. To deploy your own version:

1. Build the application:

   npm run build

2. Push the repository to a Git platform (GitHub, GitLab, etc.).
3. Link your repository to Vercel for automated deployment.

Accessibility

• WCAG-compliant components with ARIA attributes to ensure the app is accessible for all users.

Evaluation Criteria

• Code Quality: Clean, readable, and well-organized code.
• UI/UX: Close alignment with the Figma design.
• Responsiveness: Fluid design across different devices.
• Functionality: Accurate implementation of core features with mock data.
• Git Repository: Clear commit history to show progress.

Useful Links

• Figma Design

Contact

For inquiries or further discussion, reach out via:

• Email: kalide091260@gmail.com