GIFmaster

This is a new version of the GIFster application. Now TypeScript, React.js and Next.js are the main technologies. The project is bootstrapped with create-next-app.

Running Guide

Using yarn (npm):

1. Clone the GIFmaster GitHub repository.

2. Open a new Terminal in the root directory and install the dependencies by running the command:

   yarn install

   or using npm:

   npm install

3. Run the application by running the command:

   yarn dev

   or using npm:

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

5. To stop the application hit Control + C in the Terminal.

Using Docker:

By pulling the container from DockerHub:

1. Open a new terminal and to pull the container, run the command:

   docker pull markmayya/gifmaster:latest

2. To run the container use the command:

   docker run -dp 3000:3000 gifmaster

By creating a new container:

1. Clone the GIFmaster GitHub repository.

2. Choose a name for your container. Open a new Terminal in the root directory and run the command:

   docker build -t <name-of-container> .

3. Run the command:

   docker run -dp 3000:3000 <name-of-container>

4. Open http://localhost:3000 with your browser to see the result.

5. To stop the container:

   1. Check the container's ID by running the command:

      docker ps

   2. Find the container and copy the ID.
   3. Run the command below to stop and remove the container:

      docker rm -f <container-ID>

Environment Variables

Environment variable	Description
GIPHY_API_KEY	Key to Giphy API
GIPHY_QUERY_BASE_URL	The base endpoint for GET requests
GIPHY_UPLOAD_BASE_URL	The base endpoint for POST requests

File structure

pages

Next.js pages.

public

Public files, such as the favicon.

src

- components

The project uses a variation of Atomic design by Brad Frost:

• atoms - basic building blocks (input field)
• molecules - 2 or more Atoms together (input field with label)
• organisms - 2 or more Molecules together (form of input fields with labels)
• pages - Page components (Favourites page)

- constants

Files that contain constants, used in the application more than once.

- context

Files for managing global React state (favourites, uploaded gifs).

- hooks

Files with custom React hooks.

- utils

Files with helper functions.

Tests

End-to-end Cypress tests are available. To run them, open a Terminal in the root directory use the command below:

yarn cy:open

or using npm:

npm run cy:open