https://github.com/arjun1237/star-wars

star-wars - Urban Piper First round interview process - assignment. A searchbar that filters and lists your favourite star wars character as you type their names and on clicking, redirects to the profile page.
https://github.com/arjun1237/star-wars

css html reactjs throttling

Last synced: 8 months ago
JSON representation

star-wars - Urban Piper First round interview process - assignment. A searchbar that filters and lists your favourite star wars character as you type their names and on clicking, redirects to the profile page.

• Host: GitHub
• URL: https://github.com/arjun1237/star-wars
• Owner: arjun1237
• Created: 2021-05-28T18:28:05.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-29T22:58:34.000Z (over 4 years ago)
• Last Synced: 2025-01-09T05:00:38.486Z (10 months ago)
• Topics: css, html, reactjs, throttling
• Language: JavaScript
• Homepage:
• Size: 2.88 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Star Wars Searchbar

> A searchbar that filters and lists your favourite star wars character as you type their names and on clicking, redirects to the profile page.

## Live Demo Link

[CLICK HERE FOR LIVE DEMO](https://urban-star-wars.netlify.app/)

## Visual Intructions on how to use it

![image](https://raw.githubusercontent.com/arjun1237/star-wars/main/public/product-final.gif)

## Testing

The App was tested with Cypress. Several use cases was implemented and passed as per the conditions put forward.

![image](https://raw.githubusercontent.com/arjun1237/star-wars/main/src/resources/pics/cypress.png)

## Built With

- React js

- Styled Components

## Optmization

- Used Combination of throttling and debounce to reduce API calls made for each key stroke on the searchbar.

- Currently trying to Memoize Person Page based on params, but approached few hurdles. If you are interested in doing so, please feel free to fork it and raise a PR once done.

## Acknowledgments

- Utilized prop drilling and basic concepts of react to build this application

- Used SWABI API for all API calls

## Getting Started

**Just fork it and fell free to use it.**

To get a local copy up and running follow these simple example steps.

### Prerequisites

1 Install Node js in your local system

2 Code Editor

3 Browser (optional)

### Install

After making a clone of this repo open your cmd/terminal and use

`npm install` (this will install all the dependencies )

### Starting app

Once everything has been installed, go to root folder. In the terminal type:

`npm start` (this will open localhost and start the app)

## Authors

👤 **Arjun K Prasad**

- Portfolio: (http://portfolio-arjun1237.vercel.app/)

- Github: [@arjun1237](https://github.com/arjun1237/)

- Hackerrank: [@arjun1237](https://www.hackerrank.com/arjun1237)

- Linkedin: [@arjun1237](https://www.linkedin.com/in/arjun1237/)

- Email: (arjun1237.kp@gmail.com)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the [issues page](https://github.com/arjun1237/star-wars/issues).

## Show your support

Give a ⭐️ if you like this project!

## 📝 License

This project is [MIT](./LICENSE) licensed.