SpaceX Launcher

Overview

An application that lists all the launch programs by SpaceX. There will be a left side filter with Year, Launch success/failure and Land success/failure.

• React server side rendering with express js

• Bundled application with webpack 4

• Used sass as CSS preprocessor

• Used Redux with saga

• Created as PWA

• Rendered html stream using RenderToNodeStream

• Used HtmlWebpackPlugin for template generation

• Responsive design using CSS Grids

• Used @loadable/component for lazy loading components and created a custom lazy-load component for images using IntersectionObserver

• Unit tests using jest and enzyme

• Deployed as container on Heroku with Docker

• CI/CD for master branch using circleci to Heroku

• Hands on code - not used CRA to build the app

Scripts to run

• build : Production build, will create all the client side bundles and also copy the server script to dist-ssr directory

• start:dev : Local development start

• start : Start server with copied file ssr-dist/index.js

• test: To run the tests

• lint: To run the eslint check

Directory structure

.
└───dist
| ...
└───dist-ssr
| ...
└───package.json
└───Dockerfile
└───.circleci
│
└───src
│ └───components
│ │ ... all the functional components
│ └───services
│ | ... service files
| App.js
| app.scss
│ └───helpers
| |
| ... helper functions
│
└───webpack-config
| |
| webpack.common.js
| webpack.dev.js
| webpack.prod.js
└───server
| |
| index.js
└───static
| |
| ... static files like images, icons etc
└───spec
|
main.test.js

Working demo

Click here to see the demo

Deployed to heroku with Heroku's container registry

Web accessibility

No known problems found - achecker.ca

Lighthouse score

Desktop score : click here to see the report

Screenshots

Desktop View

Tablet View

Mobile View

Made by Kiran LM