Skip to content

This project was a assignment for my first tech job. They asked me create a few pages using third party API.

Notifications You must be signed in to change notification settings

veerasaraha/spacex-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Version : 1.0.0

SpaceX - Web App

Simple spaceX web where you can explore about spacex history , launchs and rockets.
Deployed version of this site : spacex-web-app

Table Of Contents

General Info

This web has following page of contents:

  • Landing Page
    • History
      • Timeline Page
    • Launches
      • List of launches(cards)
        • Launch Deatil page
    • Rockets
      • List of rockets(cards)
        • Rocket Deatil page

Main Pages

Home Page

in this page displayed basic informtaion about spaceX.

Sub Pages

History

This page has spacex historical events deatils.
Displayed Deatils : Name of historical event , year , description and link to article.
Feature : page has ScrollDown and ScrollUp buttons with ease transition.

Launches

This page contains list of all launches that was organised by spaceX.
Displayed Deatils : Name , deacription , date and link to view full deatils about launch.
Feature : added simple search , pagination and scrollDown button.

Rockets

This page contains list of rocket cards where each card with will show details about rocket.
Displayed Deatils : Name, image ,sort deacription , date , and link to view full deatils.
Feature : added simple filter (by name).

Detail Pages

Launch Deatil page

This page displays detailed information about each launch like overview ,rocket Info , link to know about rocket,
1st stage and 2nd stage details, launch site , launch ship and links to social media (To know more about launch).

Rocket Deatil page

This page displays detailed information about each rocket like overview , engine , payload , thrust level , 1st and 2nd stage deatils.
It has image slider abut the rockets.

Getting Started

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

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

npm

npm install

above command you will get installed all the dependencies to run this project locally

Installation

(i).Clone the repo

git clone https://github.com/github_username/repo_name.git

(ii).Install NPM packages

npm start

(iii).Visit App
http://localhost:3000/

Technologies

Main Stack

ReactJS - JavaScript library that is used for building user interfaces specifically for single-page
CSS - Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document.

Libraries

React-Router-Dom - Used to navigate the user to requested page without loading the web browser. Axios - It used to fetch data from the server with ease.
Lodash - Used some util function from this library.
Moment - It helps to get a better version of Date.

Features

  • To Get to know about spacex or you wish to view whenever you want You can install this as native app
  • This supports PWD ( progressive web application ) which you can install it as native andriod app.

Upcoming

  • In the upcoming versions of this app may include Advance filter using sort by year or ascending and descending order like that.
  • Improve user interface design
  • Can include more pages ( in that case must use any ** State Management Tool **)
  • Improve SEO optimization
  • Can improve responsiveness to landscape orientation.

Architecture

find the component architecture design for this project :

API

This web application uses open source and public API provided by SPACEX.

Visit here => SpaceX API
This app consumes multiple API endpoints from this public API.

About

This project was a assignment for my first tech job. They asked me create a few pages using third party API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published