SWAPI Character Explorer is a React application that allows users to explore characters from the Star Wars universe and view information about their homeworld.

• Demo
• Features
• Specifications
• Tech Decisions
• Folder Structure
• Tech Debts
• Technologies Used
• Setup
• License

Live demo available here.

• Browse characters from the Star Wars universe.
• View detailed information about each character, including their name, height, mass, gender and homeworld.
• Filter characters from a specific planet.

This application was developed following the mock-up and the established prerequisites in this document.

First, the components that make up the page and which entities/data are present on the screen were identified. Therefore, we have the following prototype:

With the main components defined, we have the following data model for the presented information:

export interface People {
  name: string;
  height: string;
  mass: string;
  gender: string;
  homeworld: string;
  url: string;
}

export interface Planet {
  name: string;
  url: string;
}

• (SWR) Considering that we need to display information about Character and HomeWorld asynchronously, I decided to use the SWR library, which facilitates the management of information requests and has an intelligent cache system (stale-while-revalidate), improving the performance of the application and offering a smoother experience.

• CSS Modules Considering the simplicity of the page styles, i decided to use only CSS modules for styling the page elements because it has a ready-to-use setup with Create React App and has the advantages of having style isolation avoiding conflicting class names, readability and maintenance (as associated styles are kept close to the component itself).

• Relative Sizes (Responsiveness) Using relative sizes (rem) so that the elements of the page adapt to the screen size, thus achieving greater visual consistency and a more cohesive user experience.

• Firebase Hosting Firebase Hosting offers a quick and easy deployment experience for hosting frontend applications, making it simple to display development results in a production environment.

- api // all files/logics used to use in the API
- components // primitive components used in the entire app
- pages // all pages used on the route system
- types // the app global types

• Improve the component isolation, creating more basic components like Button, List and Select.
• Create a infinity loading feature that loads more characters every time the user scrolls to the bottom of the page.
• Add a search by name feature that finds a character by their name.
• Add babel module resolver to simplify file imports.
• Improve the image sizes for mobile devices.

• React
• SWAPI (Star Wars API) for fetching character and homeworld data
• React Router for navigation
• SWR for fetch content and cache data
• Firebase (for deployment)

How to set up and run the project locally.

1. Clone the repository:

  git clone https://github.com/valtermartins1301/frontend-challenge.git

2. Install dependencies:

  cd frontend-challenge
  yarn install

3. Start the development server:

  yarn start

4. Open http://localhost:3000 in your browser to view the app.

MIT