richardblondet/react-giphy-client

This is a simple app that lets you find gifs using the Giphy API. Its made using ReactJs & NextJS, to serve as an example application. It was named Gifinder just for prototyping purposes.

Gifinder

Gifinder is a simple react application prototype for finding GIFS. Because this is a prototype, it uses the GIPHY public API.

Getting Started

To run this application please follow these instructions.

Installing

Run the following commands to start the app in development mode. Please check the package.json script for further modes.

First clone this repo and enter to the app directory:

$ git clone https://github.com/richardblondet/react-giphy-client.git && cd react-giphy-client

Then install all dependencies and start the app:

npm install && npm run dev

Built With

• React - The web framework used
• NextJS - The react config framework
• React Icons by Netlify - Feather Icons for beautiful open source icons
• NPM - Dependency management
• NodeJS

Improvements opportunities

This application was not developed using TDD so no test libraries were used. These can be easily achieved using this Jest or Mocha. An example can be found here and here. Some other things can be easily implemented and would improve the quality of this application. For example:

• Better error handling.
• Documenting components using this convention.
• Adding type checking with propTypes to components for better controlling as recommended here.
• Adding service workers to prefetch gifs results in the background with no user interaction for faster loading gifs while opening the lightbox and navigating in it.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Richard Blondet - RichardBlondet

License

This project is licensed under the MIT License - see the LICENSE file for details.