Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epicestudar/votefy

plataforma de enquetes interativas feita com Node.js, React.js e Next.js juntamente com o MongoDB
https://github.com/epicestudar/votefy

bcrypt figma full-stack-web-development jwt-auth jwt-token mongodb next-js node-js react requirement-analysis

Last synced: 10 days ago
JSON representation

plataforma de enquetes interativas feita com Node.js, React.js e Next.js juntamente com o MongoDB

Awesome Lists containing this project

README 

        
Typing SVG

### Contexto Inicial

**Sistema de Enquetes Online:**

O sistema será uma **plataforma interativa** onde os usuários poderão **criar, votar e acompanhar os resultados** de enquetes em tempo real. Será **simples e intuitivo**, com uma interface amigável. O sistema será projetado para atender a diferentes cenários de uso, desde enquetes amplas até específicas.














   logo






   backend

  documentação

  mobile

  site














Typing SVG



## Apresentação do Projeto: Desenvolvimento de Aplicação sobre Plataforma de Enquetes Interativas



### Visão Geral do Projeto

**Objetivo:**

Desenvolver uma aplicação web sobre uma plataforma interativa de `enquetes`, na qual os usuários poderão criar, votar e acompanhar os resultados. Nós utilizaremos tecnologias modernas e práticas de mercado, garantindo segurança, escalabilidade e uma experiência de usuário fluida por meio do React, Next, Node.js, MongoDB, e JWT, criando uma aplicação completa e funcional que pode ser utilizada no mundo real.



**Por Que Este Projeto?**

A nossa empresa, dedicada a inovar no campo da interação digital, está em processo de criação de uma plataforma de enquetes interativas chamada `Votefy`. Esse projeto visa proporcionar uma experiência envolvente e dinâmica para os usuários, permitindo que eles participem e criem enquetes de maneira intuitiva e interativa. Com o objetivo de transformar a forma como as pessoas coletam e analisam opiniões, estamos desenvolvendo uma solução tecnológica avançada que ofereça uma interface amigável e funcionalidades robustas. 








Typing SVG



A plataforma de enquetes será desenvolvida utilizando `Node.js` para o backend e `React e Next.js` para o frontend, com `MongoDB` como banco de dados e `JWT` para autenticação. A solução visa proporcionar uma experiência de usuário intuitiva, com recursos para criação, visualização, atualização e exclusão de enquetes.









Typing SVG



- **Específicos:**

  1. Criar uma `API RESTful` com Node.js que suporte operações CRUD (Criar, Ler, Atualizar, Deletar) para enquetes, até o final da segunda semana.

  2. Implementar um `sistema de autenticação` de usuários utilizando JWT até o final da terceira semana.

  3. Configurar e integrar o banco de dados MongoDB, permitindo o `armazenamento seguro` e eficiente das enquetes dos usuários, até o final da quarta semana.

  4. Desenvolver a interface de usuário em `React e Next`, permitindo a criação e gerenciamento de enquetes, até o final da quinta semana.

  5. Integrar um sistema de `notificações em tempo real` para alertar os usuários sobre atualizações ou novos votos em suas enquetes, até o final da sexta semana.

  6. Implementar testes automatizados de integração para garantir a `consistência das operações CRUD`, até o final da sétima semana.



- **Mensuráveis:**

  1. Alcançar uma base de 100 usuários registrados na plataforma dentro do primeiro mês após o lançamento.

  2. Garantir que 90% das operações CRUD sejam concluídas com sucesso e sem erros no primeiro mês de operação.

  3. Obter uma avaliação de satisfação do usuário de pelo menos 4,5 em uma escala de 1 a 5 após o segundo mês de uso da plataforma.

  4. Assegurar que a aplicação suporte pelo menos 500 acessos simultâneos sem degradação de performance.

 

- **Relevantes:**

  1. Garantir que a plataforma seja escalável e segura para suportar o crescimento constante, garantindo que a `infraestrutura cloud` possa ser ajustada conforme necessário.

  2. Desenvolver uma experiência de usuário fluida e intuitiva, garantindo que a interface de criação de enquetes seja fácil de usar tanto em dispositivos móveis quanto em desktops.

  3. Introduzir um sistema de feedback constante, permitindo que os usuários sugiram melhorias e relatem problemas diretamente da interface da plataforma.    

 







Typing SVG



```mermaid

gantt

    title Cronograma do Projeto de Enquete

    dateFormat  YYYY-MM-DD



    section Semana 1-2: Definição dos Requisitos e Configuração do Ambiente

    Reunião inicial          :a1, 2024-09-10, 3d

    Configuração do ambiente :a2, 2024-09-13, 4d

    Definição das entidades  :a3, 2024-09-17, 3d

    Criação de wireframes    :a4, 2024-09-20, 4d



    section Semana 3-4: Desenvolvimento do Backend e API

    Desenvolvimento da API   :b1, 2024-09-25, 4d

    Rotas CRUD para enquetes :b2, 2024-09-29, 5d

    Testes iniciais do backend :b3, 2024-10-04, 5d



    section Semana 5-6: Desenvolvimento do Frontend

    Criação do frontend      :c1, 2024-10-09, 4d

    Integração com a API     :c2, 2024-10-13, 4d

    Implementação da autenticação :c3, 2024-10-17, 6d



    section Semana 7-8: Testes e Ajustes Finais

    Testes de integração     :d1, 2024-10-23, 4d

    Funcionalidades adicionais :d2, 2024-10-27, 4d

    Testes de desempenho e segurança :d3, 2024-10-31, 6d



    section Semana 9: Finalização e Entrega

    Revisão final e documentação :e1, 2024-11-06, 2d

    Apresentação e entrega    :e2, 2024-11-08, 2d



```









Typing SVG



1. **Atrasos no Desenvolvimento: Riscos de Complexidade e Mudança de Requisitos:** O desenvolvimento de uma plataforma de enquetes interativas envolve várias funcionalidades interdependentes, como o sistema de login/cadastro, criação de enquetes, e funcionalidades de votação. O mal gerenciamento do tempo e a subestimação da complexidade técnica podem resultar em atrasos significativos, especialmente se surgirem mudanças nos requisitos ou dificuldades técnicas inesperadas, como a necessidade de ajustes em bibliotecas externas ou problemas de desempenho em consultas ao banco de dados.

   

   **Mitigação:**

Planejamento Detalhado e Metas Curto-Prazo: Defina claramente os requisitos desde o início, documentando-os de forma detalhada. Crie um cronograma com marcos bem definidos e revisões periódicas.

Gestão de Mudanças: Implemente um processo formal de controle de mudanças, onde qualquer nova solicitação de alteração deve ser discutida e aprovada antes de ser incorporada ao projeto.

Divisão do Desenvolvimento: Divida o desenvolvimento em pequenas entregas incrementais. Cada funcionalidade deve ser desenvolvida, testada e integrada em ciclos curtos.

Buffer para Imprevistos: Alocar tempo extra no cronograma para lidar com problemas técnicos ou mudanças inesperadas.

Ferramentas de Monitoramento: Utilize ferramentas de gestão de projetos, como Jira ou Trello, para acompanhar o progresso e manter o controle das tarefas.



2. **Desafios de Integração: Riscos de Inconsistência e Sincronização Entre Frontend e Backend:** A integração entre o frontend (React/Next.js) e o backend (Node.js) pode enfrentar desafios significativos, especialmente em relação ao fluxo de autenticação e à manipulação das enquetes e votos. A comunicação entre o frontend e as APIs precisa ser sincronizada de maneira eficiente, especialmente na gestão de sessões, autenticação JWT e atualização de dados em tempo real, para garantir uma experiência de usuário fluida.

   

   **Mitigação:**

Padronização de APIs: Garanta que as APIs estejam bem documentadas e sigam padrões consistentes, como o uso de REST ou GraphQL. Isso facilita a integração e a comunicação entre frontend e backend.

Testes Automatizados: Implemente testes automatizados para o frontend e o backend. Testes de integração garantirão que os endpoints da API estejam funcionando corretamente e que a comunicação com o frontend seja sincronizada.

Gestão de Sessões: Utilize um sistema de gestão de sessão robusto, como JWT com renovação automática de tokens, garantindo que a autenticação funcione corretamente e sem problemas de sincronização.

Simulações de Cenários de Uso: Execute simulações de diferentes cenários de interação entre frontend e backend para garantir que a manipulação de enquetes e votos aconteça sem inconsistências.

WebSockets ou SSE (Server-Sent Events): Para atualizações de dados em tempo real, considere usar WebSockets ou SSE, que permitem manter o frontend sincronizado com as atualizações feitas no backend.



3. **Segurança dos Dados: Vulnerabilidades em Autenticação, Proteção de Votos e Privacidade de Usuários:** A segurança dos dados é uma preocupação central em plataformas interativas. Com a funcionalidade de login/cadastro, é fundamental garantir que as senhas dos usuários sejam armazenadas com segurança, que a autenticação seja robusta (ex: usando JWT) e que as enquetes e votos sejam protegidos contra manipulação externa (como múltiplos votos fraudulentos ou ataques de injeção). Além disso, dados pessoais dos usuários, como e-mails, devem ser protegidos contra vazamentos.

   

   **Mitigação:**

Criptografia de Senhas: Armazene as senhas dos usuários utilizando algoritmos de hash seguros, como bcrypt ou Argon2, e implemente políticas de senha forte.

Autenticação Segura (JWT): Use tokens JWT com expiração curta e renovações controladas. Assegure-se de usar HTTPS para a troca segura de tokens e dados sensíveis.

Proteção contra Votos Fraudulentos: Implemente restrições para impedir múltiplos votos por usuário, como limitar um voto por IP, ou usar cookies/sessões junto ao JWT para garantir unicidade. Também é útil usar mecanismos de validação, como captchas, para evitar automação de votos.

Proteção contra Ataques de Injeção: Valide e sanitize todas as entradas de usuários para proteger a aplicação contra SQL injection e XSS. Use bibliotecas e frameworks que oferecem proteção contra essas vulnerabilidades, como o mongoose (MongoDB) e express-validator.

Anonimização de Dados: Para garantir a privacidade dos usuários, anonimize dados sensíveis nas enquetes, limitando o acesso a informações pessoais apenas para o necessário.

Auditoria e Logs: Implemente mecanismos de auditoria e logs para monitorar atividades suspeitas, como tentativas de acesso não autorizado ou votos suspeitos, e responda rapidamente a ameaças.











Typing SVG



**Equipe:**

- 1 Gerente de Projetos

- 3 Desenvolvedores Full-Stack (Node.js, React e Next)

- 2 Designer UI/UX

- 1 Administrador de Banco de Dados

- 1 Especialista em Segurança



**Tecnologias:**

- **Node.js** (Backend)

- **React e Next** (Frontend)

- **MongoDB** (Banco de Dados)

- **JWT** (Autenticação)

- **Git/GitHub** (Controle de Versão)



**Ferramentas de Gestão:**

- Trello para gerenciamento de tarefas

- Slack para comunicação interna

- Figma para design de interfaces

- Mermaid para montagem dos diagramas











Typing SVG



```mermaid

classDiagram

    class Usuario {

        +int id

        +string nome

        +string email

        +string senha

        +string cidade

        +string fotoDePerfil

        +obterInformaçõesDoUsuario()

        +fazerLogin()

        +editarUsuario()

        +apagarUsuario()

    }



    class Enquete {

        +int id

        +string título

        +string[] opções

        +string descrição

        +enum categoria

        +string imagem

        +date dataDeCriação

        +int usuarioId

        +create()

        +read()

        +edit()

        +delete()

    }



    class Votacao {

        +int id

        +int enqueteId

        +int usuarioId

        +string[i] opçãoVotada

        +date dataQueVotou

        +read()

        +create()

        +edit()

        +delete()

    }



    Usuario "1" -- "0..*" Enquete : "cria"

    Enquete "1" -- "0..*" Votacao : "possui"



```









Typing SVG

```mermaid

flowchart TD

    U[Usuário] -->|Criar Conta| A(Registrar-se)

    A -->|Fazer Login| B(Fazer Login)

    B -->|Acessar Plataforma| C(Plataforma de Enquetes)

    

    C -->|Criar Enquete| D(Criar Nova Enquete)

    D -->|Adicionar Opções| E(Adicionar Opções à Enquete)

    

    C -->|Votar em Enquete| F(Votar em Enquete Existente)

    F -->|Selecionar Opção| G(Escolher Opção e Confirmar Voto)

    

    C -->|Acompanhar Resultados| H(Visualizar Resultados das Enquetes)

    

    I[Criador da Enquete] -->|Gerenciar Enquetes| J(Gerenciar Enquetes que ele criou)

    J -->|Editar Enquete| K(Editar Detalhes da Enquete)

    J -->|Excluir Enquete| L(Excluir Enquete)

    

    U -->|Editar Perfil| M(Atualizar Informações de Usuário)

    U -->|Excluir Conta| N(Excluir Conta)



```









Typing SVG

```mermaid

flowchart TD

    Start([Início]) --> |Acessa Plataforma| A[Fazer Login]

    A -->|Login Sucesso| B[Dashboard de Enquetes]

    A -->|Login Falhou| C[Exibir Erro de Login]

    C -->|Tentar Novamente| A

    

    B -->|Criar Nova Enquete| D[Criar Enquete]

    D -->|Inserir Título, Opções e Descrição| E[Confirmar Criação]

    E -->|Sucesso| F[Exibir Enquete no Dashboard]

    

    B -->|Votar em Enquete| G[Selecionar Enquete]

    G -->|Escolher Opção| H[Confirmar Voto]

    H -->|Voto Registrado| I[Atualizar Resultados]

    

    B -->|Acompanhar Resultados| J[Visualizar Resultados em Tempo Real]

    

    B -->|Gerenciar Enquetes| K[Editar ou Excluir Enquete]

    K -->|Confirmar Alterações| F

    

    End([Fim])



```









Typing SVG






### Paleta de Cores:



[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=1DA1F2&repeat=false&random=false&width=435&lines=Azul+Celeste+-+1DA1F2)](https://git.io/typing-svg)

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=E1E8ED&repeat=false&random=false&width=435&lines=Cinza+Claro+-+E1E8ED)](https://git.io/typing-svg)

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=17BF63&repeat=false&random=false&width=435&lines=Verde+Limão+-+17BF63)](https://git.io/typing-svg)

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=657786&repeat=false&random=false&width=435&lines=Cinza+Médio+-+657786)](https://git.io/typing-svg)

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=FFFFFF&repeat=false&random=false&width=435&lines=Branco+-+FFFFFF)](https://git.io/typing-svg)

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=E0245E&repeat=false&random=false&width=435&lines=Vermelho+Suave+-+E0245E)](https://git.io/typing-svg)







### Fontes de Texto:



**• Poppins**



**• Roboto**



**• Kanit**










Typing SVG



### Baixa Fidelidade:



   logo




### Média Fidelidade:



   logo




### Alta Fidelidade:



   logo










 Typing SVG



* ### Modelagem de Diagramas:

    - [Mermaid](https://mermaid.live/edit#pako:eNpVjs1qw0AMhF9F6NRC_AI-FBq7zSXQQnPz5iBs2bvE-8NaSwi2373r-NLqJM18M2jG1neMJfajv7eaosClVg7yvDeVjmYSS9MViuJtObGA9Y4fCxxfTh4m7UMwbnjd-eMGQTWfN4xBtHG3dbeqZ_7L8QJ1c6YgPlz_Ope7X-CjMd861_93dOSc-mx6KnsqWopQUXwieEDL0ZLp8vvzpigUzZYVlnntuKc0ikLl1oxSEv_zcC2WEhMfMPo0aMyd45SvFDoSrg0NkeyOrL_WfFuF)



* ### IA's Usadas:

    - [ChatGPT 3.5](https://chat.openai.com/)

    - [Bing - Image Creator](https://www.bing.com/images/create)

 

* ### UX/UI:

  - [Figma](https://www.figma.com/)

  

* ### Outros:

  - [YouTube](https://www.youtube.com/)

  - [Documentação](https://github.com/shyoutarou/README-Model/blob/master/README.md)

  - [Badges](https://dev.to/)








Typing SVG





  

    

      

         Vinícius G. Feitoza  epicestudar 

         João Victor de Lima  JoaovlLima