kpratik2015 / spacex-wiki

CRA + TS + Cypress + TailwindCSS

SpaceX Wiki

This project was bootstrapped with Create React App.

Thought Process

In order to visualize what the page would look like I started breaking down the query. It was important to understand what information could be fit into a list view v/s a detailed view for the given requirements.

Possible improvements given more time

• Better understand first stage and second stage to illustrate visually.
• Better cosmetic changes.
• On reaching bottom, stop calling query if last returned result was empty array.
• Apply DRY over AHA and KISS.
• Weigh between loading data with details on load v/s loading data required by list view only and making detail view as a separate query.
• Understand which pieces of information is more valuable to the user. And in turn better represent First Stage and Second Stage.
• Handle failure states and introduce ErrorBoundary.
• Improve responsiveness.

Challenges

I started with fresh boilerplate of CRA and latest version for rest of the libraries so ran into some new problems as follows:

• Time given the requirements.
• POST body missing. Did you forget use body-parser middleware? in response when application/json was missing for Content-Type
• Fitting a select inside search bar such that it overlaps the clear icon generated by browser.
• Reducing Cumulative Layout Shift.
• Building infinite loading solution with use of offset.
• Making a makeshift modal.

Running the Application

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Running the E2E Test Suite

yarn cypress

If App is already running in development mode

yarn test:e2e

Runs App and E2E test suite consequently.