8 utbildningsprojekt

«En mästare gör fler misstag än en nybörjare – försök»

Vi erbjuder 8 projektidéer som kan göras "för skojs skull" för att få verklig utvecklingserfarenhet.

Projekt 1. Klon av Trello

Klon av Trello av Indrek Lasn.

Vad du kommer att lära dig:

• Organisering av förfrågningshanteringsrutter (Routing).
• Dra och släpp.
• Hur man skapar nya objekt (tavlor, listor, kort).
• Bearbetning och validering av indata.
• Från klientens sida: hur man använder lokalt lagringsutrymme, hur man sparar data i lokalt lagringsutrymme, hur man läser data från lokalt lagringsutrymme.
• Från serverns sida: hur man använder databaser, hur man sparar data i databasen, hur man läser data från databasen.

Här är ett exempel på ett repository, skapat med React+Redux.

Projekt 2. Adminpanel

Github Repository.

En enkel CRUD-applikation, perfekt för att lära sig grunderna. Vi lär oss:

• Skapa användare, hantera användare.
• Interagera med databasen — skapa, läsa, redigera, ta bort användare.
• Inmatningsvalidering och arbete med formulär.

Projekt 3. Kryptovalutatracker (nativ mobilapp)

Github repository.

I vilket som helst språk: Swift, Objective-C, React Native, Java, Kotlin.

Vi lär oss:

• Hur nativa appar fungerar.
• Hur man hämtar data från API.
• Hur nativa sidlayouter fungerar.
• Hur man arbetar med mobila simulatorer.

Prova den här API:en. Hittar du något bättre, skriv i kommentarerna.

Om du är intresserad, här är en guide.

Projekt 4. Ställa in din egen webpack-konfiguration från grunden

Tekniskt sett är detta inte en applikation, men en mycket användbar uppgift för att förstå hur webpack fungerar inifrån. Nu kommer det inte att vara en "svart låda", utan ett begripligt verktyg.

Krav:

• Komprimera es7 till es5 (grunder).
• Komprimera jsx till js  — eller  -  .vue till .js (du måste lära dig laddare)
• Ställa in webpack dev server och hot module reloading. (vue-cli och create-react-app använder båda)
• Använda Heroku, now.sh eller Github, lära sig att distribuera webpack-projekt.
• Ställa in din favorit preprocessorer för att komprimera css  —  scss, less, stylus.
• Lära sig hur man använder bilder och svgs med webpack.

Här är en fantastisk resurs för fullständiga nybörjare.

Projekt 5. Klon av Hackernews

Varje jedi måste göra sin egen Hackernews.

Vad du kommer att lära dig längs vägen:

• Hur man interagerar med hackernews API.
• Hur man skapar en enkelsidesapplikation.
• Hur man implementerar funktioner som visning av kommentarer, enskilda kommentarer, profiler.
• Organisering av förfrågningshanteringsrutter (Routing).

Projekt 6. Att-göra lista

TodoMVC.

Verkligen? Todo-app? Det finns tusentals. Men tro mig, det finns en anledning till dess popularitet.
En todo-app är ett utmärkt sätt att säkerställa att du förstår grunderna. Försök att skriva en app med vanilj Javascript och en med ditt favoritramverk.

Lär dig:

• Skapa nya uppgifter.
• Kontrollera fälts fyllning.
• Filtrera uppgifter (avslutad, aktiv, alla). Använd filter och reduce.
• Förstå grunderna i Javascript.

Projekt 7. Sorterbar drag-and-drop-lista

Github repository.

Mycket användbart för att förstå drag-and-drop API.

Lär oss:

• Drag-and-drop API
• Skapa rika användargränssnitt

Projekt 8. Klon av en messenger (native app)

Du kommer att förstå hur både webbapplikationer och native-appar fungerar, vilket gör att du skiljer dig från mängden.

Vad vi kommer att studera:

• Web sockets (omedelbara meddelanden)
• Hur nativa appar fungerar.
• Hur mallar fungerar i native-appar.
• Organisera rutter för förfrågningshantering i native-appar.

Detta räcker för en månad eller två.

Översättningen gjordes med stöd av företaget EDISON Software, som professionellt arbetar med utveckling av applikationer och webbplatser i PHP för stora kunder, samt utveckling av molntjänster och mobilapplikationer i Java.

Källa: habr.com