Site de Abaixo Assinado e Pesquisas

O projeto é simples.

Landing Page com as opções no menu superior Home, Sobre, Contato, Abaixo Assinado, Pesquisas, Login e Cadastre-se.

No Home, uma mensagem de boas vindas, botões de seguir (Instagram, youtube etc.), Corrossel possibilitando atualização de imagens com substituição de arquivo em pasta etc. E atalhos descritos (Ver abaixo assinados e ver resultado de pesquisas).

Na página Sobre,

Na Aba sobre, uma imagem do Criador (No caso eu), mais a descrição do projeto.

Na Aba contato, formulário de envio por E-mail e opção de falar pelo Whatsapp o botão do Whatsapp pode ser flutuante e acompanhar a scrollbar de forma Fixa na lateral inferior Direita.

As Abas Login e Cadastre-se ao clicar no Menu, abrirá um formulário simples, de preferência um formulário suspenso na própria Lading Page com a logo da página na parte superior, o formulário.

Para o Login, email ou cpf , senha, um botão de ENTRAR + Esqueci minha senha.

No Esqueci minha Senha, possui uma caixa de entrada solicitando o E-mail + Botão de Recuperar Senha, ao inserir o E-mail na Caixa de Entrada, é enviado uma opção para atualizar senha por e-mail e aberto um formulário com Nova Senha, Confirmar Senha e um botão de Alterar Senha. Ao realizar essa operação, é direcionado automaticamente para o formulário de Login.

Ao realizar o Login, fica informado na parte superior o Primeiro nome do usuário que se cadastrou, na lateral direita. Seria interessante mas não obrigatório, possibilitar a inclusão de uma imagem, ficando como foto de perfil e mostrado de forma circular no Perfil, na ausência da foto, um fundo cinza.

Além disso, ao fazer o Login, Habilita como Menu Suspenso, 2 opções, 1 de Editar Perfil, outra de Sair para fazer Logout da conta. No Menu da página.

A Opção de Alterar dados do Perfil, habilita um formulário mostrando os dados anteriores como Placeholder, permitindo a substituição apenas escrevendo por cima e possuindo um botão de Atualizar Dados. Feito isso, os dados são atualizados e aparece um botão de atualizado com sucesso.

Possuindo também uma opção para alterar senha na opção de alterar dados do Perfil, seguindo o mesmo esquema se envio por e-mail etc.

Para o Cadastre-se, Nome Completo, E-mail, Celular, Sexo (Masculino, Feminino), Data de Nascimento (Opcional com informação de que essa informação é necessária para o preenchimento dos Abaixos Assinados), CPF (Opcional com informação de que essa informação é necessária para o preenchimento dos Abaixos Assinados), Cidade, Bairro e o Botão de CADASTRAR.

A cidade e Bairro, serão exibidos por meio de consulta dinâmica. A ideia é através de uma chave primária, identificar a cidade e exibir os bairros que possui essa chave como chave estrangeira no banco de dados, exemplo:

Tabela 1
Cidade: Caraguatatuba / Chave Primaria ou ID: 1
Tabela 2
Bairro: Poiares / Chave Estrangeira: 1
Bairro: Aruan / Chave Estrangeira: 1
Bairro: Itaim Paulista / Chave Estrangeira: 75

Sendo assim, ao selecionar a Cidade Caraguatatuba que seria o mesmo que ID 1, traria na opção de bairro, os Bairros Poiares e Aruan para selecionar.

A ideia é que com essa estrutura, facilite para que o administrador, consiga inserir sem dificuldades novas cidades e bairros, atrelando os mesmos apenas por chaves primárias e estrangeiras.

Será necessário a confirmação do cadastro por e-mail, além disso, será de grande valor, conseguir integrar via Node ou outra forma a conferência do CPF e Data de Nascimento na Receita Federal, via API Request, para conferir se o CPF e Data de Nascimento está correto. A API da Receita é essa: https://www.gov.br/conecta/catalogo/apis/cadastro-base-do-cidadao-cbc-cpf/swagger_cpf_light.json/swagger_view#section/Authentication

Finalizando a Lading Page com o Footer descritivo e os links para acessar as demais partes do site e redes sociais.

As Abas Abaixo Assinado, Pesquisas Serão em páginas separadas, ao clicar, abre uma nova Aba.

A Página Abaixo assinado tem o Menu superior, botão do Whatsapp, cartões simples como do Bootstrap, além de 2 botões de filtros para selecionar Abaixo Assinados Preenchidos e Todos, para que a pessoa possa filtrar de forma rápida. Nos cartões, terá o Título do Abaixo Assinado, uma prévia do Abaixo Assinado, e ao clicar no card, ele expande e mostra a descrição do Abaixo assinado sem sair da página. Também terá um Botão de Assinar.

Ao clicar em Assinar é feito a conferência se a pessoa está logada e possui o CPF e Data de Nascimento Preenchidos, caso ela não esteja ou não possua, é informado que ela precisa fazer o login, se cadastrar, mostrando 2 botões de Login e Cadastre-se. Ou Identificado que falta o CPF e Data de Nascimento, abrir um formulário simples para preencher a data de nascimento e CPF, para que a pessoa insira e um botão de finalizar assinatura do Abaixo Assinado, é importante que essa operação seja simples, para que a pessoa não fique desencorajada em sair da página.

Ao assinar o abaixo assinado, ao invés de aparecer o botão, "Assinar", fica o botão em outra cor, "Já Assinado".

Já na página Pesquisas, Segue a mesma estrutura do Menu Superior, os Cards com o título da pesquisa, pequena descrição e ao clicar, expande a descrição com o texto completo, possuindo um botão de Responder Pesquisa. Caso já tenha sido respondido, ficará escrito, Já Respondido. Ao Clicar em responder pesquisa, a ideia é a abertura de um formulário igual o do Google Forms, contendo as perguntas e respostas. Ao final, o botão de Enviar Resposta.

Para o Administrador, no caso eu, será importante possuir uma página secundária.

Essa página só pode ser acessada com Login e Senha do Admin, uma opção que habilita exclusivamente ao Admin quando faz o Login no Menu Suspenso. De "área do adm", aqui o adm pode fazer 4 coisas, primeira, criar um abaixo assinado, ao qual é habilitado um formulário simples com título, descrição curta (até 150 caracteres) para ser exibida no card não expandido e descrição completa, quando o card é expandido. Mais um botão de Salvar. Uma opção de alterar o abaixo assinado, podendo pesquisar pelo ID da pesquisa ou Nome do Abaixo Assinado. Similar ao alterar o cadastro, a ideia é que ao clicar em alterar abaixo assinado, seja exibido o formulário com os dados do abaixo assinado, possibilitando editá-lo e + a opção de Atualizar.

3 criar e alterar pesquisas.

A ideia é a mesma, porém a criação da pesquisa seria interessante, a possibilidade de selecionar opções. Igual o Google Forms, exemplo: Nome Completo: (Texto Longo), Data de Nascimento: (Tipo Data), Sexo: (Múltipla escolha com escolha única), Filmes preferidos (Múltipla escolha com escolhas múltiplas).

Além disso, uma opção que eu possa colocar o link do resultado da pesquisa, para que quando a pessoa clicar, ela ser direcionada para esse link. A ideia é exibir o resultado da pesquisa por meio de relatórios no Power BI. Por isso seria um link externo. Visto que exibir os resultados na pagina poderia gerar mais complexidade.

Nesse exemplo, conseguiria criar pesquisas mais dinâmicas etc. O que ajudaria bastante. Da mesma forma que poderia alterar os dados da pesquisa. 

Ao criar uma pesquisa ou abaixo-assinado, automaticamente aparece na página e fica disponível para que a pessoa preencha as informações.

Esse é o Projeto.