Plataforma Web - Editais Fundarpe

Badges

Índice

• Badges
• Índice
• Descrição do Projeto
• Tecnologias utilizadas
• Funcionalidades e Demonstração da Aplicação
• Pessoas Desenvolvedoras do Projeto

Descrição do Projeto

Desenvolvimento de uma plataforma web com novo layout - que respeita a identidade visual do governo de PE, para todas as páginas, que direciona o usuário até os editais e otimiza os formulários de inscrições considerando as particularidades dos editais.

✅ Tecnologias Utilizadas

• Javascript
• CSS
• Git e Github
• React.js
• React-Bootstrap
• Node version managers(NPM)
• VS Code
• Vercel

⚙ Como Executar a Aplicação:

• Git clone
• Acessar o diretorio clonado, utilize o git bash
• npm i
• npm start

🔨 Funcionalidades e Demonstração da Aplicação

Tela Principal:

representa a tela principal da plataforma dedicada à promoção cultural e divulgação de eventos e editais.

A tela home é composta por 3 arquivos js: index, styled e constants.

🛠️ O index.js representa a Tela Principal e está dividido em várias seções, cada uma representando um bloco ou uma parte específica da página. Todas as seções da página se encontram dentro do ContainerHome.

⭐ O styled.js representa os elementos de estilo da página principal.

⌨️ O constants.js representa os filtros de mês e categoria da seção de editais da página principal.

Da pasta Components foram importados os seguintes componentes:

• CardHome
• CarouselHome
• Header
• Footer

Dentro da pasta Card foram importados os seguintes componentes:

• editalCard
• eventsCard

Do react-bootstrap foram importados os seguintes componentes:

• Dropdown
• DropdownButton

Do arquivo styled.js foram importados os seguintes elementos:

• SelectGroup
• CardBox
• ContainerHome
• AboutBox
• ButtonBox

Do arquivo constant.js foram importados os seguintes elementos:

• meses
• categorias

Da pasta assets foram importadas as seguintes imagens:

• Banner1
• Banner2
• bridge

Dentro do ContainerHome teremos os seguintes componentes (alguns já importados acima):

• Header: Contém informações do cabeçalho, como o nome de usuário, links para seções específicas (como institucionais), botões para registrar e sair, e uma opção para iniciar a sessão.
• CarouselHome: Exibe informações de forma dinâmica e atrativa em um carrossel. Contém título, detalhe adicional e uma descrição mais aprofundada sobre a iniciativa do Governo de Pernambuco relacionada à cultura.
• SelectGroup, CardBox e ButtonBox: Permite filtrar os editais por mês e categoria, exibindo uma lista de editais em cartões (CardHome). Além disso, inclui um botão para possibilitar a visualização de mais detalhes sobre os editais.
• AboutBox: Seção informativa sobre o Funcultura PE, contendo um link para obter mais informações, uma imagem relacionada e um parágrafo detalhado explicando a origem, funcionamento e impacto do Funcultura.
• Div flex_container, flex_section e flex_imag: Seção visualmente rica, contendo imagens, vídeos e texto. Ela utiliza a flexibilidade do layout para organizar elementos visualmente de maneira atrativa e dinâmica.
• CardBox: Seção de eventos, onde cada evento é exibido por meio do componente CardHome. Os eventos são mapeados a partir do array eventsCard e apresentados em cartões. Cada cartão inclui informações relacionadas ao evento (título, imagem, data e descrição).
• Footer: Representa o rodapé que contém informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Login:

representa a tela de acesso do usuário à plataforma através das suas credenciais de autenticação seja ele um agente ou administrador.

A tela de login é composta por 3 arquivos js: Login, Login.Adm e styled.

🛠️ O Login.js representa a tela de login do Agente, indíviduo que participa de editais lançados pela Funcultura, competindo por recursos financeiros para a execução de projetos culturais específicos.

🛠️ O LoginAdm.js representa a tela de login do Administrador, indivíduo que realiza a gestão e manutenção da plataforma e dos editais divulgados.

⭐ O styled.js representa os elementos de estilo utilizados na tela de login.

Da pasta Components foram importados os seguintes componentes:

• Header
• Footer

Do react foi importado o seguinte componente:

• React, useState

Do arquivo validations.js da pasta Utils foram importados os seguintes componentes:

• cpfCnpjMask
• validatePassword

Do react-router-dom foi importado o seguinte componente:

• useNavigate

Do styled.js foram importados os seguintes componentes:

• ContainerLogin
• ReCaptcha
• Acessos

Do LoginAdm.js foi importado o seguinte componente:

• LoginAdm

Da pasta Form (dentro da pasta assets) foi importado o seguinte componente:

• reCaptcha

Do react-bootstrap foi importado o seguinte componente:

• Form

Antes da estrutura da página, foram utilizados os seguintes componentes funcionais de React:

useState: Utiliza o Hook useState para gerenciar estados locais, incluindo form (para os dados do formulário), loading (para indicar se o processo de login está em andamento), cpfCnpj (para armazenar CPF ou CNPJ), e agente (para controlar se a tela exibe o formulário de agente ou administrador).

useNavigate: Utiliza o hook useNavigate para obter a função de navegação. A função navigate será usada para redirecionar o usuário após o login bem-sucedido.

showAgenteLogin/showAdminLogin: São funções que alteram o estado agente (setAgente), determinando qual formulário de login deve ser exibido.

handleSubmitUser: Chamada quando o formulário é enviado. Ela coleta os dados do usuário (CPF ou CNPJ e senha), os armazena no localStorage e redireciona o usuário para a página inicial.

handleCpfCnpj/handlerChange: Responsáveis por manipular mudanças nos campos de CPF/CNPJ e senha, respectivamente.

InputValidator: Verifica se a senha é válida (usando validatePassword) e se o comprimento do CPF/CNPJ é maior que 10.

isUserLoggedIn: Verifica se um usuário já está autenticado (tem uma sessão ativa) usando o localStorage. Se sim, redireciona imediatamente para a página inicial. A renderização do componente é condicional, se não houver usuário autenticado, o restante do componente é renderizado.

A página de login é composta pelos seguintes componentes (alguns já importados e citados acima):

Header: Representa as informações do cabeçalho, como a logo do funcultura por exemplo.

Acessos: Responsável por exibir dois botões que permitem alternar entre os modos de "Acesso Agente" e "Acesso Administrador". A mudança de estilo destaca visualmente o tipo de acesso selecionado. As funções showAgenteLogin e showAdminLogin alteram o estado do componente para refletir a escolha do usuário.

form: A renderização do código está condicionada ao valor da variável de estado agente. Se agente for verdadeiro renderiza um formulário de login para agentes, com campos para CPF/CNPJ, senha, opção de redefinição de senha, e um botão de entrada. O formulário inclui um ReCaptcha para melhorar a segurança durante o processo de login.

LoginAdm: Caso agente não seja verdadeiro, renderiza um formulário de login para administradores contendo campos para matrícula, senha, opção de redefinição de senha, um botão de entrada e ReCaptcha.

Footer: Mesmo rodapé utilizado em todas as páginas, contendo informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Cadastro:

A tela de cadastro foi idealizada para ser intuitiva e receptiva para o usuário, ela foi construída com uma interface familiar o que torna o processo de cadastramento confortável.

Para a construção da tela foi utilizado 2 arquivos js:

🛠️ index.js está dentro da pasta pages que são as telas de retorno para os usuários.

⭐ O styled.js foi onde trabalhamos a apresentação visual dos elementos.

⭐ Também importamos um arquivo styled.js do Login que foi onde trabalhamos a apresentação visual dos elementos compartilhados.

Na construção utilizamos alguns componentes importados

Biblioteca React Bootstrap

• React Bootstrap Form

Do react-router-dom foi importado o seguinte componente:

• useNavigate (react-router)

Do react foi importado o seguinte componente:

• useState (react)

Validações importadas para construção da tela

• cpfCnpjMask
• validatePassword

Componentes

• Header
• LoginHeader
• Footer

Elementos de estilo

• Acessos
• ContainerRegister

Antes da estrutura da página, foram utilizados os seguintes componentes funcionais de React:

Uma const Register, uma função JavaScript que permite a identificação do tipo de perfil que será cadastrado, foi definido também uma const navigate, que é caracterizada pelo uso da função useNavigate( ). Também implementamos no código condições para validar se o usuário é um agente ou um administrador, funções como validação de senha e CPF.

Dentro dessa pasta podemos ver importes do React Bootstrap que nos auxiliou na construção da aplicação web e importes de outros componentes.

A página de Cadastro é composta pelos seguintes componentes (alguns já importados e citados acima):

Header: Representa as informações do cabeçalho, como a logo do funcultura por exemplo.

LoginHeader: Incluímos o caminho para o usuário que busca cadastrar-se e criamos o formulário com os dados que eram necessários para o processo de cadastramento na plataforma.

Footer: Mesmo rodapé utilizado em todas as páginas, contendo informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Detalhes do Edital:

Cada edital possui sua particularidade, eles se dividem em Audiovisual, Geral, Microprojeto Cultural, Música e Parecerista.

Para a composição da tela de detalhes do edital temos 3 arquivos js:

🛠️ Um index.js está alocado dentro de uma pasta específica para a construção estrutural de detalhes de edital, nomeada como PublicNotice.

🛠️ Um segundo index.js está dentro da pasta pages que são as telas de retorno para os usuários.

⭐ O styled.js foi onde trabalhamos a apresentação visual dos elementos.

Na pasta Componentes do PublicNotice importamos bibliotecas, elementos e caminhos de outros componentes

Biblioteca React Bootstrap

• React Bootstrap Icons
• React Bootstrap (botão)

Do react-router-dom foi importado o seguinte componente:

• useNavigate (react-router)

Componentes

• editalCard

Elementos de estilo

• Container
• SectionOne
• SectionTwo
• SectionThree
• SectionFour
• Title
• Image
• FileIcon
• LampIcon

Antes da estrutura da página, foram utilizados os seguintes componentes funcionais de React:

Uma const id, uma função JavaScript que permite nossa navegação entre (item.id), quando definida o que auxilia a otimizar o código, quando atribuirmos condições e determinamos como a aplicação deve se comportar na estruturação dos possíveis cenários e rotas para assim retornar ao usuário.

Dentro dessa pasta podemos ver importes do React Bootstrap que nos auxiliou na construção da aplicação web e importes de outros componentes como os de edital que foi criado na tela de Home, de acordo com os requisitos funcionais da nossa aplicação estipulados pelo cliente.

A página de detalhes de edital é composta pelos seguintes componentes (alguns já importados e citados acima):

Header: Representa as informações do cabeçalho, como a logo do funcultura por exemplo.

PublicNotice: Que carrega todos os importes estruturais e se divide em 1 container que abraça todo o corpo do nosso código, 4 sessões estruturais que delimitam as caixas de construção do conteúdo.

Container: utilizamos uma função map do JavaScript que funcionará em conjunto com a const id na navegação (useNavigate) entre os editais.

SectionOne: utilizamos uma 🔑 para poder habilitar essa navegação e trazer retornos distintos dependendo do edital que o usuário selecionar na aplicação.

SectionTwo: trouxemos a logo da secretaria da cultura que é a responsável pelos editais do Funcultura, trouxemos um link direcionável para que o usuário possa explorar o Mapa Cultural de Pernambuco.

SectionTree: são informações complementares do edital e de suporte ao usuário.

SectionFour: é composta pela estruturação de direcionamento do usuário para mais informações para sua inscrição e o botão de inscrição de fato onde usamos a mesma ideia do (map) que foi utilizada na SectionTwo, para direcionar o usuário para a inscrição do edital específico selecionado.

Footer: Mesmo rodapé utilizado em todas as páginas, contendo informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Inscrição do Edital:

representa a tela onde é exibido o formulário de inscrição para o edital escolhido pelo agente.

A tela de inscrição do edital é composta pelo arquivo index.js, que representa o formulário de inscrição.

Da pasta Components foram importados os seguintes componentes:

• Header
• Footer

Da pasta Forms (dentro da pasta components) foram importados os seguintes componentes:

• ContainerFormPage
• FormsPublicNotices
• CheckBoxForm
• publicForms
• publicFormsTwo
• checkboxForm
• checkboxFormGeral
• checkboxFormAudioV
• checkboxFormM
• checkboxFormParecerista

Da pasta PublicNotice (dentro da pasta components) foram importados os seguintes componentes:

• FileIcon
• LampIcon

Da pasta Card (dentro da pasta components) foi importado o seguinte componente:

• editalCard

Do react-bootstrap foi importado o seguinte componente:

• Button

Do react-bootstrap-icons foram importados os seguintes componentes:

• FileText
• Lightbulb
• Download

A página de inscrição é composta pelos seguintes componentes (alguns já importados e citados acima):

const id: Extrai o ID da URL atual sendo parte final da rota. O ID é usado posteriormente para condicionalmente renderizar diferentes seções do formulário com base no conteúdo do objeto editalCard.

sectionZero: Seção de introdução ao formulário de inscrição, apresentando informações como cabeçalho da página, ícones, detalhes do edital com base no ID da URL e um número de inscrição fictício. As classes CSS sugerem estilos específicos aplicados a diferentes partes desta seção.

h1: Apresenta o título do formulário de inscrição.

editalCard.map((item): Mapeia sobre o array editalCard e renderiza seções específicas do formulário com base nas categorias e no ID da URL. É verificada a categoria de cada item em editalCard e renderizada uma seção específica (sectionOne) com base nessa categoria. Cada seção contém um conjunto de checkboxes representados pelo componente CheckBoxForm.

Se a categoria for "musica", renderiza checkboxes de checkboxForm. Se a categoria for "geral", renderiza checkboxes de checkboxFormGeral. Se a categoria for "audiovisual", renderiza checkboxes de checkboxFormAudioV. Se a categoria for "microprojeto", renderiza checkboxes de checkboxFormM. Se a categoria for "parecerista", renderiza checkboxes de checkboxFormParecerista.

É atribuída uma chave única (key) a cada seção com base no ID do item em editalCard. As chaves únicas são importantes para o React efetuar uma renderização eficiente de listas dinâmicas.

sectionTwo: Representa a segunda seção do formulário, que se concentra em coletar informações sobre os dados pessoais do usuário, usando o array publicForms para dinamicamente renderizar os campos específicos do formulário.

sectionThree: Representa a terceira seção do formulário, que se concentra em coletar informações relacionadas à autodeclaração do usuário, utilizando o array publicFormsTwo para dinamicamente renderizar os campos específicos do formulário.

sectionFour: Fornece informações sobre como o usuário pode anexar documentos, incluindo instruções sobre o método de upload e requisitos, além de fornecer botões para salvar e finalizar a inscrição.

Footer: Mesmo rodapé utilizado em todas as páginas, contendo informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Perfil (Agente):

representa a tela onde o agente visualiza suas informações pessoais além de suas inscrições, notificações, conexões e documentações.

A tela de perfil do agente é formada por 3 arquivos js: constantsAccount, index e styled.

🛠️ O arquivo index.js representa a tela de perfil do agente.

⭐ O arquivo styled.js representa os elementos de estilo utilizados na tela de perfil.

📜 O arquivo constantAccount.js representa a lista de etapas (steps) e etapas concluídas (stepsFinished) em um processo de submissão a um edital. Cada etapa é representada como um objeto dentro de um array.

Da pasta components foram importados os seguintes componentes:

• Header
• Footer

Da pasta Profiles (dentro da pasta components) foi importado o seguinte componente:

• ProfileHeaders

Da pasta Profile (dentro da pasta assets) foram importados os seguintes componentes:

• avatarUser
• cardEdital
• cardEdital2

Do arquivo styled.js foram importados os seguintes componentes:

• NoticeSummary
• Wrapper
• Legend

Do arquivo constantsAccount.js foram importados os seguintes componentes:

• steps
• stepsFinished

Do arquivo styled.js da pasta de AdminDetails foram importados os seguintes componentes:

• ContainerTable
• Table
• ThOne
• ThTwo
• ThTree
• ThFour
• ThFive
• stepsFinished

Do react foi importado o seguinte componente:

• useState

A página de perfil do agente é composta pelos seguintes componentes (alguns já importados e citados acima):

Account: Utiliza o hook useState para gerenciar dois estados, inscricoes e documentacoes, estados booleanos que indicam se a seção de inscrições ou a seção de documentações deve ser exibida.

mostarInscricao: Define inscricoes como true e documentacoes como false, indicando que a seção de inscrições deve ser exibida.

mostrarDoc: Define inscricoes como false e documentacoes como true, indicando que a seção de documentações deve ser exibida.

Wrapper: Cria uma estrutura visual para representar o cabeçalho e informações do perfil de um usuário, incluindo a ocupação e uma opção para seguir o perfil. O estilo e comportamento desses componentes dependeriam da implementação específica dos componentes Header e ProfileHeaders.

Dentro do Wrapper temos os seguintes componentes:

ContainerTable: Cria uma tabela com um cabeçalho que inclui títulos de colunas e alguns estilos condicionais baseados em variáveis de estado (inscricoes e documentacoes). Quando as colunas "Inscrições" ou "Documentações" são clicadas, as funções mostarInscricao ou mostrarDoc são acionadas, respectivamente.

inscricoes: Renderiza uma seção dedicada às inscrições, incluindo informações sobre o progresso, o histórico e uma legenda, dependendo do valor da variável de estado inscricoes.

documentacoes: Renderiza dinamicamente um elemento div com o texto "Documentações" com base no valor da variável documentacoes. Se documentacoes for verdadeira, o elemento será renderizado; caso contrário, não será renderizado.

Footer: Mesmo rodapé utilizado em todas as páginas, contendo informações institucionais, linguagens, suporte, logos e links para redes sociais.

Tela de Perfil (Administrador):

representa a tela onde o administrador visualiza suas informações pessoais além de suas inscrições, notificações, pareceristas e documentações para análise.

A tela de perfil do administrador é formada por 2 arquivos js: index e styled.

🛠️ O arquivo index.js representa a tela de perfil do administrador.

⭐ O arquivo styled.js representa os elementos de estilo utilizados na tela de perfil.

Da pasta components foram importados os seguintes componentes:

• Header
• Footer

Da pasta Profiles (dentro da pasta components) foi importado o seguinte componente:

• ProfileHeaders

Da pasta Profile (dentro da pasta assets) foram importados os seguintes componentes:

• avatar

Do arquivo styled.js foram importados os seguintes componentes:

• Documentations
• WrapInscription
• WrapCard
• SelectGroup
• WrapDoc
• ContainerTable
• Table
• ThOne
• ThTwo
• ThTree
• ThFour
• ThFive

Do arquivo styled.js da pasta Home foram importados os seguintes componentes:

• ButtonBox
• CardBox

Da pasta Card (dentro da pasta components) foram importados os seguintes componentes:

• CardHome
• editalCard

Do arquivo constants.js (dentro da pasta Home) foram importados os seguintes componentes:

• categorias
• meses

Do react-bootstrap foram importados os seguintes componentes:

• DropdownButton
• Dropdown
• Form

Do react foi importado o seguinte componente:

• useState

A página de perfil do administrador é composta pelos seguintes componentes (alguns já importados e citados acima):

AdminDetails: Inicializa dois estados de componente, inscricoes e documentacoes, utilizando o hook useState. Esses estados podem ser utilizados para controlar o comportamento e a renderização condicional dentro do componente AdminDetails com base nesses valores de estado.

mostrarCard: Atualiza os estados do componente AdminDetails, configurando inscricoes como true e documentacoes como false indicando que a seção de inscrições deve ser exibida.

mostrarDoc: Define inscricoes como false e documentacoes como true, indicando que a seção de documentações deve ser exibida.

Dentro de uma div, teremos os seguintes componentes:

Header: Renderiza um componente de cabeçalho com o nome de usuário.

ProfileHeaders: Renderiza um componente de perfil que inclui uma foto (photo), nome (name), e ocupação (occupation).

ContainerTable: Cria uma tabela com um cabeçalho interativo, onde as colunas "Inscrições" e "Documentações" têm estilos condicionais e estão associadas a funções (mostrarCard e mostrarDoc, respectivamente) que provavelmente controlam o conteúdo exibido no restante do componente com base nessas interações.

inscricoes: Renderiza uma seção específica do conteúdo quando a variável inscricoes é verdadeira, incluindo um título, seletores, cartões e um botão "Ver mais".

documentacoes: Renderiza uma seção específica do conteúdo quando a variável documentacoes é verdadeira, incluindo um título, um seletor de formulário, e uma tabela com informações detalhadas sobre usuários.

Pessoas Desenvolvedoras do Projeto

Ana Beatriz Lira	Anderson Fernandes	Artur Ramos	Beatriz Rodrigues	Beatriz Silva	Carlos Lima	Flavia Favacho	Gabriel Oliveira	Joana D'Arc	Kelvia Santos	Rennan Reis