Corporate Travel Platform

A minimal React + Vite web app for corporate travel management, designed for PM interviews and product discussions.

Features

• Home Dashboard: Main landing page with quick access to key features
• Flight Search: Interactive flight search form with mock functionality
• Hotel Booking: Hotel search and booking interface with sample hotels
• Travel Approval: Request approval workflow with form and status tracking
• Responsive Design: Clean, modern UI that works on desktop and mobile

Tech Stack

• Frontend: React 18 + Vite
• Routing: React Router DOM
• Styling: Modern CSS with CSS Variables
• Development: Vite dev server with hot reload

Setup Instructions

Clone and Install

# Clone the repository
git clone <repository-url>
cd pm-technical-challenge

# Install dependencies
npm install

# Start the development server
npm start

Access the Application

Open http://localhost:5173 in your browser.

The app should load with the home page showing "Corporate Travel Platform" and three main action buttons.

Available Scripts

• npm start - Start the development server (same as npm run dev)
• npm run dev - Start the development server with hot reload
• npm run build - Build the app for production
• npm run preview - Preview the production build locally

Application Structure

src/
├── components/
│   └── NavBar.jsx          # Navigation component
├── pages/
│   ├── Home.jsx           # Home dashboard
│   ├── Flights.jsx        # Flight search page
│   ├── Hotels.jsx         # Hotel booking page
│   └── Approval.jsx       # Travel approval page
├── App.jsx               # Main app with routing
├── main.jsx             # React entry point
├── App.css              # App-specific styles
└── index.css            # Global styles

Routes

• / - Home dashboard
• /flights - Flight search interface
• /hotels - Hotel booking interface
• /approval - Travel approval requests

For PM Interviews

This app is designed for Product Manager interviews where candidates can:

1. Explore the Interface: Navigate through all sections to understand the user flow
2. Discuss Improvements: Identify UX/UI enhancements and feature additions
3. Product Strategy: Talk about prioritization, user personas, and business impact
4. Technical Considerations: Discuss integration points, APIs, and scalability

Discussion Points

Each page includes "PM Discussion Points" sections highlighting:

• Integration opportunities
• Feature enhancement ideas
• Business considerations
• Technical implementation details
• User experience improvements

Development Notes

• All forms include basic validation and mock functionality
• Interactive elements show alerts explaining where real integrations would occur
• Responsive design principles applied throughout
• Clean, professional styling suitable for corporate environments
• No external dependencies beyond React essentials for easy setup

Next Steps for Production

1. API Integration: Connect to real flight/hotel booking services
2. Authentication: Add user login and role-based access
3. Database: Implement data persistence for bookings and approvals
4. Payment Processing: Add secure payment handling
5. Notification System: Email/SMS notifications for approvals
6. Analytics: User behavior tracking and reporting
7. Mobile App: Native mobile applications
8. Enterprise Integration: SSO, expense systems, calendar integration