Starship - Tally - Take home test

This is a take home test made with React/Vite that shows two different pages:

• Home page: all the starships are being fetched from SWAPI API
• Favorite page: renders all the favorite starships selected by the user

Note: if the user tries to enter to a unknown page then a NotFound page will be rendered

Vercel deployment

Vercel deployment

How to run it?

Make sure you are using Node v18.16.0 or similar

First, make sure you have the following env var in your .env.local file (root folder):

VITE_API_URL="https://swapi.dev/api"

yarn install

yarn dev

How to run tests?

yarn test

yarn test:ui

Technologies used:

• TypeScript
• Vite
• Vitest
• Chakra UI
• Lottie
• SWR
• Context
• Axios
• Prettier
• Eslint
• Lint staged
• Husky

Folder structure

• assets/
  • empty-animation.json
  • empty_heart.svg
  • full_heart.svg
  • full_star.svg
  • half_star.svg
  • home_logo.jpg
  • index.ts
  • starship.jpg
• components/
  • EmptyState/
  • NavBar/
  • PageHeader/
  • PaginationButton/
  • RatingStars/
  • StarShipCard/
  • index.ts
• context/
  • FavoritesContext.tsx
  • NotesContext.tsx
• hooks/
  • index.ts
  • useIsShipFavorite.ts
  • useToggleFavoriteShip.ts
• layouts/
  • MainLayout/
  • index.ts
• pages/
  • Favorites/
  • NotFound/
  • StarShipList/
  • index.ts
• router/
  • Router.tsx
  • index.ts
• types/
  • index.ts
• App.tsx
• constants.ts
• main.tsx
• theme.ts
• vite-env.d.ts

Screenshots