Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

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.

About

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

Resources

Releases

No releases published

Packages

No packages published