Skip to content
A React based, interactive, keyboard accessible and well-designed search box.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

⚛ React Awesome Search Box 🔍

A React based, interactive, keyboard accessible and well-designed search box.

React Awesome Search Box

How to run:

  • Install dependencies: npm i;
  • Run the dev server: npm run start;
  • Test: npm run test;
  • Build: npm run build;

The good parts:

  • It's build with a community-active, open-source, widely-used framework (React).
  • It is built as a component, so it can be embedded in different pages/projects.
  • It is tested (using Jest + Enzyme).
  • I used mainly dumb-components to be easily testable.
  • The search bar is interactive and debounced.
  • The search bar keeps the user informed about the status of the search.
  • It is fully keyboard accessible.
  • Tricky part: it automatically adjusts the scroll positions to keep the elements in the viewport if using the keyboard.
  • It catches and handles errors.
  • It can generate an optimised build.
  • It handles different edge cases and status.
  • It uses CSS class namespaces.
  • It uses the latest ES6+ features (Babel).
  • The most important thing: it uses emojis.

Requires:

Tech stuff 👾:

  • React ⚛️
  • Redux 🔃
  • Redux Thunk
  • CSS
  • Jest
  • Enzyme
  • Created with Create-React-App.
You can’t perform that action at this time.