6 absurde ideer til opbygning af din første webapp

Brug for et par ideer til opbygning af en simpel webapp? Disse 6 eksempler hjælper dig med at øve alle nøgleevnerne og have det sjovt at gøre det!

Okay, du har allerede lært front-end webudvikling, og nu ønsker du at bøje dine udviklermuskler til den næste store udfordring: full-stack webapps. Du har sandsynligvis mange ambitiøse projektideer, der ruller rundt i dit hoved. Men hvordan kan du bestemme, hvilke der er rimelige med dit nuværende sæt?

Her er 6 usædvanlige ideer til din første webapp, som hjælper dig med at få erfaring med alle de grundlæggende begreber i full-stack webudvikling. I slutningen vil du have et særpræget projekt, som du kan medtage i din portefølje. Det hjælper dig med at skille dig ud i forhold til alle de kedelige projekter, som alle andre bygger.

Bemærk: hvis du stadig lærer HTML / CSS / JS, sammensatte jeg 8 ideer til kun at øve front-end.

1. FastFood Guru

Idéen: Yelp er en ret populær kilde til restaurantanmeldelser. Imidlertid bruger de fleste det til at lære om restauranter, de aldrig har hørt om før. Hvad med massive fastfoodkæder som McDonalds og Burger King? Masser af mennesker går til disse, men på en eller anden måde er de ikke en populær anmeldelseskandidat.

Ja, du fortæller mig måske, at hver menu er stort set den samme, og maden smager altid også den samme. Men hvis du besøgte mange af disse "kæde" restauranter, ved du, at der er et par ting, der adskiller sig vildt.

Hvilken har det mest luksuriøse badeværelse? Hvilke markerer deres menupriser? Hvilke har sjove beruselser klokken 1 om morgenen? Dette ville være et gennemgangsside for de fastfoodkæder, der angiveligt er konsistente.

Type websted: anmeldelser

Nøglefunktioner:

  • Evne til at oprette en konto med et billede, brugernavn og placering
  • Brug Google Maps til at lade en bruger vælge en bestemt restaurant, enten ved at søge på en placering på kortet eller ved at indtaste et navn og vælge fra en liste (typeahead)
  • Tillad brugeren at skrive en anmeldelse
  • Tillad brugeren at bedømme følgende fastfoodspecifikke emner på skalaen 1–5: Badeværelseskvalitet, personale, renlighed, kørsel gennem sassy niveau, leveringshastighed
  • Evne til at tilføje billeder til anmeldelsen
  • Responsivt design ned til mobil

Nøglefunktionsbeslutninger:

  • Er dette et seriøst websted, eller handler det virkelig om de sjove ting, der kan ske på en fastfood-joint?
  • Hvem bruger dette websted? Folk på roadtrips, der prøver at vælge et sted til frokost? Hyppige fastfood-besøgende, der ønsker at dele deres oplevelser?
  • Bør dette være et samfund, hvor folk ofte tjekker siden for sjove historier og deltager? Eller mere engangs, sjælden brug?
  • Hvilken integration på sociale medier kan hjælpe med at sprede historier / anmeldelser?

Hvad du lærer: Brugersystemer og billedlagring er to store udfordringer. Dette vil være en god chance for at implementere en grundlæggende version af hver. Hvis du vælger at gøre dette til et humororienteret sted, hvordan kan dit design også påvirke et passende niveau af humor, der ikke er ubehagelig? Hvis du ønsker at få en følge, vil dette være en god test for at se, hvor du muligvis kan hente aktuelle fastfood-anmeldelser for at frø din database og skabe øjeblikkeligt indhold.

2. GrillBer

Idéen: Ja, du gættede det. Uber til grill. Hvis du bor i en by, har du muligvis ikke plads til en grill eller et sikkert sted at låse den op. For eksempel, hvis du bor på 20. etage i en lejlighedskompleks, hvor kan du placere din grill?

Problem løst med GrillBer, en leveringsservice til grilludlejning. Dette giver kunderne mulighed for at lave en cookout uden logistik. Faktisk vil du måske medtage en turf med stole, så dine kunder kan oprette en pop-up park på en parkeringsplads!

Webstedstype: Levering / logistik

Nøglefunktioner:

  • Formular, der giver brugeren mulighed for at booke en grill i et bestemt antal timer med en bestemt timepris, og gemmer den i en database. Brugeren skal indtaste deres navn, adresse osv.
  • Kalender, der viser forskellige tidspunkter, hvor grill er tilgængelige. Tjek Zipcar for et eksempel på dette.
  • Produktdetaljer-side, der viser grillen og fortæller dig mere om de forskellige tilføjelser, som stole og græs.
  • Integration af sociale medier med Instagram, der viser alle de fantastiske cookouts, folk har holdt med GrillBer.
  • En kasseproces og betalingssystem med Stripe, så brugerne kan gennemføre processen.

Nøglefunktionsbeslutninger:

  • Dette behøver ikke at være visuelt stimulerende som Uber. Men har det brug for en cool interaktiv kalender? Eller kan du slippe af sted med en grundlæggende form som et e-handelswebsted?
  • Hvor mange smerter i grillprocessen vil du tilbyde at tackle? Forventer du, at brugeren skal rense grillen? Er det de billigere, men langsommere kulgriller eller dyrere gasgrill?
  • Cookouts er beregnet til at være en oplevelse med lav stress. Hvis folk skal skynde sig at tilberede deres mad, vil det ikke være en stor oplevelse. Hvordan kan du bruge kopi og mikroskopi til klart at angive, hvordan dette ikke vil være en stressende proces?
  • Hvilken logik skal du have i din back-end for reservationssystemet? Har du brug for at give en halv time før og efter til grilllevering?

Hvad du lærer: Sådan koordineres front-end og back-end af et reservationssystem. Tænk på, hvor mange steder der gør dette. Restaurantreservationssider. Websteder til booking af konferencelokaler. Der er mange flere. Dette er et meget almindeligt mønster og en stor bedrift at have på dit CV til diskussion.

3. NetworkTap

Idéen: Sociale medier er en stadig mere populær reklamestrategi. Virksomheder bruger Twitter, Facebook, LinkedIn og Pinterest til at nå ud til kunder midt i browsing. Der er dog en uudnyttet plads: brugerens faktiske indlæg.

Annoncører elsker mund-til-mund-markedsføring, og at have brugere til at poste de faktiske annoncer selv ville være en fantastisk måde at forvirre andre i deres nyhedsfeed!

Dette websted giver brugere, der ønsker at tjene lidt ekstra penge, til at frivillige oplysninger om sig selv, og annoncører kan kort kapre et indlæg med en annonce. Brugere får betaling pr. Visning eller en anden metode. Nu kan annoncer nå øjenkugler på nye og innovative måder!

Type websted: Markedsplads

Nøglefunktioner:

  • Individuelle brugere skal være i stand til at oprette en konto med info som: placering, alder, interesser og familiestatus, så annoncører kan vælge, hvem de vil sende om deres produkt
  • Annoncører skal være i stand til at oprette en konto og skrive et indlæg om deres brandidentitet, og hvem de ønsker at nå ud til.
  • Hver bruger skal være i stand til at nå ud til en annoncør for at tale om deres interesse i at lave et indlæg.
  • Hver annoncør skal være i stand til at søge i alle brugere efter kriterier som alder, køn osv. Og sende en massemeddelelse til deres valgte demografiske interesse om at lave en annonce.
  • Brugere og annoncører skal være enige om en betalingsmetode: pay-per-like, pay-per-view, pay-per-click eller andet.

Nøglefunktionsbeslutninger:

  • Søgefunktionalitet vil være en stor ting for annoncørerne. Hvordan repræsenterer du hvert søgeresultat? Måske bruge datavisualisering som Google Analytics.
  • Hvordan kan du få mest mulig ud af brugerne? Integrering med en social mediekonto? Måske betale dem mere baseret på hvor meget information de tilbyder?
  • Hvilken strømdynamik er der mellem annoncører og brugere? Får brugerne input til annonceteksten og billedet? Eller træffer annoncører alle beslutninger om, hvad der vises?
  • Folk vil ikke have $ 10 om ugen ud af dette. De vil sandsynligvis have mere som $ 100 som minimum. Hvordan kan du afveje dette med antallet af annoncer, som de sandsynligvis skal vise for at komme derhen? Ingen ønsker at forurene deres nyhedsfeed fuldstændigt.
  • Hvor snedig vil du have, at annoncerne skal være? Skal det være indlysende, eller skal det føles mere som et autentisk indlæg?

Hvad du lærer: Markedspladser er en anden meget populær type websted. Denne giver dig mulighed for at oprette to typer konti, hvilket er en fælles struktur. Beskeder på et websted vil være en god færdighed at lære med denne. Tjek Fiverr for et eksempel.

4. Reparer mit skib

Idéen: Dette er en forkortelse for "Reparer mit forhold". Det er et forum, hvor brugere kan skrive om deres forholdsproblemer, og andre kan ringe ind med råd om, hvordan man løser deres problemer.

Hvis du har oplevet de fine samfund på websteder som 4chan, Reddit eller Bodybuilding.com, så ved du, at der er masser af mennesker, der er villige til at donere et par minutters tid til at hjælpe.

Type websted: Forum

Nøglefunktioner:

  • Et indlæg / kommentarsystem svarende til Reddit eller Quora.
  • Et opvote-system til både indlæg og kommentarer
  • En mulighed for brugeren at poste, hvad de faktisk prøvede med deres vigtige anden, og hvilke resultater der fulgte
  • Et badges eller karma-system til belønning af ofte opstemte brugere
  • Et brugerkontosystem til dem, der ønsker at kommentere eller skrive, svarende til Reddit

Nøglefunktionsbeslutninger:

  • Bør dette være mere anonymiseret som Reddit eller bundet til en social mediekonto som Quora for troværdighed?
  • Der vil være masser af trolde på dette sted. Hvordan håndterer du det?
  • Bør dette strengt vedrøre romantiske forhold? Eller også venskaber?
  • Hvordan kan du bruge badgesystemet til at motivere især gode kommentatorer til at vende tilbage?

Hvad du lærer: Hvordan man opbygger et forum! Der er også masser af mennesker derude, der er villige til at donere et par minutter af deres tid til at hjælpe internetfremmede i nød. Helt seriøst. Din største udfordring er at sikre, at disse hjælpsomme brugere føler sig belønnet for deres indsats, fordi det vil motivere dem til at komme tilbage.

5. CatBattles

Idéen: Kattevideoer er ... utroligt populære. En særlig særpræget form for kattevideo er amatørkampen, hvor to katte hertug ud med minimale konsekvenser, men masser af meow og brydning.

Dette websted giver brugerne mulighed for at sende videoer af deres katte, der kæmper, og give seerne mulighed for at komme med sjove kommentarer. Dette websted tillader IKKE professionelle kattekampe eller kampe med grusomme ender. Det er strengt taget til afslappet underholdning, ikke overtrædelser af dyrerettigheder.

Type af websted: Videoindhold

Nøglefunktioner:

  • Alle kan uploade en katvideo
  • Brugere kan oprette en anonym konto og tilføje kommentarer.
  • Et screenshot af hver kat, som brugeren klikker på for at gætte sejren, før kampen starter
  • Opvoter til de bedste videoer og de bedste kommentarer
  • Evnen til at rapportere ondsindede videoer eller videoer, der ser ud til at være iscenesat

Nøglefunktionsbeslutninger:

  • Hvorfor ville nogen sende deres kattekampvideo her i stedet for Reddit eller YouTube? Du skal tilføje et par funktioner for at skelne det fra disse websteder.
  • Hvordan kan du gøre dette sted populært inden for katteelskere? Katteelskere nyder ikke vold, men de nyder kattehumor.
  • Skal dette websted duplikere dynamikken i Hot or Not? Hvordan kan du skabe en unik oplevelse for seeren, der går ud over YouTube? Måske et play-by-play af kampen, der bliver optaget, når brugerne poster?

Hvad du lærer: At gemme videoer i en database er en god færdighed at lære. Replikering af YouTubes dynamik vil også være god praksis, som andre klart vil forstå. At få tonen i humor lige på siden ville også være en god udfordring.

6. Kuponbank

Idéen: Der er masser af sider derude, der giver folk mulighed for at udveksle kuponer på en-til-en-basis. Men hvad med den “lange hale” af kuponer? Med andre ord sjældne eller uklare kuponer, der muligvis ikke er populære på et mere almindeligt kuponwebsted. Og hvad hvis den anden person ikke har en kupon, du ønsker? Kuponer er alligevel dybest set penge.

Du har brug for en bank til at håndtere denne uoverensstemmelse på markedet. Denne bank ville bede om et indledende depositum på $ 20, lad os sige. Derefter debiteres hver kupon, du beder om, fra din konto. Enhver kupon, som du med succes kan give væk, krediteres.

Type websted: Peer to Peer-udlån

Nøglefunktioner:

  • Brugere skal være i stand til at oprette en konto og derefter indbetale $ 20 i spærring, som kan tages ud når som helst. Dette er sikkerhed. Du kan bruge Stripe til at behandle denne transaktion.
  • Brugere kan uploade et foto af en kupon. Siden skal derefter automatisk bestemme produktet og kuponens størrelse. Det skal bede brugeren, hvis den ikke kan finde ud af det. Googles Cloud Vision API skal hjælpe med dette.
  • Når en bruger anmoder om en kupon, skal den originale plakat sende den til dem. Kuponbeløbet krediteres originalplakatens konto og debiteres fra rekvirentens konto.
  • Når en persons konto rammer $ 0, kan de ikke anmode om flere kuponer, før de selv handler nogle eller tilføjer flere penge.
  • Webstedet genererer indtægter ved at tage en lille procentdel af hver transaktion.

Nøglefunktionsbeslutninger:

  • Hvordan kan du gøre dette så let som muligt at uploade et stort antal kuponer? Cloud Vision API ville være en stor ting for dette.
  • Hvordan kan du gøre dette så let som muligt for folk at sende kuponer? Brugeren ville være udmattet, hvis han / hun har brug for at sende mange kuponer via mail.
  • Hvordan kan du gøre søgningsprocessen så let som muligt? Hvad hvis nogen kunne uploade en kvittering, og du kan kontrollere, om der er nogen kuponer til rådighed for varerne på listen?

Hvad du vil lære: Denne indeholder et par nøglebegreber fra peer to peer-udlån, omend med en meget lavere risikoprofil. Dette er en stor test af din opmærksomhed på brugeroplevelse. Der er millioner af mennesker overalt i USA, der har tid til overs, og leder efter en nem måde at tjene et par ekstra penge på. Hvordan kan du gøre dit websted til en fremragende mulighed for dette?

Bliv kreativ

Føler dig ikke forpligtet til at bygge de samme projekter som alle andre. Det er ekstremt svært at få en konkurrencemæssig fordel på resten af ​​markedet, når du efterligner.

Selvom et af disse forslag ikke hjælper dig, bør du overveje at opbygge projekter, der kan skabe en lille personlighed og adskille dig fra alle de andre.

Som Seth Godin siger, ”På en overfyldt markedsplads er det en fiasko at passe ind. På en travl markedsplads er det ikke at skille sig ud det samme som at være usynlig. ”

Nød du dette? Giv det en lignende og lad mig det vide i kommentarerne!

Også, hvis du leder efter visualiserede kodningsvejledninger, der gør HTML, CSS og JavaScript enkle, kan du tilmelde dig mit nyhedsbrev her: