Giphy Infinite

Made by vertocode with Vue + Quasar

Principal Links

• Deployed App 🚀
• Video Demo ▶️

Jump To

• Introduction
• Features
• Technologies
• Installation
• Folder Structure
• How to run e2e tests
• How to run lint
• License

Introduction

Giphy Infinite is a web application that allows you to search for gifs using the Giphy API. It has a clean and simple interface, and it is also responsive. The app has infinite scroll, so you can keep scrolling and the app will keep loading more gifs. You can also click on a gif to see it in full size, and you can download the gif's to share it with your friends.

It was created as a challenge project for SGBR in a interview process.

Features

• We can search for gifs or stickers using the Giphy API
• We can see the gifs or stickers in full size
• We can download the gifs or stickers
• We can see the gifs or stickers in an infinite scroll
• We can see the gifs or stickers in a responsive layout working on mobile, tablet and desktop
• We can see the loading state when the gifs or stickers are being loaded

Technologies

• Vue
• Quasar
• Typescript
• Pinia
• Giphy API
• Axios
• Cypress
• Tailwind CSS
• ESLint
• Prettier

Installation

1. Clone the repository

git clone [email protected]:vertocode/giphy-infinite.git

2. Install the dependencies (I'm using bun, but you can use other like npm or yarn)

cd giphy-infinite
bun i

3. Create a .env file in the root of the project and add the Giphy API key

VUE_APP_GIPHY_API_KEY=your-api-key

4. Run the app

bun dev

Now it should be able to access the app at http://localhost:9000. (If this port is already in use, will be used the next available port)

Folder Structure

Folder	Description
/src	The main application folder, where the app source are located.
/src/assets	assets used in the platform are located.
/src/boot	Axios configuration is located.
/src/components	Almost all vue components are located. The ones that is not a layout or page.
/src/composables	Used to create custom composables.
/src/css	The default css configuration.
/src/layouts	Vue component used as a layout.
/src/pages	Vue component used as a page.
/src/router	Vue router config.
/src/stores	Store + config of Pinia.
/src/types	Types used to TypeScript.
/src/utils	Where is stored common functions.
/cypress	E2E Tests with Cypress.
/public	Public images.

How to run e2e tests

1. Run the app

bun dev

You can run in headless or ui mode.

Headless mode

bun cypress:run

UI mode

bun cypress:open

How to run lint

bun lint

License

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