SpaceX Dash🚀

About

It is a personal project inspired from SpaceX Go!

It uses the data from the open-source r/SpaceX REST API, which can be found here.

This Project was bootstrapped with create-react-app.

Features

• Launch tracking & details: detailed list of past & upcoming launches.
• Company details: general company details & achievements.
• Data can be retained in url: able to filter with launches, and date, and can combine multiple filters. The current page with pagination and filters applied are retained via the URL.

Run the app locally

$ git clone git@github.com:arpitnath/spacex.git

env variable: REACT_APP_SPACEX_BASE_API=https://api.spacexdata.com/v3/

$ npm install

$ npm start - This will start the application and run on port 3000

Folder Structure

src
└───index.tsx              # Application entry point
└───App.tsx                # Application routes
└───pages/                 # Views of the App
└───components/            # All the components live here
└───styles/scss            # StyleSheets
    └───components/        # component styles
    └───pages/             # pages styles
    └───_mixins.scss       # all mixins
    └───_variables.scss    # scss/sass variables
    └───styles.module.scss # common styles & all styles endpoint
    └───global.scss        # global styles
└───assets/                # images / logo
└───helpers
    └───History.ts         # history object
    └───Hooks.ts           # Custom Hooks
    └───icons.ts           # all icons used
    └───tableheadData.ts   # table head titles
    └───types.ts           # Types
    └───utils.ts           # Shared Logic

There you go, run & edit the project. Enjoy 🚀

Contributing

If you want to take the time to make this project better, please go ahead. Then, you can open an new issue and create a PR

Feel free to reach out to me @arpitnath if you have any questions or feedback or any suggestion for improvements!