Quer construir algo divertido? Aqui está uma lista de exemplos de ideias de aplicativos da web.

Interessado em aprender JavaScript? Obtenha meu e-book em jshandbook.com

Se você está lendo esta postagem, provavelmente está procurando uma ideia. Você provavelmente deseja construir um aplicativo simples que possa usar em um tutorial ou em seu projeto de exemplo para testar uma nova estrutura ou API. Mas você não consegue encontrar nada que realmente ressoe com você.

Precisa ser simples o suficiente para não tomar todo o seu tempo, mas ao mesmo tempo complexo o suficiente para valer a pena.

“Não quero construir outro aplicativo de tarefas!” Eu ouço você pensando.

Entendi. Escrevi este post para me ajudar e espero que ajude você também.

O que você encontrará abaixo

Algumas das ideias são independentes (não envolvem o uso de uma API externa), enquanto outras fazem uso de APIs públicas famosas, onde você pode facilmente obter dados pré-construídos.

Alguns requerem uma parte do servidor e outros não, o que também pode depender de sua implementação.

Mas tentei ter certeza de que essas ideias são:

  • bom para um tutorial
  • bom para experimentar tecnologias da web
  • não é algo que vai demorar uma semana para descobrir
  • não “ideias de inicialização”
  • direcionado para aplicativos da web
  • fácil de explicar
  • fácil de construir (menos de 24 horas, se preparado)
  • fácil de estender com novos recursos

Então, chega de conversa, aqui está a lista!

Aplicativos simples sem dependências externas

Um aplicativo de monitoramento de peso

  • Ele aceita um conjunto de entradas manuais de medições de peso feitas em datas diferentes
  • Ele pode traçar um gráfico
  • Pode permitir que você acompanhe várias entidades, por exemplo, o peso de mais de uma pessoa
  • Ele armazena os pesos em algum lugar

Um aplicativo de calculadora

  • Uma calculadora padrão: números, +, -, *, / e o resultado

Um banco de dados de livros

  • Insira os livros que você possui
  • Insira os livros que deseja comprar
  • Armazene as informações e imagens do livro

Um aplicativo de receitas

  • Insira um nome e uma descrição com as etapas
  • Tem fotos
  • Tenha alguma classificação para dificuldade e qualidade
  • Adicione o tempo necessário
  • Tenha diferentes etapas com uma imagem para cada
  • Guarde-os em algum lugar

Um rastreador de contas

  • Registrar contas, valores e datas
  • Lista de contas
  • Tenha alguns gráficos (este ano / ano passado)
  • Guarde-os em algum lugar

Um rastreador de despesas

  • Registre as despesas e marque-as (ou tenha categorias)
  • Liste despesas
  • Tenha alguns gráficos (mês passado / ano passado)
  • Guarde-os em algum lugar

Um aplicativo de chat

  • Algum tipo de Slack simplificado
  • As pessoas entram sem autenticação e recebem um nome, armazenado para quando voltam
  • Armazene a história
  • Adicionar notificações

Um aplicativo de notas

  • Adicionar uma nova nota
  • Liste todas as suas notas na barra lateral
  • Guarde-os em algum lugar

Um aplicativo de diário pessoal

  • Adicionar entradas com data e texto
  • Mostrar mais recentes primeiro
  • Anexar fotos
  • Guarde-os em algum lugar

Um app pomodoro

  • Insira um horário
  • Iniciar cronômetro
  • Alerta quando o tempo acabar

Um gerador de meme

  • Tenha 10 imagens de meme populares
  • Deixe o usuário adicionar o texto
  • O resultado é imagem + texto
  • Armazene a história

Jogo da velha

Todos nós sabemos o que é um jogo da velha?

O jogo da vida

Um ótimo projeto envolvendo matemática e gráficos.

Um motor de blog

  • Permitir que o usuário faça login e adicione postagens
  • Os visitantes podem adicionar comentários
  • Armazene os dados em algum lugar

Um mecanismo de controle de qualidade

  • Permitir que o usuário faça login
  • Adicionar perguntas
  • Responder a perguntas
  • Permitir que o usuário original escolha a melhor pergunta
  • Armazene os dados em algum lugar

Um mecanismo de fórum

  • Permitir que o usuário faça login
  • Adicionar postagens
  • Comentário em postagens
  • Armazene os dados em algum lugar

Um chat ao vivo incorporável

Pense no Intercom ou no Olark.

  • Tenha um “back-end” onde você responde
  • Incorporar em uma página da web
  • Deixe as pessoas escreverem para você em particular

Aplicativos baseados em API

Um cliente Hacker News

  • Liste as postagens populares
  • Mostrar os comentários de uma postagem
  • Mostrar o perfil de um usuário
  • Pesquisar HN

Confira HNPWA e Awesome Hacker News para se inspirar.

Um cliente Reddit

  • Liste as postagens populares
  • Liste os comentários de uma postagem
  • Mostrar o perfil de um usuário

Um cliente Instagram

  • Insira uma hashtag e obtenha as últimas postagens
  • Digite um nome de usuário e obtenha as últimas postagens
  • Permitir armazenar uma ou mais hashtags / nomes de usuário e obter todas as postagens mais recentes desses

Um cliente de API GitHub

  • Liste os repositórios populares de hoje / semana / mês
  • Liste os últimos commits em um repositório
  • Mostrar repositórios públicos de uma pessoa ou organização classificados por estrelas

Um cliente da API Unsplash

  • Pesquisar imagens por tópico
  • Deixe o usuário inserir um termo, mostrar imagens relevantes

Comece na API Unsplash para se inspirar.

Dados para seus aplicativos de amostra

Às vezes, você começa a construir algum aplicativo simples, mas fica entediado com os dados que descobriu e que pode usar. Você não precisa ficar entediado! Você pode usar dados reais ou dados aleatórios.

APIs públicas que você pode usar em projetos de exemplo

Talvez você tenha uma ideia para um aplicativo CRUD perfeitamente bom ou algo que funcione com uma API, mas não deseja criar a API em primeiro lugar.

Recomendo que você dê uma olhada no Airtable, que fornece uma ótima API para desenvolvedores. É muito fácil de usar, como um banco de dados.

Aqui estão algumas APIs públicas incríveis que você pode usar:

  • A API Cat
  • API Dog
  • API Chuck Norris
  • F ** k Off como API de serviço
  • API de cotações
  • API de cotações
  • API Dad Jokes
  • A API Spotify
  • API do New York Times
  • A API Wikipedia
  • A API Wikidata
  • A API Medium
  • API Design Quotes
  • A API GoodReads
  • A API Dribbble
  • A API 500px
  • A API Unsplash
  • A API Giphy - GIFs!
  • A API Pixabay
  • Taxas de câmbio
  • API de capturas de tela do site
  • The Oxford Dictionary API
  • API de tecnologias de site
  • A API Mapbox
  • API de letras de música por Genius
  • API de meta tags do site
  • A API EventBrite
  • Logs de mudanças de projetos de código aberto
  • A API REST do GitHub
  • A API GitHub GraphQL
  • API de códigos QR
  • API StackExchange
  • Palavras e sinônimos
  • A API Nasa
  • A API SpaceX
  • A Hacker News API
  • A API do Instagram
  • A API Reddit
  • A API Slack
  • A API do Twitter
  • A API do YouTube

Marcadores de posição de imagem para seus projetos de amostra

  • Placeholder.com
  • Placekitten

Geradores de imagem

Avatares:

  • RoboHash
  • Avatares adoráveis
  • Avatares DiceBear (pixel art)
  • Lorem Picsum

Gerador de texto de amostra para seus projetos de amostra

Lorem Ipsum é chato. Spice it up!

Se você insiste em usar Lorem Ipsum, Loripsum é um bom gerador.

Outros dados falsos

O FakeJSON tem muitos recursos de geração de dados falsos.

JSONPlaceholder tem postagens, comentários, fotos, todos, usuários e álbuns falsos, todos prontos para consumo REST.

Precisa de geração de nome falso / dados do usuário? Verifique os nomes da IU e o RandomUser.

Empacotando

Espero que esta lista seja abrangente o suficiente para atender às suas necessidades!

Diverta-se!

Interessado em aprender JavaScript? Obtenha meu e-book em jshandbook.com