Skip to content

The SpaceX Launch Dashboard is a web app providing real-time data on SpaceX launches using the SpaceX API. Users can filter, search, and explore mission details such as names, dates, locations, rocket specs, and statuses. Built with React, TypeScript, and Tailwind CSS, it offers an intuitive and interactive user experience.

Notifications You must be signed in to change notification settings

rashidpbi/SpaceX-Launch-Information-Dashboard

Repository files navigation

SpaceX Launch Information Dashboard

Overview

The SpaceX Launch Information Dashboard is an interactive web application designed to provide users with comprehensive details about SpaceX launches. Leveraging the SpaceX API, this dashboard offers real-time data on past, present, and future launches, complete with rich information such as launch dates, locations, mission objectives, rocket details, and launch status. The application is built with React and features a dynamic, user-friendly interface, including filters, search capabilities, and detailed modals for in-depth launch information.

Features

  • Real-Time Data: Fetches and displays the latest launch data from the SpaceX API.
  • Interactive Filters: Users can filter launches by date, location, mission name, and status.
  • Search Functionality: Quickly find specific launches with an intuitive search bar.
  • Detailed Launch Modals: Click on any launch to view detailed information in a modal dialog.
  • Responsive Design: Fully responsive layout ensures a seamless experience across devices.
  • Clean and Modern UI: Utilizes modern web design principles for an attractive and easy-to-use interface.

Technologies Used

  • React: For building the dynamic user interface.
  • TypeScript: Ensuring robust type safety throughout the application.
  • Tailwind CSS: For efficient and responsive styling.
  • SpaceX API: The primary data source for all launch information.

Getting Started

To get a local copy up and running follow these simple steps:

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repo:
    git clone https://github.com/rashidpbi/SpaceX-Launch-Information-Dashboard.git
  2. Navigate to the project directory:
    cd spacex
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm start

Usage

  • Navigate to the application in your web browser.
  • Use the filters and search bar to find specific launches.
  • Click on a launch row to open a modal with detailed information about that launch.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

  • SpaceX API for providing comprehensive launch data.
  • React for the powerful front-end framework.
  • Tailwind CSS for the responsive and modern design framework.

Contact

rashidpbi

Project Link:

About

The SpaceX Launch Dashboard is a web app providing real-time data on SpaceX launches using the SpaceX API. Users can filter, search, and explore mission details such as names, dates, locations, rocket specs, and statuses. Built with React, TypeScript, and Tailwind CSS, it offers an intuitive and interactive user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages