fusion-giphy

Web application that serves the singular purpose of searching and displaying GIF images via the GIPHY Search API.

Built using Uber's Fusion.JS framework (UI and styling), and the GIPHY SDK for Web which implements custom hooks based on React's useContext (state management).

Overview

• Utilizes the GIPHY image search API and shows the results in a 1, 2, or 3-column scrollable view.
• Users enter queries (such as "kittens") into a search box, automatically triggering the API request and populating the screen.
• Implements endless scrolling, automatically requesting and displaying more images when the user scrolls to the bottom of the view.

Prerequisites

You must have the following tech installed on your local development environment.

Node: https://nodejs.org/en/download

Git: https://git-scm.com/downloads

Yarn: https://classic.yarnpkg.com/en/docs/install

Getting Started

Clone the GitHub repo:

git clone https://github.com/flavioespinoza/fusion-giphy.git

CD into the cloned directory:

cd fusion-giphy

Install dependencies:

yarn install

Run the application:

yarn dev

The app will be visible on your preferred browser:

http://localhost:3000/

Usage

Type a term into the search box:

The images will display automatically:

Click the icons to the upper right to change the columns displayed:

Click the icon to the upper left to clear the search:

Scroll to your heart's content: :)

Choice of Framework

This application is built with Uber's web platform FusionJS.

My first thought when approaching this challenge was to use Create React App; then, I noted the mention of FusionJS in the requirements, so I decided to take a look and see what it was all about, and I have to say, Fusion is the best SSR platform I've ever used. It's much better than other SSR web platforms I've used, such as NextJS. I like the __BROWSER__ and __NODE__ global variables that allow you to do your front-end and server-side code in the same JavaScript file.

The thing that impressed me most was how easy it was to set things up. I started developing this project in Create React App but then switched to FusionJS to see how easy (or difficult) it would be to use the components I had built using the GIPHY Web SDK. All of the components that I made in the Create React App worked in FusionJS.

GIPHY SDK for Web

My approach to any project always starts with a fair amount of reading (e.g., research). After digging deep into the GIPHY SDK for Web, I decided to leverage those resources to concentrate the bulk of my effort on learning Fusion.

I had one primary concern about GIPHY's fetch API, which used the GIPHY API key on the front-end. However, after reading through their documentation, I found this:

GIPHY APIs are designed to be used on the client-side (and hence the API key too). You should go ahead and use it that way. Once development is complete - please apply for Production access for the key through the Developer Dashboard, which removes Rate limits associated with a beta key, so you don't have to worry about high traffic.

Lastly, and most importantly - GIPHY has monitors set up for API key abuse, and we'll reach out to you if anything happens. We definitely don't want you to worry about it.

Testing

Tests are implemented using Fusion's Component Testing.

yarn test

• Complete Component Testing
• Add Unit Testing
• Add Snapshot Testing
• Add Simulation Testing
• Add Integration Testing

Things to Add Before Production

• Add automated CI/CD via Digital Ocean:
  • App Platform
• Peer Review and discussion about application architecture, code, testing, UI/UX

import React, { useRef, useEffect, useState } from 'react';

function useRenderCount() {
    const count = useRef(1);
    useEffect(() => {
        count.current += 1;
    });
    return count.current;
}

export default function App() {
    const count = useRenderCount();
    const [name, setName] = useState('Flavio');
    const otherName = name === 'Flavio' ? 'Jeff' : 'Flavio';
    
    return (<div>
        <p>Hello, {name}</p>
        <p>Render count: {count}</p>
        <button onClick={() => setName(otherName)}>Change Name</button>
    </div>);
}

import React, { useState, useEffect } from 'react';

export default function Clock() {
    const now = new Date().toLocaleTimeString();
    const [date, setDate] = useState(now);
    const tick = () => {
        const newNow = new Date().toLocaleTimeString();
        setDate(newNow);
    }
    useEffect(() => {
        const timerID = setInterval(() => {
            tick();
        }, 1000);
        return () => {
            clearInterval(timerID);
        };
    }, [])
    return (
        <div>
            <h1>Hello, World!</h1>
            <h2>It is {date}</h2>
        </div>
    )
}