Projeto Random User

📌 Índice de conteúdos

• Screenshots do Projeto
• Sobre o Projeto
• Tecnologias
• Features
• Instalação
• Autor

---

📸 Screenshots do Projeto

✨ Tela de listagem dos usuários com filtros, ordenadores e com um design responsivo ✨

---

🧐 Sobre o Projeto

Este projeto tem o objetivo de listar os usuários da API, com dados paginados, filtrados e ordenados, e com a funcionalidade de poder pesquisar pelo nome.

---

🌐 Tecnologias Usadas

✅ Next.js - Framework JS.

✅ Typescript - Para fazer a tipagem.

✅ Axios - Biblioteca usada para fazer as requisições http.

✅ React Query - Para gerenciar o cache e o armazenamento dos dados.

✅ Random User API - API usada para obter os dados dos usuários aleatórios.

---

🚩 Features

• Campo para buscar por usuários pelo nome.
• Filtrar usuários por Estado.
• Filtrar usuários por Gênero.
• Ordenar usuários por nome.
• Ordenar usuários por idade.
• Dados paginados.
• Configurar a quantidade de pessoas exibidas por página.
• Layout responsivo.

---

❓ Como instalar e executar o projeto

Acessando direto pelo site:

• Você pode clicar nesse link e acessar a aplicação que está hospedada na plataforma da Vercel.

Executar na máquina local:

(certifique-se de ter instalado na sua máquina o Node.

1. Abra o terminal na pasta desejada para clonar o repositório e execute o comando:

git clone https://github.com/pedro-afonso/random-user.git

2. Depois de concluído, execute os seguintes comandos para iniciar:

cd random-user

Para instalar as dependências:

npm install

Você precisa criar um arquivo .env e adicionar a variável

NEXT_PUBLIC_BACKEND_URL='http://localhost:3000/api'

A variável NEXT_PUBLIC_BACKEND_URL é usada como url base do servidor.

Com isso já é possível iniciar a aplicação

npm run dev

4. Por fim, abra a pasta clonada em seu editor de códigos favorito e faça as suas alterações! xD

---

📕 Autor

Feito por Pedro Afonso.

🔗 LinkedIn: https://www.linkedin.com/in/pedro-a-fonso/