Vil du bygge noget sjovt? Her er en liste over eksempler på webappideer.

Er du interesseret i at lære JavaScript? Hent min e-bog på jshandbook.com

Hvis du læser dette indlæg, leder du sandsynligvis efter en idé. Du vil sandsynligvis bygge en simpel app, som du kan bruge i en tutorial eller i dit eksempelprojekt til at teste en ny ramme eller API. Men du kan ikke finde noget, der virkelig resonerer med dig.

Det skal være simpelt nok til ikke at tage hele din tid op, men på samme tid kompleks nok til at være værd at gøre.

"Jeg vil ikke oprette en anden opgaveapp!" Jeg hører dig tænke.

Jeg forstår det. Jeg skrev dette indlæg for at hjælpe mig selv, og jeg håber, det også hjælper dig.

Hvad du finder nedenfor

Nogle af ideerne er selvstændige (ikke involverende brugen af ​​en ekstern API), mens nogle gør brug af berømte offentlige API'er, hvor du nemt kan få fat i forudbyggede data.

Nogle kræver en serverdel, og andre ikke, hvilket muligvis også afhænger af din implementering.

Men jeg forsøgte at sikre mig, at disse ideer er:

  • godt til en tutorial
  • godt at eksperimentere med webteknologier
  • ikke noget, der vil tage en uge at finde ud af
  • ikke "startideer"
  • målrettet mod webapps
  • let at forklare
  • let at bygge (mindre end 24 timer, hvis forberedt)
  • let at udvide med nye funktioner

Så nok snak, her er listen!

Enkle apps uden eksterne afhængigheder

En vægt tracker app

  • Den accepterer et sæt manuelle indtastninger af vægtmålinger taget på forskellige datoer
  • Det kan plotte en graf
  • Det kan give dig mulighed for at spore flere enheder, for eksempel mere end en persons vægt
  • Det gemmer vægtene et eller andet sted

En lommeregner-app

  • En standardberegner: tal, +, -, *, / og resultatet

En bogdatabase

  • Indtast de bøger, du ejer
  • Indtast de bøger, du gerne vil købe
  • Gem bogen info og billeder

En opskrift-app

  • Indtast et navn og en beskrivelse med trinnene
  • Har billeder
  • Har nogle rangordninger for vanskeligheder og kvalitet
  • Tilføj den nødvendige tid
  • Har forskellige trin med et billede til hver
  • Opbevar dem et eller andet sted

En regningssporing

  • Log regninger, beløb og datoer
  • Liste regninger
  • Har et par grafer (i år / sidste år)
  • Opbevar dem et eller andet sted

En udgiftssporing

  • Log udgifter og tag dem (eller få kategorier)
  • Liste udgifter
  • Har et par grafer (sidste måned / sidste år)
  • Opbevar dem et eller andet sted

En chatapplikation

  • En slags afskåret slap
  • Folk kommer ind uden godkendelse og tildeles et navn, der er gemt til når de kommer tilbage
  • Gem historikken
  • Tilføj underretninger

En notat-app

  • Tilføj en ny note
  • Skriv alle dine noter i sidepanelet
  • Opbevar dem et eller andet sted

En personlig dagbog-app

  • Tilføj poster med en dato og en tekst
  • Vis nyere først
  • Vedhæft billeder
  • Opbevar dem et eller andet sted

En pomodoro-app

  • Indtast et tidspunkt
  • Start timer
  • Alert, når tiden er forbi

En meme generator

  • Har 10 populære meme-billeder
  • Lad brugeren tilføje teksten
  • Resultatet er billede + tekst
  • Gem historikken

Tic-tac-toe spil

Vi ved alle, hvad et tic-tac-toe-spil er?

Livets spil

Et godt projekt med matematik og grafik.

En blogmotor

  • Tillad bruger at logge ind og tilføje indlæg
  • Besøgende kan tilføje kommentarer
  • Gem dataene et eller andet sted

En QA-motor

  • Tillad bruger at logge ind
  • Tilføj spørgsmål
  • Svar på spørgsmål
  • Tillad den oprindelige bruger at vælge det bedste spørgsmål
  • Gem dataene et eller andet sted

En forummotor

  • Tillad bruger at logge ind
  • Tilføj indlæg
  • Kommenter indlæg
  • Gem dataene et eller andet sted

En indlejret live chat

Tænk Intercom eller Olark.

  • Har en "backend", hvor du reagerer
  • Integrer på en webside
  • Lad folk skrive til dig privat

API-drevne apps

En Hacker News-klient

  • Liste over de populære indlæg
  • Vis kommentarer fra et indlæg
  • Vis en brugers profil
  • Søg efter HN

Tjek HNPWA og Awesome Hacker News for inspiration.

En Reddit-klient

  • Liste over de populære indlæg
  • Liste kommentarerne til et indlæg
  • Vis en brugers profil

En Instagram-klient

  • Indtast et hashtag, og få de seneste indlæg
  • Indtast et brugernavn, og få de seneste indlæg
  • Tillad at gemme et eller flere hashtags / brugernavne og få alle de nyeste indlæg fra dem

En GitHub API-klient

  • Liste over de populære arkiver fra i dag / uge / måned
  • Liste over de seneste forpligtelser i et arkiv
  • Vis en person eller organisation offentlige arkiver sorteret efter stjerner

En Unsplash API-klient

  • Søg efter billeder efter emne
  • Lad brugeren indtaste et udtryk, vise relevante billeder

Start ved Unsplash API for inspiration.

Data til dine eksempler på apps

Nogle gange begynder du at bygge en simpel app, men du keder dig med de data, du har fundet, at du kan bruge. Du behøver ikke kede dig! Du kan bruge rigtige data eller tilfældige data.

Offentlige API'er, du kan bruge i eksempelprojekter

Måske har du en idé til en perfekt flot CRUD-app eller noget, der fungerer med en API, men du vil ikke oprette API'et i første omgang.

Jeg anbefaler, at du tjekker Airtable, som giver en god API til udviklere. Det er meget let at bruge, som en database.

Her er nogle fantastiske offentlige API'er, du kan bruge:

  • Cat API
  • Hundens API
  • Chuck Norris API
  • F ** k Fra som en service-API
  • Citater API
  • Citater API
  • Dad Jokes API
  • Spotify API
  • New York Times API
  • Wikipedia API
  • Wikidata API
  • Medium API
  • Design Quotes API
  • GoodReads API
  • Dribbble API
  • API til 500 pixel
  • Unsplash API
  • Giphy API - GIF'er!
  • Pixabay API
  • Valutakurser
  • API til webstedsskærmbilleder
  • Oxford Dictionary API
  • Website Technologies API
  • Mapbox API
  • Music Lyrics API af Genius
  • Site meta tags API
  • EventBrite API
  • Open source projekter changelogs
  • GitHub REST API
  • GitHub GraphQL API
  • QR-koder API
  • StackExchange API
  • Ord og synonymer
  • Nasa API
  • SpaceX API
  • Hacker News API
  • Instagram API
  • Reddit API
  • Slack API
  • Twitter API
  • YouTube API

Billede pladsholdere til dine prøveprojekter

  • Placeholder.com
  • Placekitten

Billedgeneratorer

Avatarer:

  • RoboHash
  • Yndige avatarer
  • DiceBear-avatarer (pixelkunst)
  • Lorem Picsum

Eksempel tekstgenerator til dine prøveprojekter

Lorem Ipsum er kedelig. Spice det op!

Hvis du insisterer på at bruge Lorem Ipsum, er Loripsum en god generator.

Andre falske data

FakeJSON har masser af falske datagenereringsfunktioner.

JSONPlaceholder har falske indlæg, kommentarer, fotos, todos, brugere og album, alt klar til REST-forbrug.

Har du brug for generering af falske navn / brugerdata? Tjek brugergrænsefladenavne og tilfældig bruger.

Afslutter

Jeg håber, at denne liste er omfattende nok til at passe til dine behov!

Hav det sjovt!

Er du interesseret i at lære JavaScript? Hent min e-bog på jshandbook.com