Vil du bygge noget sjovt? Her er en liste over eksempler på webappideer.
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