/spaceX-Demo

Primary LanguageTypeScript

SpaceX

This project was generated with Angular CLI version 9.1.4.

Contents

Introduction

A front-end application which would help users list and browse all launches by SpaceX program. alt text

Application Overview

Frameworks

For this application, Angular framework is used. Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

Design Approach

Design for this application made keeping the responsive approach using flexbox and media query. No frameworks like bootstrap is used, only basic CSS is being used.

Backend

API end point for the first-time page load without any Filters: https://api.spaceXdata.com/v3/launches?limit=100

API end point with Filters applied: Launch Success Filter: https://api.spaceXdata.com/v3/launches?limit=100&launch_success=true

Launch & Land Filter: https://api.spaceXdata.com/v3/launches?limit=100&launch_success=true&land_success=true

All: https://api.spaceXdata.com/v3/launches?limit=100&launch_success=true&land_success=true&launch_year=2014

Deployment

Built Files

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build. This is by default given by Angular. For this application, this command is being used ng build --prod --baseHref="https://dsmriti.github.io/spaceX-Demo/" in order to make directly deployable using gh-pages(given by github).

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Gitub Pages Configuartion

You need to make settings in github repository to make application deployed on github pages. You can go to Settings tab> GitHub Pages, select you branch and folder where built files are generated.

alt text

CI Pipeline

After doing the above changes, add the built files to docs folder and make the path set to "outputPath": "docs/" in angular.json file. Save the changes and push code to repository. You can now view the changes as it is now published.

alt text

Running unit tests

Run ng test to execute the unit tests via Karma. Unit testing done using Karma for this application as shown in below image. alt text

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

LightHouse Report

Desktop

alt text

Mobile

alt text