Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devkayos/getpet
Projeto de adoção de animais de estimação do curso de node.js, aplicação completa com API no padrão REST feito com typescript e front feito com React, typescript e tailwind
https://github.com/devkayos/getpet
Last synced: about 4 hours ago
JSON representation
Projeto de adoção de animais de estimação do curso de node.js, aplicação completa com API no padrão REST feito com typescript e front feito com React, typescript e tailwind
- Host: GitHub
- URL: https://github.com/devkayos/getpet
- Owner: DevKayoS
- Created: 2024-06-05T16:13:36.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-26T21:47:38.000Z (5 months ago)
- Last Synced: 2024-06-27T01:47:11.701Z (5 months ago)
- Language: TypeScript
- Size: 11.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Get a Pet
Um website para adoções de pet, na qual facilita a vida da pessoa que quer adotar um pet, quanto a pessoa que esta anunciando o pet, contando com uma interface moderna e intuitiva para os usuários, desde se registrar no site até finalizar a adoção o site faz toda ligação entre os dois.
## Introdução
Esse foi um projeto fullstack, realizado com base no projeto do curso de node do instrutor Matheus Battisti, fiz algumas mudanças como a adaptação do projeto para typescript tanto na API quanto no front-end.
### Registro e login de usuário
Para que seja possível algum usuário cadastrar algum pet para adoção ou solicitar uma visita para conhecer algum pet é necessário que ele esteja logado, com isso caso o usuário não tenha alguma conta ainda terá que se cadastrar.
(página de cadastro)
Ao se cadastrar o usuário já é logado na seção o que é gerado um token JWT, que fica salvo no local storage da aplicação, que será necessária, pois para fazer certas ações o usuário precisa estar autenticado, essa autentificação acontece toda na API, já que toda vez que algum usuário é logado ou cadastrado a API gera um token, que no front-end conseguimos pegar esse token e salvar no local storage.
(página de login)
### Atualizando dados do usuário
Como num bom e velho crud, existe como atualizarmos os dados do usuário e adicionar uma imagem de perfil para ele, assim como está na imagem abaixo:
O tratamento da imagem acontece por meio do multer que foi configurado na API.
### Cadastro de novo Pet
Agora que o usuário esta cadastrado ele pode cadastrar novos pets para ficar disponivel para adoção, ele pode acessar a área de cadastro de novo pet clicando em meus pets como esta na imagem abaixo.
Indo em cadastrar pet irá ser redirecionado para a seguinte página:
E logo após ter cadastrado um novo pet ele ficará exebido para possiveis edições ou caso queira apagar o pet caso tenha dado algum erro
## Solicitando a visita e concluindo adoção
Todos os usuários tem acesso a home que mostra todos os pets, porém precisa estar logado para solicitar uma visita na qual ficará disponivel os dados de quem cadastrou o pet na seção de minhas adoções. Veja um exemplo abaixo apos clicarmos em ver mais detalhes em um pet.
Então somos obrigados a logar, pois é necessária essa autentificação para fazer esse agendamento e que foi tratado tanto na API com middlewares para identificar se o usuário tem algum token quanto no frontend pegando o token no localstorage.
Agora que estamos logado podemos solicitar a visita para conhecer melhor o pet o usuário que cadastrou o pet conhecerá quem esta solicitando.
Indo em meus pets e depois clicando minhas adoções será exibido todos os pets que o usuário solicitou a visita
Agora o que irá acontecer não precisa mais ser no site e tem que ser entre o quem colocou o pet para adoção e quem quer adotar.
Após isso para finalizar o ciclo quem cadastrou pet tem que ir na seção de pets e permitir e clicar em concluir adoção para que caso outros usuários tenham interesse seja mostrado que o pet ja foi adotado da seguinte forma:
Seção de meus pets do responsavel pela adoção:
Ao concluir adoção irá ser exibido para todos que o pet foi adotado
Dashboard do responsavel pela adoção:
Página principal de adoção de pets:
E agora em minhas adoções de quem solicitou a visita:
E com isso concluimos todos os passos de adoção!
# Tecnologias:
## API
* Foi utilizado a arquitetura MVC para uma maior organização;
* Node;
* Typescript;
* Express;
* MongoDB;
* Mongoose;
* Bcrypt, Biblioteca para fazer a criptografia das senhas;
* JWT, para geração do Token de autentificação;
## Front-end
* Vite;
* React;
* Typescript;
* TailwindCss;
* Shadcn ui;
## Como rodar:
Para rodar a aplicação precisa de um requisito minimo ter instalado mongoDB na sua máquina:
```sh
git clone https://github.com/DevKayoS/getPet.git
```
Instalando dependencias
```sh
npm install
```
Entrando na pasta api e rodando a api
```sh
cd ./api
npm start
```
Entrando na pasta do front end e rodando
```sh
cd ../frontend
npm run dev
```