conference-room-booking-system/frontend/src/App.tsx

/**
 * App component
 * Root component for the conference room booking frontend.
 * Sets up routing for landing, booking, and confirmation pages.
 * @component
 * @returns {JSX.Element} App root UI
 */

// External imports
import React, { useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

// Internal component imports
import BookingPage from "./pages/BookingPage";
import ConfirmationPage from "./pages/ConfirmationPage";
import LandingPage from "./pages/LandingPage";

// Context imports
import { BookingProvider } from "./context/BookingContext";
import { RoomProvider } from "./context/RoomContext";
import { UserProvider } from "./context/UserContext";

// Utility/helper imports
import { logger } from "./utils/logger";

const App: React.FC = () => {
  useEffect(() => {
    logger.info("[App] Mounted");
    return () => {
      logger.info("[App] Unmounted");
    };
  }, []);
  return (
    <RoomProvider>
      <UserProvider>
        <BookingProvider>
          <Router>
            <Routes>
              <Route path="/" element={<LandingPage />} />
              <Route path="/booking" element={<BookingPage />} />
              <Route path="/confirmation" element={<ConfirmationPage />} />
            </Routes>
          </Router>
        </BookingProvider>
      </UserProvider>
    </RoomProvider>
  );
};

export default App;