Social GIF

Na Social GIF, você pode visualizar os GIFs que estão trending, buscar GIFs por palavras-chaves e visualizar GIFs de categorias pré-definidas. Gostou de um GIF? Você também pode favoritar ele.

Quer saber mais sobre a Social GIF? Fique a vontade para continuar lendo este readme.

*Todos os GIFs desta aplicação são fornecidos pela API do Giphy, mas, ela não é mantida pela equipe do Giphy, nem tem qualquer relação com ela.

🔥 Introdução

⚙️ Pré-requisitos

Você precisa do Node e NPM para executar esta aplicação. Acesse este link para saber como realizar as instalações deles.

🔨 Guia de instalação

Passo 1: Clone esse repositório

git clone https://github.com/EmanuelLacerda/social-gif.git

Passo 2: Acesse a pasta do respositório

cd social-gif

Passo 3: Instale as dependências

yarn

ou

npm install

Passo 04: *Crie o arquivo .env na raiz do projeto e adicione nele a API KEY do Giphy em uma variável de ambiente com o seguinte nome: VITE_API_GIPHY_KEY.

Passo 5: Execute a aplicação em dev mode

npx quasar dev

Obs.: Consulte a doc da API do Giphy para saber como gerar uma API KEY.

📦 Tecnologias usadas:

• Vue 3(Composition API com script setup)
• Tailwind CSS
• Quasar 2(Framework para construção de aplicações Vue.js)
• Pinia(Gerenciamento de estado)
• Vue-Router(Gerenciamento de rotas)
• Axios(Integração de APIs)
• Bootstrap Icons

⚙️ Funcionalidades

A aplicação tem 3 rotas: Home, Favoritos e Categorias. Cada uma delas possuem funcionalidades próprias. Abaixo segue a lista de funcionalidades de cada uma delas.

Funcionalidades disponíveis na rota Home:

• Visualizar os GIFs Trending no Giphy.
• Buscar GIFs por termos de pesquisa.
• Favoritar GIFs.
• Acessar qualquer GIF direto no Giphy.

Funcionalidades disponíveis na rota Favoritos:

• Visualizar a lista completa de GIFs favoritados.
• Remover GIFs da lista de favoritos.
• Acessar qualquer GIF direto no Giphy.

Funcionalidades disponíveis na rota Categorias:

• Filtrar GIFs pelas categorias disponibilizadas pela API do Giphy.
• Favoritar GIFs.
• Acessar qualquer GIF direto no Giphy.

⚒️ Demonstração

Visualizar os GIFs Trending no Giphy:

funcionalidade-visualizar-gifs-treding.webm

Buscar GIFs por termos de pesquisa

funcionalidade-pesquisar-gifs.webm

Favoritar GIFs

funcionalidade-favoritar.webm

Acessar GIF direto no Giphy

funcionalidade-acessar-gif-no-giphy.webm

Visualizar a lista completa de GIFs favoritados

funcionalidade-visualizar-lista-gifs-favoritados.webm

Remover GIFs da lista de favoritos

funcionalidade-remover-gif-da-lista-de-favoritos.webm

👷 Autores

• Emanuel - Front-end do projeto - @EmanuelLacerda

📄 Licença

Esse projeto está sob a licença MIT - acesse os detalhes LICENSE.md.

✉️ Contato

Se tiver alguma dúvida, quiser fazer sugestões, elogios, etc., se sinta livre para entrar em contato comigo por meio de um dos contatos abaixo:

• in/emanuel-de-souza-lacerda
• emanuelsouzalacerda@gmail.com