https://github.com/sadanandpai/ps_xt_assignment

The SpaceX Launch Programs with Filter
https://github.com/sadanandpai/ps_xt_assignment

Last synced: 6 months ago
JSON representation

The SpaceX Launch Programs with Filter

• Host: GitHub
• URL: https://github.com/sadanandpai/ps_xt_assignment
• Owner: sadanandpai
• Created: 2020-12-01T15:48:06.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2020-12-01T16:12:15.000Z (almost 5 years ago)
• Last Synced: 2024-04-14T09:04:17.089Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://sadanandpai.github.io/ps_xt_assignment/
• Size: 1.6 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ps-xt-assignment



    



## Stack

- HTML, CSS and JavaScript are used as the core technologies

- ReactJS is used to manage the DOM manipulations and data rendering

- React router is used to manage internal routing at user interface

## Design

- The web app is built considering mobile first approach with progressive enhancements

- The UI majorly divided in to 2 sections

  - Filter section

  - Mission data display section

- The UI is made responsive using media query as mentioned for Mobile View, Tablet View and Desktop View

- Multiple filters can applied by clicking on the filters

- Clear all filters will clear applied filters



    

    

    



## Technical Details

- The filter section designed using flex with 50% width for each filter items

- The Mission data display section is designed using flex and the items are wrapped to display in multiple lines

- The components are divided into 3 parts

  - Filter

  - Mission Data display

  - Mission card

- Loader is displayed when API response is awaiting

- No data is displayed to when no filtered items are present to be displayed

- Filters are reflected using query params in URL which works for refresh as well

## Performance

- Insustry standard best practices are followed

- Application is built considering the various factors to deliver high performance such as

- Images are loaded lazily

- Animations are done using CSS



    

    



## Build and Packaging

- Parcel is used to build and package the front end code

  - Run: `parcel ./source_code/index.html`

  - Build: `parcel build ./source_code/index.html`