/star-wars-urban

A star wars search component, which lets users search characters and views their details.

Primary LanguageJavaScript

Star Wars Urban

An assignment from Urban Piper. A star wars search component, which lets user search characters and view their details.

Live Demo

Usage


Clone this repository to your local system.
git clone [repo link]

Install the dependencies using the following command.
yarn install

Run the app using the following command.
yarn start

To run test.
yarn run cypress

Features

Home Page

  • Users can search a character.
  • A user can navigate the search results via mouse or keyboard arrow keys.
  • When a user navigates between search results, the input value changes to the selected search card value.
  • When a user clicks outside the search box the search result closes and when he/she clicks on the input box the search results are persisted if there is no change in query.
  • A click on clear button will clear input query.
  • Lets user select a character with mouse click or enter key which will redirect to person page.

Person Page

  • Lets user analyze the details of characters.
  • A back to home button to get back to home page.

Credits

I don't own the content such as images or icons on this web app, this was purely developed with an intent of learning and fun.

Tech Stack

  • HTML
  • CSS
  • JavaScript

Libraries

  • React
  • Styled Components
  • React-Router-DOM
  • Axios
  • Cypress

Screenshots

two one

Test Results

image image

Contributors

Akshay Kadam