An application that provides a lot of information about Mars.
App demo: https://marsinfoapp.web.app
At the end of the top navbar there is Credits&Info modal button. You can get the all the information about the app.
You can see daily picture provided by NASA APis by selecting a date or random date.
The are two maps. Each map has 3 layers you can choose.
-
Earth map with your location and your local weather conditions. When you click on the blue point on the first map you'll see a popup with another information such as exchange rates for your local currency and Covid situation in your country, your IP address and coordinates.
-
Mars map with Nasa's operational Mars lander and rovers locations (three devices as Feb, 2022). When you click on the icon, you will see information about the lander or rover.
-
At the bottom of the page is a graph showing Martian weather conditions over the past seven days.
All data about Mars are provided by NASA APis.
There is a 3D model of Mars generated by CesiumJS. You can choose one of two layers. On the Mars model there are three Nasa's operational devices (as Feb, 2022). When you click on the icon you will see information about the lander or one of two rovers.
There is an accordion with two tabs. The first tab show pictures from Mars taken by Curiosity Mars Rover (operational). The second one shows pictures taken by inactive rovers on Mars: Opportunity and Spirit. Pictures are provided by NASA APis. You can watch the pictures in a lightbox.
This is 3D animation showing Mars based on Three.js library and Nasa's 3D .glb Model of Mars.
- The API keys for and some API https addresses are not hosted on the <GitHub.com>.
- Responsiveness is not complete yet.
- TypeScript and React are used to built the App.
- Cesium and Resium are used to render the 3D model of Mars.
- Leaflet and OpenLayers are used to render 2D maps of Earth and Mars.
- Styled-Components and Sass are used to customize the UI.
- Framer Motion and React-Spring are used to generate the animations.
- UI components are taken from: React Bootstrap.
- Fetching data is done by using : Axios.
- Charts are rendered by: Chart.js.
- Client-side routing is done using: React Router.
- Table is generated using: React Table.
- Global state of the App is maintained by: Redux.
- Nasa's Mars 3D .glb Model is rendered using: Three.js.
- Other libraries used to build the App: GreenSock, React-CountUp, React-Datepicker, and Simple-React-Lightbox.
- NASA Astronomy Picture of the Day, pictures taken by Mars Rovers and Mars Weather Conditions are taken from from: NASA APIs.
- Maps of Mars are provided by: OpenPlanetary.org.
- World Imagery is provided by: ArcGIS.
- Local weather conditions are provided by: OpenWeatherMap.
- Mars Imagery is provided by: USGS - Astrogeology Science Center.
- Covid Data is provided by: mathdroid/covid-19-api (temporarily unavailable).
- Currency Exchange Rates are provided by: ExchangeRate-API.
- IP Geolocation API is provided by: IPWHOIS.IO.
- Earth maps are provided by: Stamen Maps and OpenStreetMap.
- Package @craco/craco is used to override the standard Create React App.
- Nasa Mars 3D .glb Model was taken from: Nasa - Solar System Exploration.
- Those tutorial helped me to build the app: APOD, Animated Modal, Flying Text, Navbar and React-Spring.