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

Overview

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

You might also like...
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

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

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

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

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

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

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

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

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

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

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

Mihail Nesterov 2 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/

Gabe Scholz 13 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

id6 12 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

Carlos González 22 Oct 10, 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

Intesys 3 Nov 17, 2022
Inteliver React SDK. Inteliver is an image management as a service.

This repository is Inteliver's official SDK for react framework. Using this SDK you can integrate your react project with inteliver image management service.

Inteliver 2 Sep 8, 2022
Carpooling service, connecting people and enable sharing time together

Carpooling service, connecting people and enable sharing time together

Chiwon Choi 0 Dec 24, 2021
Auth Service sample source. It supports Solana and EVM-compatiable chains

This repository is Auth Service sample source. It supports Solana and EVM-compatiable chains, more chains and more features coming soon! Learn more visit Particle Network.

Particle Network 7 Aug 20, 2022
An application for use in recording the details and maintenance history of the air conditioning assets of an HVAC service provider.

This is an application for use in recording the details and maintenance history of the air conditioning assets of an HVAC service provider. It has been developed using a MERN SPA framework and accordingly, utilizes a MongoDB database, Express, React and Node with GraphQL.

Mark Horsfall 3 Apr 15, 2022
GitHub repository search app in React, TypeScript and GraphQL

GitHub repository search app in React, TypeScript and GraphQL

Hesbon Osoro 3 Dec 21, 2022