Skip to content

The Flight Tracking Application is a web-based platform built with React and Redux, designed to provide users with real-time flight status information. It allows users to search for flights, view flight details, and navigate through different sections of the application seamlessly.

Notifications You must be signed in to change notification settings

vikram0104irctc/Travelopia_Assignment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 

Repository files navigation

Flight Tracking Application

Overview

The Flight Tracking Application is a web-based platform built with React and Redux, designed to provide users with real-time flight status information. It allows users to search for flights, view flight details, and navigate through different sections of the application seamlessly.

Presentation

Installation and Usage

To run the Flight Tracking Application locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/vikram0104irctc/Travelopia_Assignment.git
    cd flight_status_board
  2. Install the required packages:

     npm install
  3. Run the application:

    npm run dev

    The application will be running at http://localhost:3000/.

  4. Test the application:

    npm run test
  5. Build the application:

    npm run build

    The build files will be generated in the build folder.

Project Structure

The project consists of the following main directories and files:

Travelopia_Assignment/
├── flight_status_board/
│   ├── src/
│   │   ├── components/
│   │   │   ├── FlightCard.tsx
│   │   │   ├── FlightTable.tsx
|   |   |   |── FlightBoard.tsx
│   │   │   ├── Navbar.tsx
│   │   │   ├── Sidebar.tsx
│   │   ├── pages/
│   │   │   ├── FlightDetails.tsx
│   │   │   ├── notfound.tsx
│   │   ├── redux/
│   │   │   ├── action.tsx
│   │   │   ├── reducer.tsx
│   │   │   ├── store.tsx
│   │   ├── utils/
│   │   │   ├── formatDate.tsx
│   │   ├── App.tsx
│   │   ├── main.tsx
│   ├── public/
│   │   ├── favicon.ico
|   |── index.html
│   ├── package.json
|── ── README.md
  • src/: The main source folder containing all application code.
    • components/: Contains reusable React components.
      • Navbar.tsx: Navigation bar for the application.
      • Sidebar.tsx: Sidebar for easy navigation between sections.
      • FlightCard.tsx: Displays individual flight information in a card format.
      • FlightTable.tsx: Renders a table view of all available flights.
      • FlightDetails.tsx: Displays detailed information about a specific flight.
    • redux/: Contains Redux setup files.
      • action.ts: Defines action types and action creators for updating flight data.
      • reducer.ts: Contains the reducer function to manage flight state.
      • store.ts: Configures and creates the Redux store.
    • utils/: Contains utility functions for formatting dates and times.
      • formateDate.ts: Functions to format departure times and dates.
    • App.tsx: Main application component that sets up routing.
    • index.tsx: Entry point of the application.

Pages and Components

1. Navbar

Purpose: The Navbar provides a search feature for users to find flights by flight number or airline name.
Key Features:

  • Search input that triggers API calls to fetch flight data.

  • Displays the search results dynamically as the user types.

    alt text

2. Sidebar

Purpose: The Sidebar offers navigation links to different sections of the application, enhancing user experience.
Links:

  • Home: Redirects to the main flight listing page.

  • History: Takes users to their flight history (to be implemented).

  • Tickets: Accesses users’ ticket information (to be implemented).

    alt text

3. FlightCard

Purpose: The FlightCard component displays a summary of individual flights.
Key Features:

  • Shows the airline, status, origin, destination, and formatted departure time.

  • Visual indicators for flight status using colored badges.

    alt text

4. FlightTable

Purpose: Renders a table listing all available flights with detailed information.
Key Features:

  • Clickable flight numbers redirect users to the FlightDetails page.

  • Displays flight number, airline, origin, destination, departure time, and status.

  • Color-coded status indicators for better visibility.

    alt text

5. FlightDetails

Purpose: Displays detailed information about a selected flight.
Key Features:

  • Shows airline name, flight duration, and detailed departure/arrival information.

  • Displays a visual representation of the flight route.

    alt text

Redux Integration

State Management

The application uses Redux for state management, facilitating efficient data handling and global state access. The state consists of:

  • Flight Data: All available flight information.
  • Recent Flight Data: Recently fetched flight status data.

Actions

  • SET_FLIGHT_DATA: Updates the global flight data.
  • SET_RECENT_FLIGHT_DATA: Updates the recent flight data.

Action Creators

  • dataUpdate(data: dataType[]): Dispatches an action to update flight data.
  • currentStatusDataUpdate(data: dataType[]): Dispatches an action to update recent flight data.

Reducer

The flightStatusReducer function handles actions related to flight data updates and returns the new state accordingly.

Store Configuration

The Redux store is created using createStore from Redux, applying the flight status reducer to manage the application's state.

Utilities

  • formateDate.ts: Contains utility functions for formatting flight departure times and dates, ensuring that the time is displayed in a user-friendly format.

Conclusion

This Flight Tracking Application effectively combines modern React features with Redux for state management, providing a robust solution for users looking to track flights. Future enhancements could include a detailed history section and ticket management functionalities.

About

The Flight Tracking Application is a web-based platform built with React and Redux, designed to provide users with real-time flight status information. It allows users to search for flights, view flight details, and navigate through different sections of the application seamlessly.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published