¿Quieres construir algo divertido? Aquí hay una lista de ejemplos de ideas de aplicaciones web.

¿Interesado en aprender JavaScript? Obtenga mi libro electrónico en jshandbook.com

Si estás leyendo esta publicación, probablemente estés buscando una idea. Es probable que desee crear una aplicación simple que pueda usar en un tutorial o en su proyecto de ejemplo para probar un nuevo marco o API. Pero no puedes encontrar nada que realmente te suene.

Debe ser lo suficientemente simple como para no ocupar todo su tiempo, pero al mismo tiempo lo suficientemente complejo como para que valga la pena hacerlo.

"¡No quiero crear otra aplicación de tareas pendientes!" Te escucho pensar.

Lo entiendo. Escribí esta publicación para ayudarme a mí mismo, y espero que también te ayude a ti.

Lo que encontrarás a continuación

Algunas de las ideas son autónomas (no implican el uso de una API externa), mientras que otras hacen uso de API públicas famosas donde puede obtener fácilmente datos preconstruidos.

Algunos requieren una parte de servidor y otros no, lo que también puede depender de su implementación.

Pero traté de asegurarme de que estas ideas sean:

  • bueno para un tutorial
  • bueno experimentar con tecnologías web
  • no es algo que llevará una semana averiguar
  • no "ideas de inicio"
  • dirigido a aplicaciones web
  • fácil de explicar
  • fácil de construir (menos de 24 horas, si está preparado)
  • fácil de ampliar con nuevas funciones

Entonces, basta de hablar, ¡aquí está la lista!

Aplicaciones simples sin dependencias externas

Una aplicación de seguimiento de peso

  • Acepta un conjunto de entradas manuales de medidas de peso tomadas en diferentes fechas.
  • Puede trazar un gráfico
  • Puede permitirle rastrear múltiples entidades, por ejemplo, el peso de más de una persona
  • Almacena los pesos en algún lugar

Una aplicación de calculadora

  • Una calculadora estándar: números, +, -, *, / y el resultado

Una base de datos de libros

  • Ingrese los libros que posee
  • Ingrese los libros que le gustaría comprar
  • Almacene la información y las imágenes del libro

Una aplicación de recetas

  • Ingrese un nombre y una descripción con los pasos
  • Tener fotos
  • Tener algún ranking de dificultad y calidad.
  • Agrega el tiempo necesario
  • Tenga diferentes pasos con una imagen para cada
  • Guárdalos en algún lugar

Un rastreador de facturas

  • Registrar facturas, montos y fechas
  • Lista de facturas
  • Tenga algunos gráficos (este año / año pasado)
  • Guárdalos en algún lugar

Un rastreador de gastos

  • Registre los gastos y etiquételos (o tenga categorías)
  • Lista de gastos
  • Tener algunos gráficos (el mes pasado / el año pasado)
  • Guárdalos en algún lugar

Una aplicación de chat

  • Una especie de holgura simplificada
  • Las personas ingresan sin autenticación y se les asigna un nombre, que se almacena para cuando regresen.
  • Almacenar la historia
  • Agregar notificaciones

Una aplicación de notas

  • Agregar una nota nueva
  • Enumere todas sus notas en la barra lateral
  • Guárdalos en algún lugar

Una aplicación de diario personal

  • Agregar entradas con fecha y texto
  • Mostrar más recientes primero
  • Adjuntar fotos
  • Guárdalos en algún lugar

Una aplicación pomodoro

  • Ingrese una hora
  • Iniciar temporizador
  • Alerta cuando se acabe el tiempo

Un generador de memes

  • Ten 10 imágenes populares de memes
  • Deja que el usuario agregue el texto
  • El resultado es imagen + texto
  • Almacenar la historia

Juego de tic-tac-toe

¿Todos sabemos lo que es un juego de tic-tac-toe?

El juego de la vida

Un gran proyecto que involucra matemáticas y gráficos.

Un motor de blogs

  • Permitir al usuario iniciar sesión y agregar publicaciones
  • Los visitantes pueden agregar comentarios
  • Almacene los datos en algún lugar

Un motor de control de calidad

  • Permitir que el usuario inicie sesión
  • Agregar preguntas
  • Respuesta a preguntas
  • Permitir que el usuario original elija la mejor pregunta
  • Almacene los datos en algún lugar

Un motor de foros

  • Permitir que el usuario inicie sesión
  • Agregar publicaciones
  • Comentar publicaciones
  • Almacene los datos en algún lugar

Un chat en vivo integrable

Piense en Intercom u Olark.

  • Tener un "backend" en el que responda
  • Insertar en una página web
  • Deja que la gente te escriba en privado

Aplicaciones impulsadas por API

Un cliente de Hacker News

  • Lista de publicaciones populares
  • Mostrar los comentarios de una publicación
  • Mostrar el perfil de un usuario
  • Buscar HN

Consulte HNPWA y Awesome Hacker News para obtener inspiración.

Un cliente de Reddit

  • Lista de publicaciones populares
  • Enumere los comentarios de una publicación
  • Mostrar el perfil de un usuario

Un cliente de Instagram

  • Ingrese un hashtag y obtenga las últimas publicaciones
  • Ingrese un nombre de usuario y obtenga las últimas publicaciones
  • Permitir almacenar uno o más hashtags / nombres de usuario y obtener las últimas publicaciones de esos

Un cliente API de GitHub

  • Enumere los repositorios populares de hoy / semana / mes
  • Enumere las últimas confirmaciones en un repositorio
  • Mostrar repositorios públicos de una persona u organización clasificados por estrellas

Un cliente de la API Unsplash

  • Buscar imágenes por tema
  • Permita que el usuario ingrese un término, muestre imágenes relevantes

Comience en Unsplash API para inspirarse.

Datos para sus aplicaciones de muestra

A veces empiezas a crear una aplicación sencilla, pero te aburren los datos que has encontrado y que puedes usar. ¡No tienes que aburrirte! Puede utilizar datos reales o datos aleatorios.

API públicas que puede usar en proyectos de ejemplo

Tal vez tenga una idea para una aplicación CRUD perfectamente agradable, o algo que funcione con una API, pero no desea crear la API en primer lugar.

Te recomiendo que consultes Airtable, que proporciona una gran API para desarrolladores. Es muy fácil de usar, como una base de datos.

Aquí hay algunas API públicas increíbles que puede usar:

  • La API Cat
  • La API del perro
  • La API de Chuck Norris
  • F ** k Off As A Service API
  • API de cotizaciones
  • API de cotizaciones
  • API de Dad Jokes
  • La API de Spotify
  • API del New York Times
  • La API de Wikipedia
  • La API de Wikidata
  • La API mediana
  • API de cotizaciones de diseño
  • La API GoodReads
  • La API Dribbble
  • La API de 500px
  • La API Unsplash
  • La API de Giphy: ¡GIF!
  • La API de Pixabay
  • Los tipos de cambio
  • API de capturas de pantalla del sitio
  • La API del diccionario de Oxford
  • API de tecnologías de sitios web
  • La API Mapbox
  • API de letras de música de Genius
  • API de metaetiquetas del sitio
  • La API de EventBrite
  • Registros de cambios de proyectos de código abierto
  • La API REST de GitHub
  • La API GraphQL de GitHub
  • API de códigos QR
  • La API de StackExchange
  • Palabras y sinónimos
  • La API de la Nasa
  • La API de SpaceX
  • La API de Hacker News
  • La API de Instagram
  • La API de Reddit
  • La API de Slack
  • La API de Twitter
  • La API de YouTube

Marcadores de posición de imagen para sus proyectos de muestra

  • Placeholder.com
  • Placekitten

Generadores de imágenes

Avatares:

  • RoboHash
  • Avatares adorables
  • Avatares de DiceBear (pixel art)
  • Lorem Picsum

Generador de texto de muestra para sus proyectos de muestra

Lorem Ipsum es aburrido. ¡Condiméntalo!

Si insiste en usar Lorem Ipsum, Loripsum es un buen generador.

Otros datos falsos

FakeJSON tiene toneladas de capacidades de generación de datos falsos.

JSONPlaceholder tiene publicaciones, comentarios, fotos, tareas, usuarios y álbumes falsos, todos listos para el consumo de REST.

¿Necesita generación de datos de usuario / nombre falso? Compruebe los nombres de la interfaz de usuario y RandomUser.

Terminando

¡Espero que esta lista sea lo suficientemente completa para satisfacer sus necesidades!

¡Que te diviertas!

¿Interesado en aprender JavaScript? Obtenga mi libro electrónico en jshandbook.com