Ágata

entre design e código.

UX/UI Designer · Desenvolvedora Web · Front-end

manifesto.txt

Transformo problemas em experiências digitais intuitivas, unindo pesquisa, design e tecnologia.

Disponível para estágio e freelas

Projetos

Estudos de caso selecionados

Processo

Como eu trabalho · bastidores reais

Cada projeto passa por quatro fases. Antes das telas finais, vem o papel, o quadro e muita pergunta. Aqui estão os bastidores reais: o quadro da fase 01 é do projeto Regulariza Brasil; os esboços das fases 02 a 04 são do Aprende+.

01 · Descobrir

Entender antes de desenhar

Investigo o contexto, observo dificuldades e procuro entender as necessidades reais antes de pensar na solução.

  • Problema
  • Público
  • Necessidades do usuário
  • Primeiro fluxo
Registro do projeto Regulariza Brasil · regularização de veículos
problema → público → necessidades → solução
02 · Definir

Dar forma ao que importa

Organizo informações, estruturo fluxos e transformo necessidades em uma base clara para o projeto.

  • Autenticação: login, cadastro e senha
  • Onboarding em três perguntas
03 · Idear

Começar no papel

Exploro possibilidades com wireframes, fluxos e esboços antes de avançar para decisões visuais mais refinadas.

  • Videoaula → conclusão → quiz → resumo
  • Setas desenhando o fluxo entre telas
04 · Entregar

Do rascunho ao protótipo

Transformo os esboços em interfaces refinadas, protótipos navegáveis e materiais organizados para desenvolvimento.

Clique nas imagens para ampliar

Sobre

Tecnologia, criatividade e pessoas
Foto de Ágata Giovanna, de cabelos cacheados e blusa clara, em fundo neutro
UX/UI CIn · UFPE Dev Front-end Design Gráfico

Meu interesse por UX/UI e desenvolvimento começou antes de eu saber o que essas letras queriam dizer. Quando eu era criança, pensava por que o caixa eletrônico precisava de tantos botões para algo tão simples. Hoje sigo fazendo esse tipo de pergunta, mas agora crio experiências em que ninguém precise se perguntar onde clicar.

Oii, meu nome é Ágata Giovanna! Tenho 20 anos, estou no 5º período de Sistemas de Informação no CIn da UFPE e passei pelo IFPE, onde o design entrou de vez na minha vida.

Eu desenho a experiência e gosto de colocar a mão no código para ela sair do papel, sempre buscando produtos acessíveis e que façam sentido para quem usa.

Design UX/UI

FigmaComponentesAuto LayoutGridsProtótiposFluxos de navegaçãoArquitetura de informaçãoHierarquia visualDesign SystemsGOV.BR

Design gráfico

IllustratorPhotoshopCanvaLogotiposÍconesRedes sociaisEdição de imagens

Desenvolvimento

PythonC++TypeScriptNext.jsReactTailwind CSSNode.jsExpressPostgreSQLPrismaPOOAPIs REST

Ferramentas

GitGitHubDockerClaude Code
Contato

Vamos criar
juntos?

agatagio68@gmail.com

Aprende+

Aprendizagem interativa, acessível e conectada ao cotidiano.

  • UX/UI Design
  • EdTech
  • Inteligência Artificial
  • Mobile-first
Banner do Aprende+: logo da plataforma, coruja mascote do Tutor IA estudando no notebook, card de progresso de 75%, chat com o Tutor IA e trilhas sobre uso de água, saúde mental e alimentação escolar
01 / Sobre o projeto

Aprender pode ser mais simples.

O Aprende+ é uma plataforma educacional digital voltada a estudantes do ensino fundamental II e médio da rede pública. A proposta transforma temas do cotidiano, como alimentação escolar, uso de água e sustentabilidade, em experiências de aprendizagem curtas, visuais e interativas.

Com uma abordagem mobile-first, a plataforma combina conteúdos educativos, atividades de verificação, acompanhamento de progresso e o apoio complementar de um Tutor IA, aproximando o conhecimento da realidade dos estudantes.

Público
Estudantes da rede pública
Abordagem
Mobile-first
Foco
Aprendizagem interativa
02 / O desafio

Tornar o aprendizado mais próximo da realidade.

Como transformar informações educacionais em experiências acessíveis, envolventes e fáceis de compreender? O desafio do Aprende+ foi aproximar os conteúdos escolares de situações reais, facilitar a interpretação de informações visuais e manter o estudante engajado sem gerar sobrecarga durante a aprendizagem.

  1. 01

    Conexão com o cotidiano

    Relacionar conteúdos escolares a situações reais, tornando o aprendizado mais significativo.

  2. 02

    Clareza visual

    Facilitar a compreensão de gráficos, comparações e informações visuais sem perder a profundidade do conteúdo.

  3. 03

    Engajamento

    Manter o interesse dos estudantes com atividades curtas, progresso visível e uma experiência sem sobrecarga.

03 / Público-alvo

Uma experiência pensada para diferentes estudantes.

O Aprende+ foi desenvolvido pensando em estudantes do ensino fundamental II e médio da rede pública, considerando diferentes realidades socioculturais, níveis de familiaridade com a tecnologia e o acesso predominante por smartphones.

Para atender a esse público, a experiência prioriza linguagem simples, navegação previsível, conteúdos organizados em etapas curtas e interfaces intuitivas, que não exigem experiência prévia com plataformas educacionais complexas.

  • Ensino fundamental II e médio
  • Diferentes níveis de familiaridade digital
  • Acesso prioritário por smartphones
Tela Explorar do Aprende+, com busca por tema e cards de Uso de água, Descarte de resíduos, Mobilidade urbana e Qualidade do ar
Tela Home do Aprende+: saudação Olá, Seu nome, busca, card Continue aprendendo Alimentação escolar com 40% de progresso e botão Continuar, temas recomendados e navegação inferior com Início, Explorar, Tutor IA e Perfil
04 / Jornada do usuário

Uma jornada construída para evoluir.

A experiência do Aprende+ foi estruturada para acompanhar o estudante desde o primeiro acesso até a consolidação do aprendizado. Cada etapa foi planejada para oferecer clareza, personalização e continuidade.

Splash · Login · Criar conta · Recuperar senha · clique para ampliar
Interesses · Nível · Objetivo · clique para ampliar
Home · Explorar · Videoaula · clique para ampliar
Quiz · Feedback · Resumo · clique para ampliar
06 / A solução em telas

Da descoberta ao conhecimento.

Telas Home, Explorar e Perfil do Aprende+, com temas recomendados, busca por tema e progresso geral
Explorar e descobrir

Home, Explorar e Perfil

Recomendações de temas logo na tela inicial, navegação inferior sempre visível e um perfil que mostra o progresso do estudante.

Telas de aula do Aprende+, com videoaula de alimentação escolar, texto da aula e botão Concluir aula
Aprender no próprio ritmo

Módulos, conteúdos e videoaulas

Cada tema é dividido em etapas curtas: uma videoaula, um texto objetivo e o conteúdo da aula organizado em blocos.

Três telas do quiz do Aprende+: resposta correta com explicação, resposta incorreta com explicação e resumo da atividade com 4 de 5 acertos
Praticar e evoluir

Quiz, feedback e resumo

Feedback imediato em cada resposta, com a explicação do porquê, e um resumo no fim do tema com o que o estudante aprendeu.

07 / Tutor IA e acessibilidade

Tecnologia como apoio à aprendizagem.

Coruja do Tutor IA
Destaque

Tutor IA

O Tutor IA foi concebido como um recurso complementar à aprendizagem, oferecendo suporte para esclarecer dúvidas, reformular explicações e propor questões reflexivas. A inteligência artificial atua como mediadora do conhecimento, sem substituir os conteúdos e atividades da plataforma.

  • Esclarecer dúvidassobre os conteúdos.
  • Simplificar explicaçõesconforme a necessidade do estudante.
  • Propor reflexõesque aprofundem o aprendizado.
Tela de conversa com o Tutor IA: a IA oferece ajuda, atalhos Quero um desafio, Explicar de forma simples e Me dê um exemplo, o estudante pede uma explicação simples sobre alimentos ultraprocessados e a IA responde
Tutor IA · Conversa
Acessibilidade

Experiência para diferentes estudantes

A acessibilidade foi considerada desde a estrutura da interface, priorizando legibilidade, linguagem simples, navegação previsível e feedbacks que não dependem exclusivamente de cores.

Exemplo da Home: título Olá, Seu nome! em Poppins e texto de apoio em tamanho menor

01Legibilidade

Tipografia Poppins e hierarquia clara.

Barra de navegação inferior com Início ativo, Explorar, Tutor IA e Perfil, cada um com ícone e texto

02Navegação previsível

Componentes e ações consistentes.

Feedback de respostas: incorreta com ícone de X e borda vermelha, correta com ícone de check e borda verde-azulada

03Feedback acessível

Combinação de ícones, textos e cores para indicar acertos, erros e estados do sistema.

Instrução simples do onboarding: Quais temas você quer aprender? Selecione os conteúdos que você quer explorar na escola e no dia a dia

04Linguagem objetiva

Instruções simples e conteúdos organizados em etapas curtas.

08 / Considerações finais

Aprender também é evoluir.

O Aprende+ reúne design de interface, organização pedagógica e apoio de Inteligência Artificial em uma proposta centrada no estudante. O projeto demonstra como decisões de UX/UI podem contribuir para tornar a aprendizagem mais clara, contínua, acessível e conectada ao cotidiano.

Regulariza BR

Menos burocracia, mais clareza na regularização veicular.

  • UX/UI Design
  • GovTech
  • Mobile-first
  • Serviços Públicos
Banner do Regulariza Brasil: logo, chamada Sua vida em dia com o governo e seis celulares com a jornada de notificação, pendência, detalhes dos débitos, Pix, pagamento confirmado e acompanhamento
01 / Sobre o projeto

Simplificar também é transformar.

O Regulariza BR é uma proposta de aplicativo mobile voltada à regularização de pendências veiculares. A solução foi desenvolvida para facilitar a compreensão de débitos, orientar motoristas sobre as etapas necessárias e oferecer uma jornada mais clara, centralizada e acessível.

O projeto explora como o UX/UI Design pode simplificar processos públicos complexos, transformando informações burocráticas em uma experiência digital organizada, intuitiva e orientada às necessidades do cidadão.

Público
Motoristas com pendências veiculares
Abordagem
Mobile-first
Foco
Clareza, orientação e regularização

Projeto conceitual de UX/UI. Não é um serviço oficial do governo; usa o Padrão Digital GOV.BR apenas como referência.

02 / O desafio

Quando a burocracia vira uma barreira.

Receber uma notificação de irregularidade veicular pode gerar dúvidas sobre o motivo da pendência, os valores envolvidos, os prazos e os procedimentos necessários para resolver a situação. O desafio foi organizar essas informações em uma jornada simples e compreensível, reduzindo a dificuldade de encontrar respostas e entender o próximo passo.

  1. 01

    Clareza das informações

    Explicar pendências, débitos e procedimentos com linguagem objetiva e acessível.

  2. 02

    Orientação durante o processo

    Permitir que o motorista compreenda o que precisa fazer, quais opções estão disponíveis e como acompanhar a regularização.

  3. 03

    Redução da complexidade

    Organizar etapas e informações burocráticas em um fluxo digital intuitivo, evitando dúvidas e sobrecarga.

03 / Público-alvo

Uma experiência centrada no cidadão.

O projeto foi pensado para motoristas que recebem notificações relacionadas a irregularidades veiculares e precisam compreender sua situação e os caminhos disponíveis para regularização.

O aplicativo prioriza a apresentação de informações essenciais, uma navegação previsível e orientações claras para que diferentes perfis de usuários consigam compreender o processo.

  • Motoristas notificados sobre pendências
  • Necessidade de informações objetivas
  • Acesso simplificado aos procedimentos
Tela inicial com aviso Você tem uma pendência veicular identificada e o veículo ABC1D23
Tela Situação do veículo: alerta de pendência identificada, cartão do veículo e resumo das pendências
04 / Jornada do usuário

Da notificação à regularização.

A jornada acompanha o motorista desde o alerta recebido até o acompanhamento da regularização, com caminhos alternativos documentados no protótipo.

Notificação · Acesso · Início · clique para ampliar
Situação · Débitos · Dados cadastrais · clique para ampliar
Forma de pagamento · Pix · Confirmação · clique para ampliar
Acompanhamento · Notificações · Sem pendências · clique para ampliar
Casos de exceção

Quando algo sai do caminho principal

Estados documentados no protótipo para orientar o motorista em situações de fronteira.

Bastidores do processo

Do quadro branco ao fluxo.

Antes das telas, o problema foi organizado no quadro: problema, público, necessidades do usuário, solução, telas e casos de erro. Depois virou o fluxo completo no Figma, com decisões e casos de fronteira.

"o que aconteceu?" "quanto eu devo?" "como pago?"
No quadro"1. Situação do veículo — detalhe da pendência, qual a pendência, forma de pagamento"
07 / Interfaces finais

Uma experiência clara em cada etapa.

01

Consulta e identificação

Abertura, acesso com gov.br e consulta de outro veículo, para identificar a pendência sem novo cadastro.

02

Débitos e regularização

Situação do veículo, detalhes de cada débito e atualização cadastral quando os dados estão desatualizados.

03

Pagamento e acompanhamento

Escolha entre Pix, cartão e boleto, pagamento com Pix e acompanhamento das etapas da regularização.

04

Conclusão e confirmação

Confirmação de pagamento, dados atualizados e contestação enviada. O acesso ao documento (CRLV) aparece no quadro de planejamento, mas ainda não tem tela no protótipo.

08 / Acessibilidade e experiência

Informação pública precisa ser compreensível.

Em uma experiência que envolve informações e procedimentos de regularização veicular, clareza e previsibilidade são fundamentais. O projeto prioriza linguagem objetiva, organização visual e orientações que ajudem o usuário a compreender sua situação e as ações disponíveis.

Mensagem de pagamento não aprovado explicando o motivo e o que fazer

01Linguagem clara

Orientações diretas sobre o que aconteceu e o que fazer em seguida.

Débitos listados e total a pagar em destaque

02Hierarquia

Informações importantes, como débitos e total, em destaque.

Navegação inferior com ícone e texto

03Navegação consistente

Mesma estrutura de cabeçalho, retorno e navegação em todas as telas.

Alertas de aviso, informação e erro com ícone e texto

04Feedback de estados

Avisos, erros e sucesso com ícone, fundo e texto, não só cor.

Área de toque mínima de 44 × 44px e contraste mínimo de texto de 4,5:1 foram definidos como diretrizes no Design System. Não foram realizados testes formais de acessibilidade.

09 / Considerações finais

Tornar simples o que parece complicado.

O Regulariza BR explora como o design pode tornar processos burocráticos mais compreensíveis e acessíveis. Ao organizar informações, orientar decisões e estruturar uma jornada centrada no usuário, o projeto demonstra o papel do UX/UI na aproximação entre tecnologia e serviços públicos.

CINOVA

Gestão de manutenção predial mais simples, segura e conectada.

  • Full Stack
  • Mobile Development
  • React Native
  • Node.js
  • TypeScript
Banner do CINOVA: logo, chamada Gestão condominial prática e centralizada e seis celulares com tutorial, login, início, reservas, prestadores e comunicações
01 / Sobre o projeto

Tecnologia para uma gestão mais eficiente.

React NativeTypeScriptNode.jsExpressPrismaPostgreSQL

O CINOVA é uma plataforma digital desenvolvida para substituir métodos manuais e informais de gestão de manutenção predial. A solução centraliza o gerenciamento de ordens de serviço, facilitando a organização das solicitações e a comunicação entre moradores, técnicos e síndicos.

Com uma aplicação mobile integrada a uma API e banco de dados, o projeto busca oferecer maior transparência, controle e rastreabilidade das atividades de manutenção, permitindo que diferentes usuários acompanhem informações e processos diretamente pelo smartphone.

Área
Gestão de manutenção predial
Plataforma
Aplicativo mobile
Desenvolvimento
Front-end e back-end
Contexto
Projeto acadêmico em equipe

No código, o projeto aparece com o nome de trabalho SGMP; CINOVA é a identidade visual do app.

02 / O problema

Quando a manutenção depende de processos informais.

A gestão de manutenção predial pode envolver solicitações dispersas, comunicação fragmentada e dificuldade para acompanhar o andamento dos serviços. Sem uma estrutura centralizada, torna-se mais difícil organizar informações, consultar históricos e manter a transparência entre os envolvidos.

  1. 01

    Informações descentralizadas

    Organizar solicitações e registros de manutenção em um único ambiente digital.

  2. 02

    Comunicação entre diferentes usuários

    Facilitar a troca de informações entre moradores, técnicos e administradores.

  3. 03

    Controle e rastreabilidade

    Permitir que as ordens de serviço sejam registradas, consultadas e acompanhadas de maneira estruturada.

03 / Usuários e necessidades

Diferentes usuários, uma gestão conectada.

CINOVAAPI + banco de dados
MORADOR

Moradores

Precisam de um canal organizado para registrar e acompanhar solicitações relacionadas à manutenção predial.

FUNCIONARIO

Técnicos

Necessitam de informações claras sobre as ordens de serviço e as atividades de manutenção.

SINDICO

Síndicos e administradores

Precisam de maior visibilidade sobre solicitações, registros e andamento das demandas.

Os três perfis existem no código como o enum Papel (MORADOR, FUNCIONARIO, SINDICO). Após o login, a API retorna o papel do usuário e o app abre a área correspondente.

04 / Jornada no aplicativo

Da entrada à gestão do dia a dia.

Quatro momentos do protótipo de interface do CINOVA, do primeiro acesso às áreas de serviços, reservas e financeiro.

Tutorial · Login · Erro · clique para ampliar
Início · Comunicados · Detalhe · clique para ampliar
Prestadores · Cadastro · Reserva · clique para ampliar
Cobranças · Detalhe · Pagamento · clique para ampliar

As telas acima são do protótipo de interface (Figma). No código, o app mobile implementa áreas por papel: criação de ordem de serviço pelo morador, aprovação e acompanhamento pelo síndico e execução pelo técnico.

05 / Arquitetura do sistema

O que acontece por trás da interface.

Front-end mobile

Interfaces e navegação

Responsável pelas interfaces, navegação e interação dos usuários com as funcionalidades de manutenção predial.

  • src/screens telas por papel: morador, síndico e técnico
  • src/services chamadas à API com Axios
  • src/contexto contexto de autenticação
  • src/hooks hooks como useCriacaoOS
  • Testes com Jest em __tests__
Back-end

API REST em camadas

Responsável pela disponibilização das funcionalidades da API e pelo processamento das requisições do aplicativo.

  • routes definem os endpoints
  • controllers tratam requisição e resposta
  • repositories concentram o acesso aos dados
  • 6 grupos de rotas: auth, usuários, moradores, funcionários, síndicos e ordens de serviço
Prisma ORM

Modelo e migrações

Utilizado na interação da aplicação com os dados persistidos no banco.

  • Esquema em prisma/schema.prisma
  • Migrações versionadas em prisma/migrations
  • Dados iniciais com prisma/seed.ts
PostgreSQL

Dados relacionais

Banco de dados relacional utilizado para armazenar as informações do sistema.

  • Imagem postgres:16 via docker-compose
  • 5 tabelas: Usuario, Morador, Funcionario, Sindico e OrdemServico
  • Rota GET /db-test verifica a conexão
07 / Interfaces do aplicativo

Uma experiência mobile para o dia a dia.

Seal BrownRaw UmberScarletCarrot OrangeDutch WhiteLexend Deca · DM Sans
01

Comunicação

Comunicados da gestão aparecem na tela inicial e têm uma área própria, com detalhe de cada aviso.

02

Serviços

Prestadores com cadastro, edição e exclusão, incluindo período e horário de acesso ao condomínio.

03

Reservas

Reserva de áreas comuns com calendário, horário e número de pessoas, e confirmação antes de excluir.

04

Financeiro e perfil

Cobranças por situação (pendente, paga, em atraso), pagamento por QR Code e edição do perfil.

08 / Requisitos e decisões técnicas

Projetado para ser confiável e escalável.

Requisitos não funcionais definidos no planejamento do projeto. São metas, não medições de desempenho.

Meta5.000usuários simultâneos
Meta< 2 stempo de resposta
Meta≥ 99,5%disponibilidade mensal
Segurança e rastreabilidadeOrganização das ordens de serviçoManutenibilidade em camadasEscalabilidade para futuras integrações

Esses requisitos orientaram as decisões do projeto, mas não houve testes de carga, segurança ou disponibilidade que os comprovem.

09 / Processo de desenvolvimento

Da organização ao código.

  1. 01 · IniciaçãoLevantamento de requisitos
  2. 02 · PlanejamentoDefinição de arquitetura e backlog
  3. 03 · ExecuçãoDesenvolvimento das sprints
  4. 04 · EncerramentoTestes finais e documentação

Datas são marcos do cronograma planejado.

Gestão de riscos

Entre os riscos identificados estava o atraso na entrega, com previsão de acompanhamento contínuo do backlog e reuniões semanais como medida de mitigação.

10 / Resultados e aprendizados

Muito além de um aplicativo.

O CINOVA reúne desenvolvimento mobile, construção de API e persistência de dados em uma proposta integrada de gestão predial. O projeto representa uma experiência prática de desenvolvimento colaborativo, organização técnica e construção de soluções voltadas a necessidades reais.

Seu desenvolvimento envolve decisões relacionadas à estruturação de funcionalidades, comunicação entre camadas e organização de informações, demonstrando como diferentes tecnologias podem trabalhar juntas para formar uma aplicação completa.

Critérios de sucesso planejados · não medidos
  • Entrega dentro do prazo e orçamento
  • Satisfação nos testes acima de 90%
  • Redução de 50% no tempo de registro de ordens de serviço

Relatórios mensais em PDF: funcionalidade em análise, não implementada.

11 / Equipe e contribuição

Desenvolvimento em equipe.

AGÁgata GiovannaUX/UI Designer e Desenvolvedora
BRBruno Ramos
LCLucas Cabral
FVFlávia Vitória
GCGryghor Camonni
DRDiogo Rodrigues

Projeto acadêmico desenvolvido em equipe. Ágata atuou no design de interface do CINOVA e como desenvolvedora integrante do time.

12 / Encerramento

Explore o projeto por dentro.

O código do aplicativo e da API está aberto nos repositórios da equipe.

Capa do CIntegre+: logo à esquerda e três janelas de navegador em perspectiva sobre fundo azul, com o painel da ONG, os detalhes de uma ação e o formulário de criação de ação

CIntegre+

Design e desenvolvimento para aproximar escolas e iniciativas sociais.

  • UX/UI
  • Desenvolvimento Web
  • Gamificação
  • Impacto Social

Desenvolvido na disciplina de Desenvolvimento de Software da UFPE, em conjunto com a Prefeitura do Recife, o CIntegre+ propõe uma forma mais lúdica de conectar escolas públicas às atividades de ONGs. O projeto combina interfaces web, recursos de gamificação e uma implementação com front-end, back-end e banco de dados.

Contexto
Desenvolvimento de Software · UFPE
Parceria
Prefeitura do Recife
Plataforma
Web, pensada para desktop
Camadas
Front-end, back-end e banco de dados
01 / Problema e proposta

Fazer a ajuda chegar até a escola.

ONGs propõem atividades, mas nem sempre é simples para uma escola da rede pública descobrir essas oportunidades, entender o que cada uma pede e se organizar para participar. O CIntegre+ reúne essas ações em um só lugar e usa elementos de jogo para tornar a participação mais leve.

  • Facilitar a descoberta de atividadesPedidos das ONGs listados em cards, com tema, data e resumo.
  • Organizar informações sobre ações e participaçãoCada ação tem descrição, cronograma, local, vagas e dados da ONG.
  • Apoiar a comunicação entre escolas e ONGsContatos da ONG visíveis e uma etapa de validação da participação.
  • Incentivar o engajamento com gamificaçãoPontos para as escolas e um ranking das que mais contribuem.

Estes são os objetivos da solução. O projeto não mediu efeitos sobre a participação das escolas.

Página inicial: a escolha entre Sou Escola e Sou ONG já separa os dois públicos.

02 / Dois públicos e seus fluxos

Um caminho para cada lado da parceria.

Os fluxos seguem a navegação do protótipo. As etiquetas mostram o que está no Figma e o que foi confirmado no código do repositório.

  1. 01

    Explorar pedidos

    Em Pedidos Disponíveis, a escola vê as ações abertas das ONGs em cards.

    ProtótipoCódigo
  2. 02

    Consultar detalhes

    A página da ação reúne descrição, cronograma, local, vagas e contatos da ONG.

    ProtótipoCódigo
  3. 03
    Botões Participar da Atividade e Compartilhar Atividade

    Participar

    Participar da Atividade registra a escola na ação pela API.

    ProtótipoCódigo
  4. 04

    Acompanhar pontos e ranking

    A pontuação aparece no cabeçalho e no ranking. A aba Meus Pedidos existe apenas no protótipo.

    ProtótipoCódigoSó no protótipo

Na validação, o componente de avaliação com estrelas foi criado no código, mas ainda não está ligado a nenhuma página nem à API.

03 / Interfaces em destaque

As telas principais, de perto.

Clique em qualquer tela para ver a página inteira. Nomes, datas, imagens e números são conteúdo ilustrativo do protótipo, não dados reais de uso.

01

Painel da escola

Uma saudação com o nome da escola e os pedidos mais recentes das ONGs logo abaixo. No cabeçalho, a pontuação fica sempre à vista.

02

Listagem de pedidos

Cards com imagem, ONG, data, tag de tema e um botão Apoiar! direto.

03

Detalhes de uma ação

Conteúdo à esquerda e decisão à direita: detalhes, dados da ONG e o botão de participar.

04

Painel da ONG

A mesma estrutura do painel da escola, com uma ação principal em destaque: Criar uma nova ação.

05

Criação de uma ação

Formulário em duas colunas, com tags removíveis e envio de até quatro fotos.

06

Validação e avaliação

A ONG confirma a participação, avalia de uma a cinco estrelas e decide se finaliza ou continua a ação.

04 / Gamificação

Participar também é subir no ranking.

Os recursos de jogo foram pensados para incentivar a participação das escolas e deixar a experiência mais lúdica. Nada de medalhas ou conquistas: o projeto usa pontos e ranking.

  • Pontos no cabeçalhoA escola vê sua pontuação em todas as páginas.Código
  • Ranking com pódioEscolas ordenadas por pontos, com as três primeiras em destaque.Código
  • Escolas mais contribuintesUm resumo do ranking já na página inicial.Código
  • Avaliação com estrelasNota da ONG sobre a participação da escola.Protótipo
Regra implementada no back-end

Quando a ONG fecha uma atividade, cada escola participante recebe 100 pontos se a ação for de doação ou 200 pontos se for de voluntariado.

// server/src/activity/activityService.ts
if (data.status === "closed") {
  const points = updatedAction.category === "volunteer" ? 200 : 100;
  // soma os pontos ao score de cada escola participante
}
Cabeçalho com Nome da Escola, avatar e 1000 Pts Pódio do ranking com 1000, 800 e 600 pontos e lista das posições 4 a 10 Tabela Escolas Mais Contribuintes com posição, escola, pontos e atividades

Recortes reais do protótipo. Nomes e pontuações são ilustrativos.

06 / Do Figma ao código

Do protótipo à implementação

As telas do Figma viraram uma aplicação web com API e banco de dados. Esta é a estrutura, conforme o repositório.

Next.jsFront-end

Páginas e navegação: início, pedidos, detalhes da ação, criação de ação, ranking e perfil. As chamadas à API ficam em server actions.

ExpressBack-end

API organizada por recurso (rotas, controller e service): usuários, escolas, ONGs, endereços, atividades e participações, com login por JWT.

PrismaDados

Modela User, School, Ong, Address, Activity e SchoolActivity, com migrações versionadas.

PostgreSQLBanco

Banco relacional definido no schema do Prisma e executado em container.

DockerAmbiente

O docker-compose sobe banco, servidor e cliente em uma rede compartilhada.

O repositório também tem registros de decisões de arquitetura (ADRs), testes com Jest e um workflow de CI que faz o build do client e do server. Não há endereço público da plataforma; o GitHub contém o código, não uma demonstração online.

07 / Equipe

Um projeto feito a muitas mãos.

LTLucas Torres
ITIsabelle Tenório
EREduarda Rodrigues
DMDaniel Mendonça
AGÁgata Giovanna
FMFelipe Milk
MHMatheus Henrique

Equipe listada no README do repositório. No histórico de commits, as contribuições de Ágata incluem a tela de cadastro, a home da escola, a home da ONG e a página de configurações.

08 / Encerramento

Do protótipo ao código, em equipe.

O CIntegre+ juntou, em um projeto acadêmico ligado a uma demanda da Prefeitura do Recife, o desenho das interfaces e a construção de uma aplicação com API e banco de dados. Pontos e ranking só funcionam com regras e dados por trás, e foi isso que o projeto buscou ligar: o que a escola vê na tela e o que o sistema registra.