An assignment from Urban Piper. A star wars search component, which lets user search characters and view their details.
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
- 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.
- Lets user analyze the details of characters.
- A back to home button to get back to home page.
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.
- Images - Google | Star Wars
- Icons - Google Material Fonts
- References - MDN | w3schools | Clip Path Generator
- HTML
- CSS
- JavaScript
- React
- Styled Components
- React-Router-DOM
- Axios
- Cypress