- Table of Contents | Indíce
Live Project | Projeto ao vivo
pixabay-image-searcher.mp4
Pixabay Image Searcher is a personal project developed in order to put my skills into practice and learn new technologies in the context of developing React applications.
The project consists of an image search system based on a text field to be filled in by the user and displays the results through a gallery of images separated by pages. Furthermore, for each image found, it is possible to visit a page that contains more details about the selected image.
As a differential for the development of this application, I implemented the options for switching between themes (light and dark) and multi-language support (Portuguese and English)
- Image search based on user input - [Techs: useDebounce Hook - React custom Hook];
- Request to the External API to obtain images data using as parameters: search term, image type, order option and page number - [Techs: Axios and Pixabay API];
- "Image type" and "Order By" selectors for search filtering - [Techs: Pixabay API];
- Page selection for search filtering - [Techs: Pixabay API];
- Dynamic routes for creating detail pages for each image found - [Techs: React-Router-Dom];
- Links for navigation between pages - [Techs: React-Router-Dom];
- Not Found Page (404) - [Techs: React-Router-Dom];
- Smooth scroll-to-top buttons for ease of navigation - [Techs: React-Scroll];
- Theme switcher (light mode and dark mode) - [Techs: Tailwind CSS and React Context API];
- Multi-language support (English and Portuguese) - [Techs: i18next, React-i18next and React Context API];
- Page entering animations - [Techs: Framer-Motion];
- SEO support on every page - [Techs: React-Helmet-Async];
- Fully responsive pages - [Techs: Tailwind CSS]
- Accessible UI Components - [Techs: Tailwind CSS and Headless UI]
- Unit and Integration Tests - [Techs: Jest and React Testing Library];
- HTML5
- CSS3
- JavaScript ES6
- TypeScript
- Tailwind CSS
- HeadlessUI
- Axios
- Pixabay API
- Framer Motion
- i18next
- Jest
- React
- React-Router-Dom v6
- React-Scroll
- React-i18next
- React-Helmet-Async
- React Testing Library
Prerequisites: node.js, npm / yarn
# Clone repository
git clone https://github.com/KlevertonOliveira/image-searcher.git
# Enter the project folder
cd image-searcher/
# Install dependencies
yarn install
or
npm install
# Follow the instructions inside the .env.example file
# Run the project
yarn dev
or
npm run devJosé Kleverton Yvens Oliveira
https://www.linkedin.com/in/klevertonoliveira/
Pixabay Image Searcher é um projeto pessoal desenvolvido com o intuito de pôr minhas habilidades em prática e aprender novas tecnologias no contexto de desenvolvimento de aplicações React.
O projeto consiste em um sistema de busca de imagens baseado em um campo de texto a ser preenchido pelo usuário e exibe os resultados através de uma galeria de imagens separadas por páginas. Além disso, para cada imagem encontrada, é possível visitar uma página que contém mais detalhes acerca da imagem selecionada.
Como diferencial para o desenvolvimento dessa aplicação, implementei as opções de troca de temas (claro e escuro) e suporte multi-idioma (português e inglês)
- Pesquisa de imagem baseada em entrada do usuário - [Techs: useDebounce Hook- React custom Hook];
- Requisição à API Externa para obtenção de dados de imagens utilizando como parâmetros: termo de busca, categoria, opção de ordenação e número da página - [Techs: Axios e Pixabay API];
- Seletores "Categoria" e "Ordenar por" para filtragem de busca - [Techs: Pixabay API];
- Seleção de página para filtragem de busca - [Techs: Pixabay API];
- Rotas dinâmicas para criação de páginas de detalhes para cada imagem encontrada - [Techs: React-Router-Dom];
- Links para navegação entre páginas - [Techs: React-Router-Dom];
- Página "Não Encontrada" (404) - [Techs: React-Router-Dom];
- Botões de rolagem suave para o topo da página para facilidade de navegação - [Techs: React-Scroll];
- Modificador de tema (modo claro e modo escuro) - [Techs: Tailwind CSS e React Context API];
- Suporte multi-idioma (Inglês e Português) - [Techs: i18next, React-i18next e React Context API];
- Animações de entrada de página - [Techs: Framer-Motion];
- Suporte SEO em todas as páginas - [Techs: React-Helmet-Async];
- Responsividade em todas as páginas - [Techs: Tailwind CSS]
- Acessibilidade em Componentes de Interface do Usuário - [Techs: Tailwind CSS e Headless UI]
- Testes unitários e de integração - [Techs: Jest and React Testing Library];
- HTML5
- CSS3
- JavaScript ES6
- TypeScript
- Tailwind CSS
- HeadlessUI
- Axios
- Pixabay API
- Framer Motion
- i18next
- Jest
- React
- React-Router-Dom v6
- React-Scroll
- React-i18next
- React-Helmet-Async
- React Testing Library
Prerequisites: node.js, npm / yarn
# Clonar o repositório
git clone https://github.com/KlevertonOliveira/image-searcher.git
# Entrar na pasta do projeto
cd image-searcher/
# Instalar dependências
yarn install
or
npm install
# Seguir as instruções dentro do arquivo .env.example
# Executar o projeto
yarn dev
ou
npm run devJosé Kleverton Yvens Oliveira