williamscalado / adopet Goto Github PK

For the English version of this README, click here.

Olá, devs!

Neste repositório você encontrará uma página de uma empresa fictícia chamada AdoPet, 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. Para isso, o site deve conter os seguintes requisitos:

• Uma página inicial que será de login, contendo os botões de "já tenho conta" e "quero me cadastrar".

  Página alterada após feedbacks de usuários: agora ela mostra um botão Ver Pets Disponíveis para Adoção, visto que os feedbacks sugerem que o foco da AdoPet são os animais e o acesso às suas informações é o que faz os usuários quererem se cadastrar.

• Uma página de cadastro que terá um formulário solicitando as informações: nome, e-mail e senha.
• Uma página de login com um formulário de e-mail e senha.
• Uma página que deve aparecer após o login com uma lista de cachorros e gatos. Cada animal deve mostrar foto, nome, idade, porte, características e região. Para cada animal haverá um botão de contato.

  Como já mencionado, a página agora pode ser visualizada sem a necessidade de login, permitindo que os usuários se apaixonem pelos pets primeiramente, o que seria uma forma melhor de atrair novos cadastros.

• Uma página de edição de envio de mensagem, com um formulário com campos de nome, telefone, nome do animal e mensagem.
• Permitir a edição do perfil, onde também será possível incluir foto do usuário.
• O site seja responsivo para dar aos clientes a facilidade de comprar através de dispositivos mobiles.

Este projeto está sendo desenvolvido como resultado de um Desafio Front-End (4ª edição) exclusivo para alunos da escola de tecnologia Alura.

O Desafio simula um ambiente de trabalho real, com tarefas exigidas pelos designers por meio de cartões no Trello para que os alunos possam experimentar como é um job real. É necessário comunicar-se e entender o que os designers realmente querem de cada tarefa, podemos escolher a tecnologia que melhor se aplica a nós para desenvolvermos o código. Você pode adicionar recursos e sugerir modificações caso tenha ideias melhores e assim por diante.

Não há aulas específicas para o desafio, por isso devemos desenvolver com o conhecimento que temos. As instrutoras prepararam um plano de estudos com dicas de coisas 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ário, animação na transição de páginas, adequações de layout e rotas após feedback de uso da aplicação.

Hello, devs!

In this repo you will find a website for a pseudo company called AdoPet, 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. Thus, the website must have the following features:

• A home page with two buttons allowing users to log in or register to the website.

  Page altered due to users feedback: now it shows a button to See Pets Available for Adoption, as feedbacks taken suggested that AdoPet's center of attention are the pets and access to their information is what really makes users to register.

• A registration form for new users with name, e-mail and password inputs.
• A login form with e-mail and password inputs.
• The pet page with their infos which must show after logging in. Each animal must show a photo, name, age, size, traits and location, plus a contact link.

  As mentioned on the first item, this page now shows without the need to log in first, allowing users to fall in love with the pets first, which would be a better way to attract new registered users.

• A form for sending a message for the people responsible for the animal, with fields for name, phone, name of the animal and the message itself.
• It must allow the user to edit its profile, changing information and user photo.
• The page must be responsive to all kinds of devices.

This project is currently in development as a result of a Front-End Challenge (4th edition) exclusively for students of Alura tech school.

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 tasks, 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 have prepared a study plan with tips of things we might need in case we need 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 appearances 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.

Developed with 🧡 by @sucodelarangela 🍊 (it's a me!)