/giphy-kendo-project

Site feito utilizando a API do GIPHY e Kendo UI como biblioteca

Primary LanguageTypeScriptMIT LicenseMIT

GIPHY API - Search Gifs and stickers 🖼️

🚀Interface simples feita consumindo a API do GIPHY e filtrando GIFs escolhidos pelo usuário.

✅ GIPHY PROJECT 🖼️ Projeto concluído ✅

🛠️ Instalação


Para instalar esse projeto e executar localmente:

  1. Clone o repositório em sua máquina:

    git clone https://github.com/StaanB/giphy-project.git
  2. Navegue até o diretório do projeto:

    cd giphy-project
  3. Instale as dependências com npm, yarn ou pnpm:

    npm install
    yarn install
    pnpm install
  4. Começe o servidor de desenvolvimento com npm, yarn ou pnpm:

    npm run dev
    yarn dev
    pnpm dev
  5. Abra seu navegador e acesse http://localhost:5173 (ou outro servidor local dependendo da máquina) para acessar o projeto.



✅ Objetivo


💡 O objetivo era apresentar o consumo de APIs simples como o da GIPHY, consumos simples de API são importantes para o desenvolvimento Front-end logo é importante praticar o máximo possível.



💻 Tecnologias


Tecnologias que eu usei nesse projeto:

  • ReactJS - Framework utilizado para desenvolver a aplciação
  • TypeScript - Linguagem tipada para compilar javascript.
  • Kendo UI - Biblioteca de React UI utilizada para fazer os principais componentes do projeto.
  • Jest - Os testes do projeto foram feitos com JestJS


💡Features


  • Pesquisar GIFs no site de busca
  • Acionar um GIF para ser redirecionado ao site original para baixar ou copiar o link do GIF
  • Responsividade para dispositivos móveis


📚 Documentação


  1. Buscar GIFs
  • Para buscar GIFs basta pesquisar o conteúdo de interesse na barra de pesquisa.

Search GIF


  1. Após buscar os GIFs serão renderizados
  • Ao começar a digitar na barra de pesquisa os GIFs já serão renderizados

Rendered GIFs


  1. Ao clicar em um GIF
  • Ao clicar em um link você será redirecionado para a página do GIPHY para baixar ou copiar o link se desejar

Click Link



  1. Ver outros projetos!😁
  • Possuo outros projetos com consumo de diversas APIs, uma feita por mim, sinta-se livre para ver!




🧑🏻Author


Foto Stanley Brenner
Stanley Brenner
🚀

Made by Stanley 👋🏽 contact me!

Linkedin Badge Gmail Badge