Olá!
A AdoPet é uma empresa fictícia que funciona como intermediária entre adotantes de pets e ONGs com foco em retirar animais das ruas. A proposta da AdoPet é trazer mais usuários e aumentar a interação entre possíveis adotantes e representantes dessas ONGs e para isso, o objetivo do projeto é implementar uma plataforma e levar a empresa pro mundo digital.
A base deste projeto foi desenvolvido como resultado de um Desafio Front-End (4ª edição) exclusivo para alunos da escola de tecnologia Alura.
O projeto foi desenvolvido em React pela aluna e desenvolvedora Angela Caldas @sucodelarangela 🍊, que gentilmente cedeu sua versão para fins de ensino e aprendizado em cursos da plataforma.
A versão foi refatorada para atender às necessidades do curso e trabalhar com Back-End em Nest.js.
O projeto possui a biblioteca React, React Hook Form na validação dos formulários, o Framer Motion para a animação das transições de tela e o Headless UI para a criação do menu do cabeçalho.
Você pode saber um pouco mais como funcionam os challenges da Alura visitando a seção 🦾 Sobre o desafio.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Adopet - Challenge Alura |
| 🏷️ Tecnologias | React, Headless-ui, React Hook Form, Framer Motion, CSS, JavaScript |
| 🚀 URL | Acesse o site. Veja os dados de login no item ⚙️ Como usar |
| 🔥 Desafio | Protótipo do Figma |
Dados de Login
email: tita@exemplo.com senha: Senha123
O Desafio simula um ambiente de trabalho real, com tarefas exigidas pelos designers por meio de cartões no Trello. É necessário comunicar-se e entender o que os designers realmente querem de cada tarefa, podemos escolher a tecnologia que desejarmos para desenvolver o código. Podemos, também, adicionar recursos e sugerir modificações.
Não há aulas específicas para o desafio, por isso devemos desenvolver com o conhecimento que temos. As instrutoras preparam um plano de estudos com dicas de conhecimentos que podemos precisar caso precisemos fazer algo e não saibamos exatamente como fazer, mas é nossa responsabilidade buscar e trocar informações com outros desenvolvedores para realizar o trabalho.
O Desafio dura 4 semanas. Todas as segundas-feiras durante 3 semanas receberemos novos trabalhos dos designers e devemos desenvolver o que foi pedido. Na semana 4, estamos livres para implementar novos recursos ou brincar com estilos e outros questões de aparência.
O Desafio começou em 04 de julho de 2022.
- Semana 1: Desenvolvimento das estruturas e estilizações com layout responsivo em metodologia mobile-first. No meu caso, escolhi desenvolver com React, foco atual dos meus estudos.
- Semana 2: Validação dos formulários, animação na transição de páginas, adequações de layout e rotas após feedback de uso da aplicação.
- Semana 3: Funcionalidade de login/logout com armazenamento local (
localStorage) e definição de rotas protegidas. - Semana 4: Ajustes gerais e correções de bugs.
English version
Hello, devs!
AdoPet is a pseudo company which acts as an intermediary between animal adopters and NGOs that focus on removing animals from the streets. The purpose of AdoPet is to attract users and increase interaction between adopters and representatives of these NGOs.
This project is currently in development as a result of a Front-End Challenge (4th edition) exclusively for students of Alura tech school. This was my first project developed with React as a way of practicing the most basic concepts of this library. Besides, I took the chance to use some very known libraries, such as React Hook Form on form validation, Framer Motion for animating page transitions and Headless UI to create the header menu. This code definitely needs future refactoring after I evolve my studies in this matter.
-
Visit the website: https://adopet-frontend-iota.vercel.app//
-
To log in the page, use the following data:
email: tita@exemplo.com senha: Senha123
The Challenge simulates a real work environment, with tasks required by the designers via Trello cards, so students may experience how a real job feels like. It is necessary to communicate and understand what the designers really want from each task, we can choose the technology that best apply for us to develop the code. We can add features and suggest modifications in case we have better ideas and so on.
There are no specific classes for the challenge, so we must go on with the knowledge we have. The instructors prepare a study plan with tips of things we might need in case we wish to do something and don't know exactly how to do it, but it is our part to seek and exchange info with other developers to get the job done.
The Challenge lasts 4 weeks. Every Monday for 3 weeks we will receive new assignments from the designers and should develop what was asked. On week 4 we are free to implement new features or play with styles and othe appearance feats.
The Challenge started at July 4th, 2022.
- Week 1: Development of structure and styles with responsive layout developed with mobile-first methodology. In my case, I have chosen to develop the page using React with JavaScript.
- Week 2: Form validation with react-hook-form, animated page transition with framer-motion library and layout changes due to user feedbacks.
- Week 3: Login/logout with
localStorageand protection of private routes. - Week 4: General adjustments and bug fixes.
Rotas: Backend em Nest.js
{/adotante} {/adotante/register, POST} {/adotante, GET} {/adotante/perfil/:id, GET} {/adotante/perfil/:id, PATCH} {/adotante/:id, DELETE} Auth {/adotante} {/mensagem/:id, GET}
/mensagem, POST