5 Reager projekter, du har brug for i din portefølje

Du har lagt i arbejdet, og nu har du en solid forståelse af React-biblioteket.

Oven i det har du et godt kendskab til JavaScript og lægger de mest nyttige funktioner til brug i din React-kode.

Du har gjort store fremskridt ... men hvad gør du nu?

Hvordan kan du bygge bro over kløften mellem at kende det grundlæggende i React og at blive en professionel udvikler?

Mange udviklere støder på dette problem, når de når denne mellemliggende fase af læring React eller ethvert andet JavaScript-bibliotek. De kender det meste af selve biblioteket såvel som JavaScript for at bruge det effektivt, men de kender ikke det næste skridt der skal tages.

Hvorfor du skal bygge apps

Når du har lært det grundlæggende i React, skal du have behagelige bygningsapps med de færdigheder, du har fået. Denne praksis ligger i kernen i at være en effektiv React-udvikler - at vide, hvordan man bygger apps alene og bruger de rigtige værktøjer i React-økosystemet til at gøre det.

Men hvilke apps skal du opbygge med React for at øge din evne som udvikler?

I denne artikel gennemgår vi 5 forskellige typer apps, som du bør overveje at opbygge efter den grundlæggende todo-app. Den store fordel ved at opbygge apps er, at når de er implementeret, kan de knyttes til din portefølje som en stærk, øjeblikkelig måde at vise arbejdsgivere din ekspertise på.

For hver apptype vil jeg dække populære eksempler, som du kan bruge som inspiration, de værktøjer, jeg vil anbefale til at opbygge hver funktion sammen med en kort demo af en sådan app, som jeg personligt har lavet ved hjælp af React.

Sådan starter du opbygning af apps med React

I modsætning til at lære React selv, hvor du kan finde snesevis af artikler til at dykke dybere ned i ethvert relateret koncept, er processen med at opbygge en app stort set en selvstyret aktivitet uden meget vejledning.

Hvis du er i gang med at oprette apps alene, vil jeg anbefale at søge efter artikler, der lærer dig det grundlæggende ved at opbygge en app og dykke ned i den appkildekode, de giver. Selv processen med at læse kode i sig selv vil gøre dig til en bedre udvikler.

Hvis disse eksempler ser for skræmmende ud til at bygge dig selv, skal du huske, hvad du kender som en React-udvikler - for at opdele applikationer i komponerbare komponenter. Hver applikation skal bygges stykke for stykke, komponent for komponent. Fokus på at opbygge en funktion ad gangen. Med praksis får du en bedre forståelse af, hvilke værktøjer du har brug for til hver funktion såvel som de almindelige mønstre bag opbygning af apps generelt.

Bemærk: En misforståelse, som jeg havde, da jeg begyndte at opbygge rigtige applikationer som disse, var at jeg var nødt til at opbygge en hel backend / API med Node eller Python for at få den funktionalitet, jeg havde brug for. Du behøver ikke gøre det. Se på kraftfulde serverløse teknologier som Firebase, AWS Amplify eller Hasura, der giver dig en komplet backend ud af kassen uden behov for selv at oprette og implementere en. Invester i værktøjer, der gør dig mere produktiv og sparer tid.

Byg en app til sociale medier

Hvis jeg kun skulle anbefale en app, som du kunne tilføje til din portefølje, ville det være en app til sociale medier. Twitter, Facebook og Instagram er ret sofistikerede og inkluderer et stadigt voksende antal funktioner, der holder brugerne engagerede. Oven i det er det den slags app, du sandsynligvis kender bedst til, hvordan den skal fungere.

Der er en række funktioner, der er almindelige blandt næsten alle apps til sociale medier:

  • brugernes mulighed for at oprette indlæg med tekst og / eller mediefiler
  • et live feed af disse stillinger,
  • gør det muligt for andre brugere at kunne lide og kommentere indlæg,
  • samt brugergodkendelse.

Og når du har fået det nede, kan du tilføje profiler til hver af dine brugere, hvor de kan personalisere deres konto samt administrere de brugere, de følger.

Appeksempler: Instagram, Twitter, Snapchat, Reddit

Teknologier til at bruge:

  • Opret React App eller Next.js for at oprette en dynamisk brugergrænseflade for indlæg, likes og meddelelser
  • Firebase, AWS Amplify eller Hasura (ved hjælp af GraphQL med abonnementer) til realtidsdata
  • Serverløse funktioner som AWS Lambda eller Firebase-funktioner til underretninger
  • Cloudinary eller Firebase-lager til upload af billeder eller video

Byg en e-handelsapp

Vælg et par af dine yndlingssider, og jeg garanterer, at mindst en af ​​dem har en e-handelsapp indlejret i den, selvom det kun er en lille butiksfacade. E-handelsapps er allestedsnærværende, og jeg vil vædde på, at du bliver bedt om at bygge en på et eller andet tidspunkt i din karriere som udvikler.

Det er fristende at opbygge en imponerende, omfattende e-handelsplatform som Amazon, men jeg vil anbefale at arbejde på noget mindre og mere fokuseret.

I stedet for en markedsplads, der giver alle ting til alle mennesker, skal du gå med en branche, der interesserer dig. For eksempel, hvis du kan lide hjemmevarer, kan du se på, hvad Crate & Barrel eller Williams-Sonoma har bygget til deres websteder.

Bortset fra produkter kan e-handelsapps muligvis levere en service til forbrugerne. Hvis det er en tjeneste, der leveres lokalt, kan der tilføjes et interaktivt kort til appen for at give tjenesteudbyderen og kunden kendskab til hinandens placering. Madleveringsapplikationer såsom UberEats og Doordash, der kræver placeringen af ​​den person, der bestiller maden, kommer til at tænke på.

Uanset hvad der sælges, uanset om det er fysisk eller virtuelt, vil hver e-handelsapp bestå af en vis butiksfacade med produkt- eller servicedetaljerne. Hvis brugere kan købe flere produkter på én gang, skal den have en indkøbskurv, hvor brugerne kan administrere de produkter, de ønsker at købe.

Endelig har hver e-handelsapp brug for en checkproces, hvor brugerne enten kan købe deres produkter anonymt eller når de er godkendt.

Populære eksempler: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Teknologier til at bruge:

  • Opret React App eller Gatsby til butiksfronten og vis produkter
  • Strip med pakken reager-stripe-elementer til håndtering af betalingsbehandling
  • Serverfri funktion som Netlify / AWS Lambda til at håndtere kassen
  • Algolia til lynhurtig produktsøgning
  • Snipcart til nem oprettelse af en vogn og administration af vognprodukter

Byg en underholdningsapp

Dette er den bredeste af alle kategorier. Hvad mener jeg med underholdning? En app, der er fokuseret omkring en bestemt type medier. Dette kan være film, podcasts eller musik for at nævne nogle få.

Nogle gode eksempler på henholdsvis dette er Netflix, Audible og Soundcloud eller Spotify. Hvis du inkluderer kunst eller design i denne kategori, kan vi tilføje websteder som Behance eller Dribbble til listen.

Hvad der er interessant ved denne kategori er, at mange underholdningsapps grænser op til sociale medieapps. For eksempel er en app som Tiktok, der indeholder korte, fantasifulde videoer, drevet af højt brugerengagement. En anden app som YouTube er centreret om brugerinteraktioner gennem likes, kommentarer og abonnementer.

Tænk over, hvilken type medier eller underholdning, der mest interesserer dig, og se om du kan bygge en simpel platform omkring det, hvor brugerne kan logge ind og gemme det indhold, de kan lide. Derefter skal du undersøge at tilføje sociale elementer, der gør det muligt at tilføje kommentarer, ligesom og dele indhold med andre brugere på platformen.

Populære eksempler: YouTube, Netflix, Audible, Spotify, Tiktok

Teknologier til at bruge:

  • Opret React App, Next.js eller Gatsby for at oprette app-brugergrænsefladen
  • npm-pakke reager-afspiller til afspilning af medier
  • Cloudinary eller Firebase-lagring til medieupload
  • Algolia til søgning af medier efter navn (dvs. lydspor, video, film osv.)

Byg en Messaging-app

Messaging-apps er enorme. Du har sandsynligvis en gratis messaging-tjeneste som WhatsApp eller Viber på din telefon eller en indbygget i din sociale medieplatform som Facebook Messenger. Tjenester som Intercom med instant messaging er også tilgængelige som webapps, så virksomheder kan yde øjeblikkelig kundesupport til deres brugere.

Enhver messaging-app vil bestå af en samtale med to eller flere personer, hvor beskeder sendes i realtid. I lighed med appen for sociale medier vil jeg anbefale en tjeneste som Firebase eller Hasura, der transporterer data via WebSockets, så meddelelser vises straks i samtalen.

De fleste messaging-apps findes på mobile enheder eller tablets. Hvis dette ikke er din første appklon, er dette en stor chance for at bevæge sig ud over internettet og opbygge en mobilapp med React Native. Endnu bedre, du kan oprette en web- og mobil messaging-app samtidigt med en pakke som React Native Web.

Populære eksempler: WhatsApp, Viber, Discord, Messenger, Slack

Teknologier til at bruge:

  • React Native eller React Native Web for at opbygge som en mobilapp eller hybridapp (web + mobil)
  • Firebase, AWS Amplify eller Hasura (ved hjælp af GraphQL-abonnementer) til at sende meddelelser i realtid
  • Cloudinary eller Firebase-lager til afsendelse af meddelelser med billed- eller videoindhold
  • npm-pakke emoji-mart for en glat Slack-lignende emoji-vælger, som brugerne kan medtage i deres beskeder

Byg en produktivitetsapp

Dette er sandsynligvis den nemmeste type app, som du kan begynde med, i betragtning af at der er så mange tutorials om grundlæggende produktivitetsapps derude. Når jeg taler om produktivitetsapps, henviser jeg til noteringsapps, apps til styring af teams og opgavelister. Generelt er alt, hvad der hjælper dig med at udføre en bestemt opgave eller være mere produktiv.

Hvad der er godt ved først at opbygge en produktivitetsapp er, at den giver en god introduktion til appbygning på grund af den relative enkelhed af mange af dens funktioner.

Du kan starte med noget simpelt, såsom en teksteditor til let at skrive formateret tekst med markdown og derefter udvide den. Tilføj derefter muligheden for at gemme tekst som individuelle filer på din computer. Derefter en funktion til at eksportere markdown som HTML for at skrive formaterede e-mails.

For at begynde at opbygge en produktivitetsapp skal du spørge, hvilke funktioner en app kan have for at gøre din daglige tidsplan lettere og gå derfra.

Populære eksempler: Todoist, forestilling, ting osv.

Teknologier til at bruge:

  • Opret React App til internettet eller React Native til mobil
  • npm-pakke reagere-markdown for at vise markdown i din app UI
  • npm-pakke react-codemirror2 til at skrive kode i dine noter
  • npm-pakke, der kan trækkes, til genbestilling af listeindhold ved at klikke og trække

Held og lykke med din appbygningsrejse, og vi ses i den næste artikel.

Vil du blive JS Master? Deltag i JS Bootcamp 2020

Deltag i JS Bootcamp 2020

Følg + Sig Hej! ? Twitter • codeartistry.io