Aumigos Lisos é um website pensado para residentes do Recife e da Região Metropolitana do Recife (RMR) que possuem pets (cachorros e/ou gatos) e não possuem muitos recursos financeiros para cuidar de seus companheiros.
É um website inspirado na minha própria vivência com meus dois gatos, que inclusive já necessitaram de alguns serviços presentes no website.
O website na íntegra pode ser conferido no seguinte link: https://aumigos-lisos.netlify.app/
O site possui 6 páginas:
- Início: Nesta página, o usuário encontrará o objetivo do website, juntamente com informações sobre o conteúdo disponível. Além disso, há conteúdo sobre a importância da adoção responsável de animais de estimação, em vez da compra, e locais em Recife onde é possível encontrar pets para adoção, proporcionando uma oportunidade amorosa de dar um lar para um amigo peludo necessitado;
- Saúde: Aqui, o usuário terá acesso a informações sobre o Hospital Veterinário do Recife (HVR) e o Hospital Veterinário da Rural. Além disso, há locais que oferecem serviços veterinários a preços amigáveis;
- Lazer: Nesta página estão os 'parcãos' disponíveis na cidade e RMR, permitindo que os donos de animais de estimação encontrem opções para momentos de diversão. Também há dicas sobre 'UberPet';
- Faça você mesmo: Aqui, o usuário encontrará dicas de petiscos simples, além de vídeos que ensinam a fazer brinquedos para os pets;
- Add + informações: Nesta página, há disponivel campos de formulário para que o usuário possa sugerir conteúdos adicionais, contribuindo para enriquecer ainda mais o website, ou fazer críticas construtivas;
- Quem sou eu ?: Aqui, conto um pouco sobre mim e minha motivação para criar este website dedicado aos pets e seus cuidadores.
O Aumigos Lisos foi desenvolvido com as seguintes tecnologias:
- ReactJS: Foi o framework escolhido para criar todo o website;
- Vite: Ferramenta de estrutura utilizada com react;
- NPM: Gerenciador de pacotes utilizado no projeto;
- Firebase: É utilizado para salvar as informações enviadas através dos campos de formulário da página "Add + informações";
- React router dom: Dependência usada para criar rotas no Reactjs;
- Iframe: Biblioteca utilizada para consumir e redenrizar os post da rede social Instagram no website.
- Netlify: Plataforma utilizada para hospedar a website.
Siga o passo a passo a seguir:
| Passo | Comando/informação |
|---|---|
| Faça o fork | botão de forkar |
| Faça o clone | git clone |
| Instale as dependências após acessar a pasta projeto | npm i |
| Com Firebase crie as suas variáveis de ambiente e inclua os valores da sua conta | conforme .env.example e lista abaixo |
| Rode o projeto | npm run dev |
Variáveis de ambiente
- VITE_API_KEY=
- VITE_AUTH_DOMAIN=
- VITE_PROJECT_ID=
- VITE_STORAGE_BUCKET=
- VITE_MESSAGING_SENDER_ID=
- VITE_APP_ID=
- VITE_DATABASE_URL=
Meu nome é Manoelly, mas sou mais conhecida com Manu, sou natural e residente do Recife, capital de Pernambuco, e formada em Nutrição. Atualmente estou na minha segunda graduação que é em Análise e Desenvolvimento de Sistemas e sou aluna do curso de front end da {reprograma}.
Ficou interessado no projeto ou tem alguma dúvida? Se conecte comigo nessas redes: