There were a total of 5 questions involved in this react interview. The time limit for the interview was 8 hours. However, finishing all the questions was not mandatory. Near Earth Object Web Service(Neows) API was used to generate data for the UI.
The assesment was based on:
- Appearance and UX of your web app
- Maintainability and Quality of your code
- General approach to solve problems
- Use of dependencies other than required ones
- Your own time management and prioritisation
Required Dependencies were:
✔ node16+
✔ npm8+
✔ react (latest)
✔ typescript (latest)
✔ github
✔ axios and react-query ( https://react-query.tanstack.com/overview )
✔ all code is written in .ts or .tsx
Tasks
Create a spreadsheet that shows a list of up to 10 today’s most recent near-earth objects. Each row represents one asteroid. The list is sorted by time of the close approach. The latest close approach is shown first. The spreadsheet features the following columns.- Time: Date and time of the close approach- Asteroid name: Name of the asteroid- Potential Hazard: Is it a potentially hazardous asteroid? (yes/no)- Estimated diameter: Maximum estimated diameter of the asteroid in meters rounded- Miss distance: Distance by which asteroid missed earth in kilometers rounded- Velocity: Relative velocity of asteroid in kilometers per hour rounded Remember to use react-query to implement the query. Refer to the NeoWs API docs!.
Let’s extend the previously created spreadsheet. We want to be able to select a date range to show asteroids of that date range. To allow this, make two pickers for start date and end date. Also, make a “today” button that automatically selects today as the date range. By default, show today’s most recent objects as before. Whenever a new date is selected, the new data is fetched automatically.
In the previous task, we showed only up to 10 rows. Since now, our table is able to show many more rows, its time to introduce pagination. Paginate your spreadsheet to show 10 results with pagination. Note: Data doesn’t have to be re-fetched when changing pages.
Add another column to the table which allows a user to write a note to themselves about an asteroid. This note is persisted locally on the user’s machine. Whenever data is fetched, show the note contents automatically. If no note is found for the row, show a blank field.
Use react-query to cache the results of each query based on the start and end dates to speed up loading when browsing different dates.
Based on the data from the spreadsheet, create a bar chart where the x axis shows individual asteroids, and the y axis shows their velocity.