A Furever Homes é um espaço onde pessoas que resgatam animais de rua conseguem ajudar esses animais à encontrar um novo lar, ao mesmo tempo que pessoas procurando por um novo bichinho podem vir e encontrar seu novo pet, tudo em um único lugar.

A Furever Homes possui quatro páginas. Sua página principal é a home, onde a lista de pets e a maiorias das funcionalidades se encontram.

Na página de login temos o formulário de login e botões para levar o usuário para tanto a página home e a página de registro de usuário. O usuário é automaticamente levado à página home depois do login ser efetuado.

A página de registro de usuário contém o formulário para registrar um novo usuário, além de botões para a página de login e a página home. O usuário é automaticamente levado à página de login depois do registro ser feito.

Temos também uma tela de erro caso o usuário entre na URL errada. Nessa página temos um botão que leva o usuário para a página home.

E por último, temos a página home como página principal. Na página home temos a lista de pets para adoção, filtros de pesquisa por nome do pet e filtros pelo tipo do pet, entre "cachorro", "gato" e "outros". Também temos uma funcionalidade de alterar os botões no header conforme o usuário esteja logado ou não (isso também se aplica as funcionalidades de adotar um pet ou colocar um pet para adoção). Se o usuário não estiver logado ele vai ver os botões de pesquisa, cadastrar usuário e logar. Se o usuário estiver logado ele vai ver os botões de pesquisa, cadastrar um pet e deslogar. Os cards dos pets para adoção são clicáveis, abrindo um card maior com mais informações sobre o pet selecionado. Dentro desse card também temos um botão para fazer a adoção. Se o usuário estiver logado ele pode adotar o pet, se não, um modal de login vai abrir. O pet sendo adotado faz com que seu card mude de cor e não abra mais, também é colocado um carimbo de adotado. Temos um botão para por um pet para adoção. Ao clicar nele um modal abre e você consegue cadastrar um pet para entrar na lista de adoção.

• HTML: O HTML tem um papel fundamental para a aplicação funcionar corretamente.
• CSS: O CSS tem papel fundamental para indicar a interação do usuário com a interface gráfica.
• TypeScript: O TypeScript proporcionará todas as funcionalidades da aplicação.
• React: O React faz com que a aplicação seja uma SPA (single page application).
• Figma: Aqui se encontra o figma do projeto, onde foi decidida a estrutura e estilização.

• fireworks react version 2.10.3
• react hook form version 7.43.9
• react alice carousel version 2.7.1
• react icons version 4.8.0
• react router dom version 6.10.0
• react toastify version 9.1.2
• react tooltip version 5.11.2
• styled components version 5.3.10
• zod version 3.21.4
• axios version 1.3.6
• vite version 4.3.2

Finalizado.

Veja o site Furever Homes em funcionamento.

Neste repositório você tem acesso a todos os arquivos e códigos da aplicação.
Já neste repositório você tem acesso a todos os arquivos da fake API utilizada.

Para abrir o projeto, basta clonar o repositório e digitar o comando npm install no terminal, para instalar os pacotes do projeto.
Para rodar o projeto, bastar digitar o comando npm run dev no terminal, e navegar para o local host especificado.

Amanda Dolci Figueiredo | Bianca Toller | Bruno Cruz | Mateus Feldhaus