A sample frontend project on React-Next.js-TypeScript
A sample frontend application for browsing and destroying near Earth asteroids.
- Asteroids info is loaded from NASA API
- There are 3 routes: Main page (all asteroids), Single asteroid page and Asteroids to destroy page.
- All pages are built with responsive layout.
- Asteroids are loaded indefinitely by scroll.
- Initially, the data for 7 days from current date is fetched, it is added to a page from the React state continuously by a scroll. When the end of the data is reached, a new part of the data for the next 7 days is fetched and added to the state.
- The size of the asteroid picture is based on the size from the data.
- Potentially hazardous asteroids are marked with red and by the text at the right section.
- There is a filter to show only hazardous asteroids. The distance from Earth can be shown in kilometers or in Lunar distance.
- Each asteroid can be marked for destroying.
- The data is fetched by a separate call to the API.
- The route is built dynamically, the asteroid id is taken from the url string.
- Additional info shows every asteroid approach to Earth from 1900 to 2200.
- Each asteroid can be marked for destroying from this page also.
- The list of all asteroids marked for destroying is shown.
- Each asteroid can be removed from the list.
- A confirmation button sends a team to destroy selected asteroids.
- React (functional components)
- Next.js
- SWR (client-side data fetching)
- TypeScript
- Design improvements
- Animations
- Better work with types
- Removal of extra API request at main page mount
- Possible use of server-side data fetching
- Using state manager
- Back to top button