8 progetti di apprendimento

«Il maestro commette più errori di un principiante — tentativi»

Offriamo 8 progetti che puoi realizzare "per divertimento", per acquisire esperienza reale nello sviluppo.

Progetto 1. Clone di Trello

Clone di Trello di Indrek Lasn .

Cosa imparerai:

• Organizzazione delle rotte per la gestione delle richieste (Routing).
• Drag and drop.
• Come creare nuovi oggetti (bacheche, liste, schede).
• Elaborazione e verifica dei dati in ingresso.
• Dal lato client: come utilizzare lo storage locale, come salvare i dati nello storage locale, come leggere i dati dallo storage locale.
• Dal lato server: come utilizzare i database, come salvare i dati nel database, come leggere i dati dal database.

Ecco un esempio di repository, realizzato con React+Redux.

Progetto 2. Pannello di amministrazione

Repository di Github.

Un semplice progetto CRUD, ideale per apprendere le basi. Impareremo:

• Creare utenti, gestire utenti.
• Interagire con il database: creare, leggere, modificare, eliminare utenti.
• Verifica dell'input e gestione dei form.

Progetto 3. Tracker di criptovalute (app mobile nativa)

Repository di Github.

In qualsiasi linguaggio: Swift, Objective-C, React Native, Java, Kotlin.

Impareremo:

• Come funzionano le applicazioni native.
• Come estrarre dati dalle API.
• Come funzionano i layout delle pagine native.
• Come lavorare con gli emulatori mobili.

Prova questa API. Se trovi qualcosa di meglio, scrivilo nei commenti.

Se sei interessato, ecco un tutorial qui.

Progetto 4. Configura il tuo webpack da zero

Tecnicamente, non è un'applicazione, ma è un compito molto utile per capire come funziona webpack dall'interno. Non sarà più una "scatola nera", ma uno strumento comprensibile.

Requisiti:

• Compilare es7 in es5 (nozioni di base).
• Compilare jsx in js  — o  -  .vue in .js (dovrai imparare i loader)
• Configurare il webpack dev server e il caricamento a caldo dei moduli. (vue-cli e create-react-app utilizzano entrambi)
• Utilizzare Heroku, now.sh o Github, imparare a distribuire progetti webpack.
• Configurare il tuo preprocessore preferito per compilare css  —  scss, less, stylus.
• Scoprire come utilizzare immagini e svgs con webpack.

Ecco una risorsa straordinaria per i principianti assoluti.

Progetto 5. Clone di Hackernews

Ogni Jedi deve creare il proprio Hackernews.

Cosa imparerai lungo il percorso:

• Come interagire con l'API di Hackernews.
• Come creare un'applicazione a pagina singola.
• Come implementare funzionalità come visualizzare commenti, singoli commenti, profili.
• Organizzazione delle rotte per la gestione delle richieste (Routing).

Progetto 6. Todo

TodoMVC.

Davvero? Todo? Ce ne sono migliaia. Ma credetemi, c'è una ragione per questa popolarità.
L'app todo è un ottimo modo per assicurarti di capire le basi. Prova a scrivere un'applicazione in JavaScript puro e una nel tuo framework preferito.

Imparerai:

• A creare nuovi compiti.
• A controllare il riempimento dei campi.
• A filtrare i compiti (completato, attivo, tutti). Usa filter e reduce.
• A comprendere le basi di JavaScript.

Progetto 7. Lista draggable ordinabile

Repository di Github.

Molto utile per comprendere l'API drag and drop.

Impareremo:

• L'API drag and drop
• A creare interfacce utente ricche

Progetto 8. Clone di un messenger (app nativa)

Capirai come funzionano sia le applicazioni web che quelle native, il che ti distinguerà dalla massa.

Cosa impareremo:

• Web sockets (messaggi istantanei)
• Come funzionano le applicazioni native.
• Come funzionano i templati nelle applicazioni native.
• Organizzazione delle rotte di elaborazione delle richieste nelle applicazioni native.

Questo ti basterà per un mese o due.

Traduzione realizzata con il supporto di EDISON Software, che si occupa professionalmente dello sviluppo di applicazioni e siti web in PHP per grandi clienti, così come dello sviluppo di servizi cloud e applicazioni mobili in Java.

Fonte: habr.com