A React Typescript search interface for the popular Giphy.com service.

Last update: May 18, 2022

giphy-search

A React Typescript search interface for the popular Giphy.com service.

Lets get to it

Scope

We want you to create a search interface for Giphy. To do so, you will need to sign up to create a Giphy App and obtain an API key. You can do so here.

Once you have your API Key you are tasked with creating a working search interface to display Giphy search results which you feel is nice to use.

What we're looking for

  1. It is intuitive to use
  2. It loads quickly
  3. It feels quick to use
  4. It handles errors nicely
  5. You don't reinvent the wheel

3rd party code

Please use any of the npm modules you want use to create this app. In fact, we don't want you to write everything from scratch.

We have a few exceptions:

  1. Please don't rely on a single module which magically satisfies all of the requirements above (i.e. some kind of Giphy search component).
  2. Please use the axios module do make the API requests and parse the results yourself. i.e. Please don't use the giphy npm module, however if you find a rad npm module to lay the images out, then please go for it!

Do your best

We're interested in learning what you think makes an app feel good to use. Please spend some time thinking about positive user experiences you've had online and try to bring a bit of that into your work.

And Finally

This is a take home test, that said don't spend hours perfecting every aspect of it, we'd like to see it back in 24 hours.

When you're done

Send it to [email protected]

Building and running on localhost

First install dependencies:

npm install

To start a local dev environment:

npm run start

To create a production build:

npm run build-prod

To create a development build:

npm run build-dev

Running

npm run start

Visit the page via http://localhost:8080/

Credits

Made with createapp.dev

GitHub

https://github.com/ryan-c44/giphy-search-devika
You might also like...

User interface for Trunion web app

Tronion UI Run dev server: npm run dev Home page is in pages/index.js, the user pages are in pages/account directory, theme file utils/theme.js, modal

Dec 23, 2021

This is a Web User Interface Sample Project. Using ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Mar 22, 2022

A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board 📌 A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

Mar 25, 2022

Elegant, accessible search component for React.

Elegant, accessible search component for React.

Elegant, accessible search component for React with recent searches & current location functionality. Installation npm i react-find --save Usage impo

May 22, 2022

Responsive React Repository Search

Responsive React Repository Search

React Repository Search A repository search application using Github's repository search API that displays results based on search terms. The results

May 15, 2022

This is a react app that I created for an intern test, involves using a search and price filter features

This is a react app that I created for an intern test, involves using a search and price filter features

FRONTEND ENGINEERING INTERN APPLICATION This is an application i created for an intern application test. VIEW APP Available Scripts In the project dir

Nov 4, 2021

React Typesense Search 10,000 Trending Movies using Instantsearch

React Typesense Search 10,000 Trending Movies using Instantsearch

Getting Started with Create React App This project was bootstrapped with Create React App. Demo Available Scripts In the project directory, you can ru

Mar 21, 2022

A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

Feb 20, 2022

Redux bindings for client-side search

Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Jun 16, 2022
Food Service Prototype. React/Redux/Typescript/UIKit/Sass

Food Service Prototype. React/Redux/Typescript/UIKit/Sass

Feb 19, 2022
Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Lenses in React Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state. Example You can construct a lens/

Feb 24, 2022
Open source authentication and authorization service, container-native, PassportJS-native, built with React and Node.

id6 Authentication and authorization as a service Docs - Twitter Why id6 ? I wrote id6 out of frustration of re-writing authentication and authorizati

Oct 31, 2021
React implementation of the service locator pattern using Hooks, Context API, and Inversify.

React Service Locator An implementation of the service locator pattern for React 16.13+ using Hooks, Context API, and Inversify. Features Service cont

Mar 22, 2022
A React library to show an administrative UI for the Mock Service Worker JS library
A React library to show an administrative UI for the Mock Service Worker JS library

A React library to show an administrative UI for the Mock Service Worker JS library

May 27, 2022
Carpooling service, connecting people and enable sharing time together
Carpooling service, connecting people and enable sharing time together

Carpooling service, connecting people and enable sharing time together

Dec 24, 2021
GitHub repository search app in React, TypeScript and GraphQL

GitHub repository search app in React, TypeScript and GraphQL

Apr 3, 2022
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

May 5, 2022
The LinkedIn Learning course React.js: Building an Interface
The LinkedIn Learning course React.js: Building an Interface

React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available

Oct 14, 2021
React Translator is a Web Interface created for make the creation of locales.json more easier.

React Translator is a Web Interface created for make the creation of locales.json more easier. Theses locales files can be used in the package @oneforx/react-translator

May 27, 2022