Giphy search app

Live url: https://flight.github.io/giphy/

React + Typescript + Tailwind CSS + daisyUI + Storybook + Vite + ESLint + Prettier + Husky + Vitest + jest-dom (React Testing Library) + c8 + Cypress

Initial setup:

1. Install the node.js https://nodejs.org/en/download/

2. Install the latest version of pnpm package manager npm install -g pnpm or brew install pnpm

3. Install the dependencies pnpm install

4. Create .env.local file in the project root folder with your GIPHY API key

   VITE_GIPHY_API_KEY=YOUR_KEY

Running

pnpm start

Storybook

The solution uses Storybook as the components style guide.

To run the preview: pnpm storybook

To build the production Storybook setup: pnpm build-storybook

To run the preview server with the production Storybook build: pnpm preview-storybook

Production build

pnpm build

To run the preview server with the production build:

pnpm preview

Testing

Live mode pnpm test

Coverage check pnpm coverage

E2E tests pnpm e2e or pnpm e2e:silent to run in silent mode (on CI, for example)

Pre-commit checks pnpm pre-commit

Running in Docker:

1. Install Docker Desktop.

2. Create .env.local file in the project root folder with your GIPHY API key

   VITE_GIPHY_API_KEY=YOUR_KEY

3. Run docker compose:

   docker-compose up

Navigate to the exposed urls:

• Main app: http://localhost:5173/
• Storybook: http://localhost:6006/

To run the tests inside of the container, first connect to it:

docker exec -it giphy-frontend-1 "bash"

Then run the needed commands like:

pnpm test:silent

Design decisions

• Tailwind CSS + PostCSS for tree-shakable utility classes and minimum amount of hand-written CSS
• daisyUI for the basic components like cards, buttons, selects and inputs
• Storybook as the components style guide, so the individual components can be build in the sandbox environment
• Vite for bundling everything (much faster than Webpack)
• ESLint + Prettier for linting and prettifying the codeHusky for pre-commit hooks
• Vitest + jest-dom (React Testing Library) + c8 for the unit testing
• Cypress + Cypress Testing Library for the end-to-end testing

Good sides of the implementation

• The dummy components and the business logic are completely separated, so the solution is can use Storybook pnpm storybook
• The design is mobile-first, so can be used on any type of the devices
• The building takes a few seconds
• The unit-tests run takes 2-3 seconds
• The E2E tests run takes a few seconds together with production build creation and serving

Next steps

• Add tags autocomplete
• Add endless scrolling
• Add caching of the search results to the local storage
• Improve test coverage
• Improve the error handling and connect the TrackJS or Sentry IO
• Set up CI / CD process. For example, using GitHub Actions or Gitlab CI/CD