Simple spaceX web where you can explore about spacex history , launchs and rockets.
Deployed version of this site : spacex-web-app
This web has following page of contents:
- Landing Page
- History
- Timeline Page
- Launches
- List of launches(cards)
- Launch Deatil page
- List of launches(cards)
- Rockets
- List of rockets(cards)
- Rocket Deatil page
- List of rockets(cards)
- History
in this page displayed basic informtaion about spaceX.
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.
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.
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).
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).
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.
To get a local copy up and running follow these simple steps.
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
(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/
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.
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.
- 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.
- 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.
find the component architecture design for this project :
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.