Hybrowlabs Assignment

This project display starwars characters fetched from SWAPI Api

Tech Stack

React, TailwindCSS, React-Query

Demo

https://swapi-prac.netlify.app/

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run start

Screenshots

Features

• Glassmorphism
• Pagination
• Search Feature
• Individual Route for each character

Optimizations

• Optimised the search feature using Debouncing Technique

Appendix

Debouncing Snippet

const debounce = function (fn, d) {
  let timerId;
  return function () {
    const context = this,
      args = arguments;
    clearTimeout(timerId);
    timerId = setTimeout(function () {
      fn.apply(context, args);
    }, d);
  };
};