Artigo original: Here are some app ideas you can build to level up your coding skills

Você já quis criar algo, mas não tinha ideia do que fazer? Assim como os autores, às vezes, têm "bloqueio de escritor", isso também é verdade para os desenvolvedores.

Juntamente com meu amigo Jim, criamos uma coleção de ideias de aplicações que se destina a resolver esse problema de uma vez por todas!

Essas aplicações são:

  • ótimas para aprimorar suas habilidades de programação
  • ótimas para dar experiência com novas tecnologias
  • ótimas para serem adicionadas ao seu portfólio para impressionar seu próximo empregador/cliente
  • ótimas para serem usadas como exemplo em tutoriais (artigos ou vídeos)
  • fáceis de completar e também facilmente ampliáveis com novos recursos

Esta não é apenas uma simples lista de projetos, mas uma coleção que descreve cada projeto com detalhes suficientes para que você possa desenvolvê-los do zero!

Cada especificação de projeto contém o seguinte:

  1. Um objetivo claro e descritivo
  2. Uma lista de histórias de usuários que devem ser implementadas. Essas histórias atuam mais como uma diretriz do que como uma lista forçada de tarefas pendentes – sinta-se à vontade para adicionar seus próprios recursos, se desejar
  3. Uma lista de recursos adicionais que aprimoram não apenas o projeto básico, mas também suas habilidades ao mesmo tempo
  4. Todos os recursos e links para ajudá-lo a encontrar o que você precisa para concluir o projeto

Projetos

Todos os projetos são divididos em três níveis com base no conhecimento e na experiência necessários para concluí-los. Esses níveis são:

  1. Iniciante – Desenvolvedores nos estágios iniciais de sua jornada de aprendizado. Aqueles que normalmente se concentram na criação de aplicações voltadas para o usuário.
  2. Intermediário – Desenvolvedores em um estágio intermediário de aprendizado e experiência. Eles se sentem confortáveis em UI/UX, usando ferramentas de desenvolvimento e criando aplicações que usam serviços de API.
  3. Avançado – Desenvolvedores que têm todos os conhecimentos acima e estão aprendendo técnicas mais avançadas, como a implementação de aplicações de back-end e serviços de banco de dados.

Abaixo, você encontrará 5 projetos para cada uma das camadas (15 no total), mas há mais de 30 projetos (no momento) neste repositório do GitHub. Não deixe de conferir, pois estamos planejando adicionar mais projetos no futuro. Sua ajuda é bem-vinda! Mais informações sobre isso na seção Contribuição abaixo.

1. Aplicação de notas

Nível: 1 - Iniciante

Descrição: Crie e armazene suas anotações para uso posterior!

Histórias de usuário

  • O usuário pode criar uma nota
  • O usuário pode editar uma nota
  • O usuário pode excluir uma nota
  • Ao fechar a janela do navegador, as anotações serão armazenadas e, quando o usuário retornar, os dados serão recuperados

Recursos adicionais

  • O usuário pode criar e editar uma nota no formato markdown. Ao salvar, ele converterá markdown em HTML
  • O usuário pode ver a data em que criou a nota

Exemplo de projeto

2. Luzes de Natal

Nível: 1 - Iniciante

Descrição: a aplicação de Luzes de Natal depende de seus talentos de desenvolvimento para criar uma exibição de luzes hipnotizantes. Sua tarefa é desenhar sete círculos coloridos em uma fileira e, com base em um cronômetro, alterar a intensidade de cada círculo. Quando um círculo é iluminado, seu antecessor retorna à intensidade normal.

Isso simula o efeito de uma série de luzes piscantes, semelhante às exibidas durante as festas de Natal.

Histórias de usuário

  • O usuário pode pressionar um botão para iniciar e parar a exibição
  • O usuário pode alterar o intervalo de tempo que controla a mudança na intensidade

Recursos adicionais

  • O usuário pode selecionar a cor usada para preencher cada círculo
  • O usuário pode especificar o valor da intensidade
  • O usuário pode alterar o tamanho de qualquer círculo na linha
  • O usuário pode especificar o número de linhas a serem incluídas na exibição, podendo escolher de uma a sete linhas

Links e recursos úteis

Exemplo de projeto

3. FlipImage

Nível: 1 - Iniciante

Descrição: É importante que os desenvolvedores da Web compreendam os fundamentos da manipulação de imagens, pois as aplicações avançadas da Web dependem de imagens para agregar valor à interface e à experiência do usuário (UI/UX).

O FlipImage explora um aspecto da manipulação de imagens: a rotação de imagens. Essa aplicação exibe um painel quadrado contendo uma única imagem apresentada em uma matriz 2x2. Usando um conjunto de setas para cima, para baixo, para a esquerda e para a direita adjacentes a cada uma das imagens, o usuário pode virá-las na vertical ou na horizontal.

Você deve usar somente HTML, CSS e Javascript nativos para implementar essa aplicação. Pacotes de imagens e bibliotecas não são permitidos.

Histórias de usuário

  • O usuário pode ver um painel contendo uma única imagem repetida em uma matriz 2x2
  • O usuário pode virar qualquer uma das imagens na vertical ou na horizontal usando um conjunto de setas para cima, para baixo, para a esquerda e para a direita ao lado da imagem

Recursos adicionais

  • O usuário pode alterar a imagem padrão inserindo o URL de uma imagem diferente em um campo de entrada
  • O usuário pode exibir a nova imagem clicando no botão "Display" (Exibir) ao lado do campo de entrada
  • O usuário poderá ver uma mensagem de erro se o URL das novas imagens não for encontrado

Links e recursos úteis

Exemplo de projeto

4. Aplicação de questionário

Nível: 1 - Iniciante

Descrição: Pratique e teste seus conhecimentos respondendo a perguntas em uma aplicação de questionário.

Como desenvolvedor, você pode criar uma aplicação de questionário para testar as habilidades em programação de outros desenvolvedores (em HTML, CSS, JavaScript, Python, PHP etc.)

Histórias de usuário

  • O usuário pode iniciar o questionário pressionando um botão
  • O usuário pode ver uma pergunta com 4 respostas possíveis
  • Depois de selecionar uma resposta, exiba a próxima pergunta para o usuário. Faça isso até que o questionário seja concluído
  • No final, o usuário pode ver as seguintes estatísticas:
  1. Tempo necessário para concluir o questionário
  2. Quantas respostas corretas ele obteve?
  3. Uma mensagem mostrando se ele foi aprovado ou reprovado no teste

Recursos adicionais

  • O usuário pode compartilhar o resultado de um questionário nas mídias sociais
  • Adicione vários testes à aplicação. O usuário pode selecionar quais deles deseja responder
  • O usuário pode criar uma conta e ter todas as pontuações salvas em seu painel
  • O usuário pode concluir um questionário várias vezes

Exemplos de projetos

Aplicação de questionário criada com React (aguarde o carregamento, pois ela está hospedada no Heroku)

5. Conversor de números romanos para decimais

Nível: 1 - Iniciante

Descrição: O sistema numérico representado pelos algarismos romanos teve origem na Roma antiga e continuou sendo a forma usual de escrever números em toda a Europa até o final da Idade Média. Os números romanos, como usados atualmente, empregam sete símbolos, cada um com um valor inteiro fixo.

Veja na tabela abaixo o Símbolo - pares de Valores:

  • I — 1
  • V — 5
  • X — 10
  • L — 50
  • C — 100
  • D — 500
  • M — 1000

Histórias de usuário

  • O usuário deve ser capaz de inserir um número romano em um campo de entrada
  • O usuário poderá ver os resultados em um único campo de saída contendo o equivalente decimal (base 10) do número romano que foi inserido ao pressionar um botão
  • Se um símbolo errado for inserido, o usuário deverá ver um erro

Recursos adicionais

  • O usuário pode ver a conversão ser feita automaticamente ao digitar
  • O usuário deve ser capaz de converter de decimal para romano (e vice-versa)

Links e recursos úteis

Exemplo de projeto

Conversor de números romanos (instruções em inglês)

6. Aplicação localizadora de livros

Nível: 2 - Intermediário

Descrição: Criar uma aplicação que permita aos usuários pesquisar livros inserindo uma consulta (título, autor etc.). Exibir os livros resultantes em uma lista na página com todos os dados correspondentes.

Histórias de usuário

  • O usuário pode inserir uma consulta de pesquisa em um campo de entrada
  • O usuário pode enviar a consulta. Isso chamará uma API que retornará um array de livros com os dados correspondentes (título, autor, data de publicação, imagem etc.)
  • O usuário pode ver a lista de livros que aparecem na página

Recursos adicionais

  • Para cada item da lista, adicionar um link que enviará o usuário a um site externo que tenha mais informações sobre o livro
  • Implementar um design responsivo
  • Adicionar animações de carregamento

Links e recursos úteis

Você pode usar a API do Google Livros

Exemplo de projeto

Busca de Livros - React

7. Jogo de memória de cartas

Nível: 2 - Intermediário

Descrição: O jogo de memória de cartas é um jogo em que você precisa clicar em uma carta para ver a imagem que está embaixo dela e tentar encontrar a imagem correspondente embaixo das outras cartas.

Histórias de usuário

  • O usuário pode ver uma grade com n x n cartas (n é um número inteiro), sendo que todas as cartas estão inicialmente viradas para baixo (estado oculto)
  • O usuário pode clicar em um botão para iniciar o jogo e, quando esse botão for clicado, um cronômetro será iniciado
  • O usuário pode clicar em qualquer carta para revelar a imagem que está embaixo dela (alterá-la para o estado visível). A imagem será exibida até que o usuário clique em uma segunda carta

Quando o usuário clica na segunda carta:

  • Se houver uma correspondência, as duas cartas serão eliminadas do jogo (seja escondendo-as/removendo-as ou deixando-as visíveis)
  • Se não houver uma correspondência, as duas cartas voltarão ao seu estado original (estado oculto)
  • Quando todas as correspondências tiverem sido encontradas, o usuário poderá ver uma caixa de diálogo com uma mensagem de parabéns e um contador mostrando o tempo que levou para terminar o jogo

Recursos adicionais

  • O usuário pode escolher entre vários níveis de dificuldade (Fácil, Médio, Difícil). Aumentar a dificuldade significa: diminuir o tempo disponível para concluir e/ou aumentar o número de cartas
  • O usuário pode ver as estatísticas do jogo (número de vezes que ganhou/perdeu, o melhor tempo para cada nível)

Links e recursos úteis

Exemplos de projetos

Flip - jogo de memória de cartas (em inglês)

SMB3 Jogo de memória de cartas (em inglês)

8. Gerador de tabelas em markdown

Nível: 2 - Intermediário

Descrição: Crie uma aplicação que converterá uma tabela normal com dados fornecidos pelo usuário (opcionalmente) em uma tabela formatada em markdown.

Histórias de usuário

  • O usuário pode criar uma tabela HTML com um determinado número de linhas e colunas
  • O usuário pode inserir texto em cada célula da tabela HTML
  • O usuário pode gerar uma tabela formatada em markdown que conterá os dados da tabela HTML
  • O usuário pode visualizar a tabela formatada em markdown

Recursos adicionais

  • O usuário pode copiar a tabela formatada do markdown para a área de transferência pressionando um botão
  • O usuário pode inserir uma nova linha ou coluna em um local especificado
  • O usuário pode excluir uma linha ou coluna completamente
  • O usuário pode alinhar (à esquerda, à direita ou ao centro) uma célula, uma coluna, uma linha ou a tabela inteira

Links e recursos úteis

Exemplo de projeto

Gerador de tabelas/Tabelas Markdown (em inglês)

9. Arte com strings

Nível: 2 - Intermediário

Descrição: O objetivo de Arte com strings é proporcionar ao desenvolvedor a prática de criar um gráfico animado simples, usando geometria no algoritmo de animação e criando algo que seja visualmente agradável de assistir.

A Arte com strings desenha uma única linha multicolorida que se move suavemente até que uma extremidade toque em um lado da janela que a envolve. No ponto em que ela toca, um efeito de "salto" é aplicado para mudar sua direção.

Um efeito de ondulação é criado mantendo apenas 10 a 20 imagens da linha à medida que ela se move. As imagens mais antigas são progressivamente desbotadas até desaparecerem.

As bibliotecas de animação não são permitidas. Use apenas HTML/CSS/JavaScript puro.

Histórias de usuário

  • Comece desenhando uma linha multicolorida em uma posição aleatória dentro do limite da janela que a envolve
  • A cada 20 ms, desenhe uma cópia da linha em uma nova posição com base em uma trajetória – a distância incremental da linha anterior com base nos pontos finais
  • Quando um dos pontos de extremidade da linha tocar o limite da janela circundante, mude sua direção e altere aleatoriamente seu ângulo
  • Diminua progressivamente a intensidade das linhas antigas de modo que apenas as 10 a 20 linhas mais recentes fiquem visíveis para criar a sensação de movimento ou "ondulação"

Recursos adicionais

  • O usuário pode especificar o comprimento da linha e sua velocidade
  • O usuário pode especificar as várias linhas dentro da janela, todas se movendo ao longo de diferentes trajetórias e velocidades

Links e recursos úteis

Exemplo de projeto

Este projeto é muito próximo do que pretendemos aqui, mas tem uma pequena janela de fechamento e é monocromático. Daniel Cortes

10. Aplicação de tarefas por fazer

Nível: 2 - Intermediário

Descrição: A aplicação de tarefas clássica em que o usuário pode anotar todas as coisas que deseja realizar.

Histórias de usuário

  • O usuário pode ver um campo de entrada no qual ele pode digitar um item de tarefa
  • Ao pressionar Enter (ou um botão), o usuário pode enviar o item de tarefa e pode ver que ele está sendo adicionado a uma lista de tarefas
  • O usuário pode marcar uma tarefa como concluída
  • O usuário pode remover um item de tarefa pressionando um botão (ou o próprio item de tarefa)

Recursos adicionais

  • O usuário pode editar uma tarefa
  • O usuário pode ver uma lista com todas as tarefas concluídas
  • O usuário pode ver uma lista com todas as tarefas ativas
  • O usuário pode ver a data em que criou a tarefa
  • Ao fechar a janela do navegador, as tarefas serão armazenadas e, quando o usuário retornar, os dados serão recuperados

Links e recursos úteis

Exemplos de projetos

Aplicação de tarefas desenvolvida com React

11. Mecanismo do jogo de batalha naval

Nível: 3 - Avançado

Descrição: O mecanismo do jogo de batalha naval (em inglês, Battleship Game Engine, ou BGE) implementa o clássico jogo de tabuleiro baseado em turnos como um pacote separado de qualquer camada de apresentação. Esse é um tipo de padrão arquitetônico que é útil em muitas aplicações, pois permite que qualquer número de aplicações utilize o mesmo serviço.

O próprio BGE é invocado por meio de uma série de chamadas de função em vez de ações diretamente acopladas do usuário final. Nesse aspecto, o uso do BGE é semelhante ao uso de uma API ou de uma série de rotas expostas por um servidor da web.

Esse desafio exige que você desenvolva o BGE e uma camada de apresentação baseada em texto muito fina para testes, separada do próprio mecanismo. Devido a isso, as histórias de usuário abaixo estão divididas em dois conjuntos: um para o BGE e outro para a camada de apresentação baseada em texto.

O BGE é responsável por manter o estado do jogo.

Histórias de usuário

BGE

  • O chamador pode invocar uma função startGame() para iniciar um jogo para um jogador. Essa função gerará um tabuleiro de jogo 8x8 que consiste em 3 navios com uma largura de um quadrado e um comprimento de:
  1. Destroyer: 2 quadrados
  2. Cruzador: 3 quadrados
  3. Navio de guerra: 4 quadrados

startGame() colocará aleatoriamente esses navios no tabuleiro em qualquer direção e retornará um array que representa o posicionamento dos navios.

  • O chamador pode invocar uma função shoot() passando as coordenadas de linha e coluna da célula-alvo no tabuleiro de jogo. shoot() retornará indicadores que representam se o tiro resultou em acerto ou erro, o número de navios restantes (ou seja, ainda não afundados), o array de posicionamento de navios e o array atualizado de acertos e erros.

As células no array de acertos e erros conterão um espaço se ainda não tiverem sido alvos, O se tiverem sido alvos, mas nenhuma parte de um navio estava naquele local, ou X se a célula tiver sido ocupada por parte de um navio.

Camada de apresentação baseada em texto

  • O usuário pode ver o array de acertos e erros exibido como uma representação bidimensional de caracteres do tabuleiro de jogo retornado pela função startGame().
  • O usuário pode ser solicitado a inserir as coordenadas de um quadrado alvo no tabuleiro de jogo.
  • O usuário pode ver uma exibição atualizada do array de acertos e erros depois de dar um tiro.
  • O usuário pode ver uma mensagem após cada disparo, indicando se o disparo resultou em acerto ou erro.
  • O usuário pode ver uma mensagem de parabéns após o tiro que afunda o último navio restante.
  • O usuário pode ser solicitado a jogar novamente no final de cada jogo. A recusa em jogar novamente interrompe o jogo.

Recursos adicionais

BGE

  • O chamador pode especificar o número de linhas e colunas no tabuleiro do jogo como um parâmetro para a função startGame().
  • O chamador pode invocar uma função gameStats() que retorna um objeto Javascript contendo métricas para o jogo atual. Por exemplo, o número de turnos jogados, o número atual de acertos e erros etc.
  • O chamador pode especificar o número de jogadores (1 ou 2) ao chamar startGame(), que gerará um tabuleiro para cada jogador preenchido aleatoriamente com navios.

shoot() aceitará o número do jogador para o qual a jogada está sendo realizada, juntamente com as coordenadas da jogada. Os dados retornados serão para esse jogador.

Camada de apresentação baseada em texto

  • O usuário pode ver as estatísticas atuais do jogo em qualquer ponto inserindo as estatísticas da frase no lugar das coordenadas do alvo. Observe que isso requer a função gameStats() no BGE.
  • O usuário pode especificar que um jogo para dois jogadores deve ser jogado, com cada jogador alternando turnos na mesma sessão de terminal (observe que isso requer os recursos de bônus correspondentes no BGE).
  • O usuário pode ver o número do jogador nos alertas associados às entradas em cada turno.
  • O usuário pode ver o tabuleiro de ambos os jogadores no final de cada turno.

Links e recursos úteis

Exemplo de projetos

Este vídeo do YouTube (em inglês) mostra como é jogado um jogo de batalha naval baseado em texto.

O exemplo a seguir é fornecido como uma demonstração do jogo de batalha naval, caso ele não seja familiar para você. Lembre-se de que você deve implementar uma camada de apresentação baseada em texto para teste. Jogo de Batalha Naval por Chris Brody (em inglês).

12. Aplicação de bate-papo

Nível: 3 - Avançado

Descrição: Interface de bate-papo em tempo real em que vários usuários podem interagir entre si enviando mensagens.

Como MVP (Minimum Viable Product – em português, produto viável mínimo), você pode se concentrar na criação da interface de bate-papo. A funcionalidade em tempo real pode ser adicionada posteriormente (nos recursos adicionais).

Histórias de usuário

  • O usuário é solicitado a inserir um nome de usuário quando visita a aplicação de bate-papo. O nome de usuário será armazenado na aplicação
  • O usuário pode ver um campo de entrada onde pode digitar uma nova mensagem
  • Ao pressionar a tecla Enter ou clicar no botão Enviar, o texto será exibido na caixa de bate-papo ao lado do nome de usuário (por exemplo, Fulano: Olá, mundo!)

Recursos adicionais

  • As mensagens ficarão visíveis para todos os usuários que estiverem na aplicação de bate-papo (usando WebSockets)
  • Quando um novo usuário entra no bate-papo, uma mensagem é exibida para todos os usuários existentes
  • As mensagens são salvas em um banco de dados
  • O usuário pode enviar imagens, vídeos e links que serão exibidos corretamente
  • O usuário pode selecionar e enviar um emoji
  • Os usuários podem conversar em particular
  • Os usuários podem participar de canais sobre tópicos específicos

Exemplo de projeto

13. Linha do tempo do GitHub

Nível: 3 - Avançado

Descrição: As APIs e a representação gráfica de informações são marcas registradas das aplicações modernas da web. O GitHub Timeline combina os dois para criar um histórico visual da atividade de um usuário no GitHub.

O objetivo do GitHub Timeline é aceitar um nome de usuário do GitHub e produzir uma linha do tempo contendo cada repositório, com as anotações dos nomes dos repositórios, a data em que foram criados e suas descrições. A linha do tempo deve ser compartilhada com um possível empregador. Ela deve ser fácil de ler e fazer uso eficaz de cores e tipografia.

Somente os repositórios públicos do GitHub devem ser exibidos.

Histórias de usuário

  • O usuário pode inserir um nome de usuário do GitHub
  • O usuário pode clicar em um botão "Generate" (Gerar) para criar e exibir a linha do tempo do repositório do usuário nomeado
  • O usuário poderá ver uma mensagem de aviso se o nome de usuário do GitHub não for válido.

Recursos adicionais

  • O usuário pode ver um resumo do número de repositórios registrados pelo ano em que foram criados

O GitHub oferece duas APIs que você pode usar para acessar os dados do repositório. Você também pode optar por usar um pacote do NPM para acessar a API do GitHub.

A documentação da API do GitHub pode ser encontrada em:

O código de exemplo que mostra como usar a API do GitHub é:

Você pode usar esse comando CURL para ver o JSON retornado pela API REST V3 para seus repositórios:

curl -u "user-id" https://api.github.com/users/user-id/repos

Exemplos de projetos

14. Soletrar

Nível: 3 - Avançado

Descrição: Saber soletrar é parte fundamental para ser fluente em qualquer idioma. Seja você é uma criança aprendendo a soletrar ou um indivíduo aprendendo um novo idioma, a prática ajuda a solidificar suas habilidades linguísticas.

A aplicação de Soletrar ajuda os usuários a praticar a ortografia reproduzindo a gravação de áudio de uma palavra que o usuário deve soletrar usando o teclado do computador.

Histórias de usuário

  • O usuário pode clicar no botão "Play" (Reproduzir) para ouvir a palavra que deve ser digitada
  • O usuário pode ver as letras exibidas na caixa de texto de entrada de palavras à medida que são inseridas no teclado
  • O usuário pode clicar no botão "Enter" para enviar a palavra que foi digitada na caixa de texto de entrada de palavras
  • O usuário pode ver uma mensagem de confirmação quando a palavra correta é digitada
  • O usuário pode ver uma mensagem solicitando que a palavra seja digitada novamente quando ela for escrita incorretamente
  • O usuário pode ver um registro do número de grafias corretas, o número total de palavras tentadas e uma porcentagem de entradas bem-sucedidas.

Recursos adicionais

  • O usuário pode ouvir um som de confirmação quando a palavra for soletrada corretamente
  • O usuário pode ouvir um som de aviso quando a palavra for escrita incorretamente
  • O usuário pode clicar no botão "Hint" (Dica) para destacar as letras incorretas na caixa de texto de entrada de palavras
  • O usuário pode pressionar a tecla "Enter" no teclado para enviar uma palavra digitada ou clicar no botão "Enter" na janela da aplicação

Links e recursos úteis

Exemplos de projetos

Assistente de palavras para iOS (em inglês)

Falar e soletrar no Google Play (em inglês)

15. Aplicação de pesquisa

Nível: 3 - Avançado

Descrição: As pesquisas são uma parte valiosa da caixa de ferramentas de qualquer desenvolvedor. Elas são úteis para obter feedback dos usuários sobre uma variedade de tópicos, incluindo satisfação com a aplicação, requisitos, necessidades futuras, problemas, prioridades e incômodos simples, por exemplo.

A aplicação de pesquisa dá a você a oportunidade de aprender desenvolvendo uma aplicação com todos os recursos que podem ser adicionados à sua caixa de ferramentas. Ela oferece a capacidade de definir uma pesquisa, permitir que os usuários respondam dentro de um período de tempo predefinido e tabular e apresentar resultados.

Os usuários dessa aplicação são divididos em duas funções distintas, cada uma com requisitos diferentes:

  • Os coordenadores de pesquisa definem e conduzem pesquisas. Essa é uma função administrativa não disponível para usuários normais.
  • Respondentes de pesquisas preenchem pesquisas e visualizam resultados. Eles não têm privilégios administrativos na aplicação.
  • As ferramentas de pesquisa comerciais incluem a funcionalidade de distribuição que envia questionários em massa para os Respondentes da pesquisa. Para simplificar, esta aplicação pressupõe que os questionários abertos para respostas serão acessados a partir da página da web da aplicação

Histórias de usuário

Geral

  • Os coordenadores e respondentes de pesquisas podem definir, conduzir e visualizar pesquisas e resultados de pesquisas em um site comum
  • Os coordenadores de pesquisa podem fazer login na aplicação para acessar funções administrativas, como definir uma pesquisa.

Definição de uma pesquisa

  • O coordenador de pesquisa pode definir uma pesquisa que contenha de 1 a 10 perguntas de múltipla escolha.
  • O coordenador de pesquisa pode definir de 1 a 5 seleções mutuamente exclusivas para cada pergunta.
  • O coordenador de pesquisa pode inserir um título para a pesquisa.
  • O coordenador de pesquisa pode clicar em um botão "Cancelar" para retornar à página inicial sem salvar o questionário.
  • O coordenador do questionário pode clicar em um botão "Salvar" para salvar um questionário.

Realização de uma pesquisa

  • O coordenador de pesquisa pode abrir uma pesquisa selecionando-a em uma lista de pesquisas previamente definidas
  • Os coordenadores de pesquisa podem fechar uma pesquisa selecionando-a em uma lista de pesquisas abertas
  • O respondente da pesquisa pode concluir um questionário selecionando-o em uma lista de questionários abertos
  • O respondente da pesquisa pode selecionar respostas para as perguntas da pesquisa clicando em uma caixa de seleção
  • Os respondentes do questionário podem ver que uma resposta selecionada anteriormente será automaticamente desmarcada se uma resposta diferente for clicada.
  • Os respondentes do questionário podem clicar em um botão "Cancelar" para retornar à página inicial sem enviar a pesquisa.
  • Os respondentes do questionário podem clicar no botão "Enviar" para enviar suas respostas ao questionário.
  • Os respondentes do questionário podem ver uma mensagem de erro se "Enviar" for clicado, mas nem todas as perguntas tiverem sido respondidas.

Visualização dos resultados da pesquisa

  • Os coordenadores e os respondentes de pesquisa podem selecionar a pesquisa a ser exibido em uma lista de questionários fechados
  • Os coordenadores e os respondentes da pesquisa podem visualizar os resultados da pesquisa em formato tabular, mostrando o número de respostas para cada uma das seleções possíveis para as perguntas.

Recursos adicionais

  • Os respondentes da pesquisa podem criar uma conta exclusiva na aplicação
  • Os respondentes da pesquisa podem fazer login na aplicação
  • Os entrevistados não podem responder à mesma pesquisa mais de uma vez
  • Os coordenadores e os respondentes da pesquisa podem visualizar representações gráficas dos resultados da pesquisa (por exemplo, gráficos de pizza, de barras, de colunas etc.)

Bibliotecas para a criação de pesquisas: SurveyJS

Alguns serviços de pesquisa comercial incluem: Survey Monkey e TypeForm

Exemplo de projeto

Contribuição

Fique à vontade para contribuir com o projeto no repositório do GitHub! Qualquer contribuição é muito apreciada.

Você pode contribuir de duas maneiras:

  1. criar uma issue e nos contar sua ideia. Não se esqueça de usar o rótulo New Idea (nova ideia) nesse caso;
  2. fazer o fork do projeto e enviar um PR. Antes de fazer isso, certifique-se de ler e seguir o Guia de Contribuição (você pode encontrá-lo no repositório);

Adicione seus próprios exemplos

Você também pode adicionar seus próprios exemplos aos projetos depois de concluí-los. Eu o encorajo a fazer isso, pois mostrará aos outros as coisas incríveis que você construiu!

Espalhe a palavra!

Se as informações deste artigo e do repositório foram úteis para você de alguma forma, certifique-se de atribuir uma estrela no GitHub. Assim, outras pessoas poderão encontrar o projeto e se beneficiar também! Juntos, podemos crescer e tornar nossa comunidade melhor!

Você tem alguma sugestão sobre como podemos melhorar este projeto em geral? Entre em contato conosco! Gostaríamos muito de ouvir seus comentários!

Principais colaboradores

Florin Pop: Twitter e site.

Jim Medlock: Twitter e Medium

Desafio semanal de programação

Como bônus, há um desafio de programação semanal em que você pode aprender mais praticando suas habilidades em projetos do mundo real. Leia o Guia completo (em inglês) para saber como você pode participar!

Publicado originalmente em www.florin-pop.com (texto original em inglês).