npm i
npm run dev
Due to the tight time budget, I build main feature of the application, what I have:
- Use query params as a state, so it can be easily shareable
- Built components that can be reused in other parts of the application
- Build Filters and list of spaceships
- Basic empty state
What I would do if I had more time:
- Revisit components and check if they are built to be reusable of they looks fine, cover with tests.
- Decide what it's better to use for styling, tailwind I used for the first time just for fun so it can be little messy.
- Adapt it to be responsive
- Revisit types, create types for each entity and put them to shareable.
- Add memo for filtering, or use server side filtering if we have to much spaceships to choose from
- Think about pagination in case we have too much spaceships
- Build layout component that can render Filters/List and also handle Loading/Error states.
- Add unit test for the whole feature.
- Revisit filtering util, make it the way that we can easily configure different kind of filters on the way. smth like this spaceships.filter((spaceship) => [colorsFilter(colors, mode), optionsFilter(options), speedFilter(speed)].every(filter => filter(spaceship)))