1. Clone di nozioni
L'applicazione Notion è amata da molti; ti consente di ottimizzare il flusso di lavoro, lavorare con documenti, pianificare attività e sincronizzare i dati tra dispositivi.
Cosa imparerai creando un clone di Notion:
- . L'utente può “afferrare con il mouse” trascinabile elemento e inserirlo droppabile zona.
- Come sincronizzare i dati in tempo reale tra il tuo computer e smartphone.
- Permettiamo agli utenti di creare, leggere, aggiornare ed eliminare record, formando così competenze CRUD.
L'articolo è stato tradotto con il supporto di EDISON Software, che e .
2. Sostituisci il clone
Repl.it è uno strumento per la modifica collaborativa del codice in tempo reale. Puoi scegliere diversi linguaggi: JavaScript, Python, Go ed eseguire il codice direttamente nel browser. Molto utile per dimostrazioni rapide e interviste sul codice.
Cosa imparerai creando un clone di Repl.it:
- Come eseguire ed eseguire il codice (lato server) nel browser (lato client).
- Leggere i dati di input (codice sorgente) e visualizzare il risultato dell'esecuzione.
- Come creare file e cartelle sul Web e salvare i risultati.
- Come evidenziare la sintassi del codice.
3. Clonazione di Google Foto
Google Foto è un servizio per archiviare e condividere foto.
Qualsiasi moderna applicazione fotografica può eseguire funzioni di base: caricare, ritagliare, ecc. Le persone vogliono creare i propri avatar e condividere foto di gatti, quindi è necessario essere in grado di lavorare con le immagini.
Cosa imparerai creando un clone di Google Foto:
- Come creare immagini reattive su telefoni, tablet, laptop e persino schermi TV giganti.
- Come gestire i caricamenti di immagini, in particolare immagini di grandi dimensioni (>1 MB) e caricamenti collettivi.
- Elabora file di immagini, ritaglia e ridimensiona le foto per le miniature o quando apri una galleria.
- Bonus: come archiviare le immagini nel cloud o nel database locale.
4. Clone di Gifsky
converte i video in GIF utilizzando le funzioni per tavolozze cross-frame efficienti e anti-aliasing temporale. Il risultato è una GIF con migliaia di fiori per fotogramma.
Cosa imparerai creando un clone Gifski:
- Come convertire file video (.mp4 in .gif).
- Come utilizzare l'API HTML Drag and Drop.
- Come funzionano l'ottimizzazione e l'elaborazione delle immagini.
Nota: ed è su GitHub!
5. Monitoraggio dei tassi di criptovaluta
Tracker di criptovaluta React Native
Cosa imparerai creando un tracker del tasso di valuta:
- Come lavorare con l'API e ricevere dati in remoto dall'API.
- Come visualizzare i dati come elenco.
- Bonus: Se sei interessato, ho scritto di recente per criptovaluta con React Native.
Nota: Qui .
Una selezione di progetti da pubblicazioni precedenti.
Strato
Layer è una community in cui tutti possono disegnare un pixel su una “tavola” condivisa. L'idea originale è nata su Reddit. La community r/Layer è una metafora della creatività condivisa, del fatto che tutti possono essere creatori e contribuire a una causa comune.
Cosa imparerai creando il tuo progetto Layer:
- Come funziona il canvas JavaScript Sapere come utilizzare un canvas è un'abilità fondamentale in molte applicazioni.
- Come coordinare le autorizzazioni degli utenti. Ogni utente può disegnare un pixel ogni 15 minuti senza dover effettuare il login.
- Crea sessioni di cookie.
Squoosh
Squoosh è un'applicazione di compressione delle immagini con molte opzioni avanzate.
GIF 20MB
Creando la tua versione di Squoosh imparerai:
- Come lavorare con le dimensioni delle immagini
- Impara le nozioni di base dell'API Drag'n'Drop
- Comprendi come funzionano l'API e gli ascoltatori di eventi
- Come caricare ed esportare file
Nota: Il compressore delle immagini è locale. Non è necessario inviare dati aggiuntivi al server. Puoi avere il compressore a casa oppure usarlo su un server, a tua scelta.
Calcolatrice
Dai? Sul serio? Calcolatrice? Sì, esatto, una calcolatrice. Comprendere le basi delle operazioni matematiche e il modo in cui interagiscono è un'abilità fondamentale per semplificare le tue applicazioni. Prima o poi dovrai fare i conti con i numeri e prima è, meglio è.
Creando la tua calcolatrice imparerai:
- Lavora con numeri e operazioni matematiche
- Esercitati con l'API dei listener di eventi
- Come disporre gli elementi, comprendere gli stili
Crawler (motore di ricerca)
Tutti hanno utilizzato un motore di ricerca, quindi perché non crearne uno tuo? I crawler sono necessari per cercare informazioni. Tutti li usano ogni giorno e la richiesta di questa tecnologia e di specialisti non potrà che crescere nel tempo.
Motore di ricerca Google
Cosa imparerai creando il tuo motore di ricerca:
- Come funzionano i crawler
- Come indicizzare i siti e come classificarli in base al rating e alla reputazione
- Come archiviare i siti indicizzati in un database e come lavorare con il database
Lettore musicale (Spotify, Apple Music)
Tutti ascoltano la musica: è semplicemente parte integrante della nostra vita. Creiamo un lettore musicale per comprendere meglio come funzionano i meccanismi di base di una moderna piattaforma di streaming musicale.
Spotify
Cosa imparerai creando la tua piattaforma di streaming musicale:
- Come lavorare con l'API. utilizzare l'API di Spotify o Apple Music
- Come riprodurre, mettere in pausa o riavvolgere alla traccia successiva/precedente
- Come modificare il volume
- Come gestire il routing degli utenti e la cronologia del browser
App per la ricerca di film tramite React (con hook)
La prima cosa da cui potresti iniziare è creare un'app per la ricerca di film utilizzando React. Di seguito è riportata un'immagine di come apparirà l'applicazione finale:
Cosa imparerai?
Creando questa app, migliorerai le tue capacità di React utilizzando la relativamente nuova API Hooks. Il progetto di esempio utilizza componenti React, molti hook, un'API esterna e, naturalmente, alcuni stili CSS.
Stack tecnologico e funzionalità
- Reagire con i ganci
- creare-reagiscono-app
- JSX
- CSS
Senza utilizzare alcuna classe, questi progetti ti offrono il punto di ingresso perfetto nel funzionale React e ti aiuteranno sicuramente nel 2020. potete trovare . Segui le istruzioni o personalizzalo.
App di chat con Vue
Un altro fantastico progetto che puoi realizzare è creare un'app di chat utilizzando la mia libreria JavaScript preferita: VueJS. L'applicazione sarà simile a questa:
Cosa imparerai?
In questo tutorial imparerai come creare un'app Vue da zero: creare componenti, gestire lo stato, creare percorsi, connettersi a servizi di terze parti e persino gestire l'autenticazione.
Stack tecnologico e funzionalità
- Vue
- vuex
- Vue Router
- Vedi CLI
- Pusher
- CSS
Questo è davvero un ottimo progetto per iniziare con Vue o migliorare le tue competenze esistenti per iniziare lo sviluppo nel 2020. potete trovare .
App per il bel tempo con Angular 8
Questo esempio ti aiuterà a creare una bellissima app meteo utilizzando Angular 8:
Cosa imparerai?
Questo progetto ti insegnerà competenze preziose nella creazione di applicazioni da zero, dalla progettazione allo sviluppo, fino a un'applicazione pronta per la distribuzione.
Stack tecnologico e funzionalità
- 8 angolare
- Firebase
- Rendering lato server
- CSS con griglia e Flexbox
- Mobile friendly e adattabilità
- Modalità oscura
- Bella interfaccia
Ciò che mi piace davvero di questo progetto onnicomprensivo è che non studi le cose in modo isolato. Imparerai invece l'intero processo di sviluppo, dalla progettazione alla distribuzione finale.
Applicazione To-Do che utilizza Svelte
Svelte è come il nuovo arrivato nell'approccio basato sui componenti, almeno simile a React, Vue e Angular. E questa è una delle novità più interessanti del 2020.
Le app To-Do non sono necessariamente l'argomento più caldo, ma ti aiuteranno davvero ad affinare le tue abilità Svelte. Apparirà così:
Cosa imparerai?
Questo tutorial ti mostrerà come creare un'applicazione utilizzando Svelte 3, dall'inizio alla fine. Utilizzerai componenti, stili e gestori di eventi
Stack tecnologico e funzionalità
- Snello 3
- Componenti
- Styling con CSS
- Sintassi ES6
Non ci sono molti buoni progetti iniziali di Svelte, quindi ho scoperto .
App di e-commerce che utilizza Next.js
Next.js è il framework più popolare per la creazione di applicazioni React che supportano il rendering lato server immediatamente.
Questo progetto ti mostrerà come creare un'applicazione di e-commerce simile a questa:
Cosa imparerai?
In questo progetto imparerai come sviluppare con Next.js: creare nuove pagine e componenti, estrarre dati, definire lo stile e distribuire un'applicazione Next.
Stack tecnologico e funzionalità
- Next.js
- Componenti e pagine
- Campionamento dei dati
- stilizzazione
- Distribuzione del progetto
- SSR e SPA
È sempre bello avere un esempio del mondo reale come un'app di e-commerce per imparare qualcosa di nuovo. Puoi .
Blog multilingue completo con Nuxt.js
Nuxt.js sta per Vue, ciò che Next.js sta per React: un ottimo framework per combinare la potenza del rendering lato server e delle applicazioni a pagina singola
L'applicazione finale che puoi creare sarà simile alla seguente:
Cosa imparerai?
In questo progetto di esempio imparerai come creare un sito Web completo utilizzando Nuxt.js, dalla configurazione iniziale alla distribuzione finale.
Sfrutta molte delle interessanti funzionalità che Nuxt ha da offrire, come pagine e componenti e stili con SCSS.
Stack tecnologico e funzionalità
- Nuxt.js
- Componenti e pagine
- Modulo Storyblock
- Hagfish
- Vuex per la gestione dello Stato
- SCSS per lo styling
- Middleware di Nuxt
, che include molte fantastiche funzionalità di Nuxt.js. Personalmente adoro lavorare con Nuxt, quindi dovresti provarlo perché ti renderà anche un ottimo sviluppatore Vue.
Blog con Gatsby
Gatsby è un eccellente generatore di siti statici che utilizza React e GraphQL. Questo è il risultato del progetto:
Cosa imparerai?
In questo tutorial imparerai come utilizzare Gatsby per creare un blog che utilizzerai per scrivere i tuoi articoli utilizzando React e GraphQL.
Stack tecnologico e funzionalità
- Gatsby
- Reagire
- GraphQL
- Plugin e temi
- MDX/Ribasso
- CSS Bootstrap
- Modelli
Se hai mai desiderato aprire un blog, su come realizzarlo utilizzando React e GraphQL.
Non sto dicendo che WordPress sia una cattiva scelta, ma con Gatsby puoi creare siti Web ad alte prestazioni utilizzando React, che è una combinazione straordinaria.
Blog con Gridsome
Terrificante per Vue... Ok, l'abbiamo già avuto con Next/Nuxt.
Ma lo stesso vale per Gridsome e Gatsby. Entrambi utilizzano GraphQL come livello dati, ma Gridsome utilizza VueJS. Questo è anche un fantastico generatore di siti statici che ti aiuterà a creare fantastici blog:
Cosa imparerai?
Questo progetto ti insegnerà come creare un semplice blog per iniziare con Gridsome, GraphQL e Markdown. Copre anche come distribuire un'applicazione tramite Netlify.
Stack tecnologico e funzionalità
- Gridoso
- Vue
- GraphQL
- riduione di prezzo
- Netlify
Questo non è certamente il tutorial più completo, ma copre i concetti di base di Gridsome e .
Lettore audio simile a SoundCloud che utilizza Quasar
Quasar è un altro framework Vue che può essere utilizzato per creare applicazioni mobili. In questo progetto creerai un'applicazione di riproduzione audio, ad esempio:
Cosa imparerai?
Mentre altri progetti si concentrano principalmente sulle applicazioni web, questo ti mostrerà come creare un'applicazione mobile utilizzando Vue e il framework Quasar.
Dovresti già avere Cordova in esecuzione con Android Studio/Xcode configurato. In caso contrario, il manuale ha un collegamento al sito Web Quasar dove viene mostrato come impostare tutto.
Stack tecnologico e funzionalità
- Quasar
- Vue
- Cordova
- Wave Surfer
- Componenti dell'interfaccia utente
, dimostrando le capacità di Quasar per la creazione di applicazioni mobili.
Modulo carta di credito
Una fantastica forma di carta di credito con microinterazioni fluide e divertenti. Include la formattazione dei numeri, la verifica e il rilevamento automatico del tipo di carta. È basato su Vue.js ed è anche completamente reattivo. (Puoi vedere .)
Cosa imparerai:
- Elaborare e convalidare i moduli
- Gestire gli eventi (ad esempio, quando i campi cambiano)
- Comprendere come visualizzare e posizionare gli elementi nella pagina, in particolare i dati della carta di credito visualizzati nella parte superiore del modulo
grafico a barre
Un istogramma è un diagramma o un grafico che rappresenta dati categorici con barre rettangolari con altezze o lunghezze proporzionali ai valori che rappresentano.
Possono essere applicati verticalmente o orizzontalmente. Un grafico a barre verticali è talvolta chiamato grafico a linee.
Cosa imparerai:
- Visualizzare i dati in modo strutturato e comprensibile
- Inoltre: scopri come utilizzare l'elemento
canvase come disegnare elementi con esso
puoi trovare i dati sulla popolazione mondiale. Sono ordinati per anno.
Animazione del cuore di Twitter
Nel 2016, Twitter ha introdotto questa straordinaria animazione per i suoi tweet. Nel 2019 sembra ancora adatto, quindi perché non crearne uno tu stesso?
Cosa imparerai:
- Lavora con l'attributo CSS
keyframes - Manipolare e animare elementi HTML
- Combina JavaScript, HTML e CSS
Repository GitHub ricercabili
Non c'è niente di speciale qui: i repository GitHub sono solo un elenco glorificato.
L'obiettivo è visualizzare i repository e consentire all'utente di filtrarli. Utilizzo per ottenere repository per ciascun utente.
Pagina del profilo GitHub -
Cosa imparerai:
- Ricevi dati dall'API
- Visualizza i dati dall'API
- Filtra e mostra i dati rilevanti per ogni ricerca
- Facoltativo: se sei pronto per una sfida, usa , creato utilizzando GraphQL. .
Chat in stile Reddit
Le chat sono un mezzo di comunicazione popolare grazie alla loro semplicità e facilità d'uso. Ma cosa alimenta realmente le chat room moderne? WebSocket!
Cosa imparerai:
- Utilizza WebSocket, comunicazioni in tempo reale e aggiornamenti dei dati
- Lavora con i livelli di accesso degli utenti (ad esempio, il ruolo è assegnato al proprietario di un canale di chat
admin, e altri nella stanza -user) - Elabora e convalida i moduli: ricorda, la finestra di chat per inviare un messaggio è
input - Crea e partecipa a diverse chat
- Lavora con messaggi personali. Gli utenti possono chattare con altri utenti in privato. In sostanza, stabilirai una connessione WebSocket tra due utenti.
Navigazione in stile stripe
Ciò che rende unica questa navigazione è che il contenitore popover si trasforma per adattarsi al contenuto. C'è un'eleganza in questa transizione rispetto al comportamento tradizionale di apertura e chiusura di un nuovo popover.
Cosa imparerai:
- Combina animazioni CSS con transizioni
- Oscura il contenuto e applica la classe attiva all'elemento flottato
Pacman
Crea la tua versione di Pacman. Questo è un ottimo modo per avere un'idea di come vengono sviluppati i giochi e comprenderne le basi. Utilizza un framework JavaScript, React o Vue.
Imparerai:
- Come si muovono gli elementi
- Come determinare quali tasti premere
- Come determinare il momento della collisione
- Puoi andare oltre e aggiungere controlli di movimento dei fantasmi
Troverai un esempio di questo progetto GitHub
Gestione utenti
Progetto GitHub
La creazione di un'applicazione di tipo CRUD per l'amministrazione degli utenti ti insegnerà le basi dello sviluppo. Ciò è particolarmente utile per i nuovi sviluppatori.
Imparerai:
- Cos'è il routing
- Come gestire i moduli di inserimento dati e verificare cosa ha inserito l'utente
- Come lavorare con il database: crea, leggi, aggiorna ed elimina azioni
Controllare il meteo nella tua posizione
Progetto GitHub
Se vuoi creare app, inizia con un'app meteo. Questo progetto può essere completato utilizzando Swift.
Oltre ad acquisire esperienza nella creazione di un'applicazione, imparerai:
- Come lavorare con l'API
- Come utilizzare la geolocalizzazione
- Rendi la tua applicazione più dinamica aggiungendo input di testo. In esso, gli utenti potranno inserire la propria posizione per controllare il tempo in una località specifica.
Avrai bisogno di un'API. Per ottenere dati meteorologici, utilizza l'API OpenWeather. Ulteriori informazioni sull'API OpenWeather.
кно ата
La mia finestra di chat in azione, aperta in due schede del browser
Creare una finestra di chat è il modo perfetto per iniziare con i socket. La scelta dello stack tecnologico è enorme. Node.js, ad esempio, è perfetto.
Imparerai come funzionano i socket e come implementarli. Questo è il vantaggio principale di questo progetto.
Se sei uno sviluppatore Laravel che vuole lavorare con i socket, leggi il mio
CI GitLab
Se non hai esperienza con l'integrazione continua (CI), divertiti con GitLab CI. Configura alcuni ambienti e prova a eseguire un paio di test. Non è un progetto molto difficile, ma sono sicuro che imparerai molto da esso. Molti team di sviluppo ora utilizzano la CI. Sapere come usarlo è utile.
Imparerai:
- Cos'è GitLab CI
- Come configurare
.gitlab-ci.ymlche dice all'utente GitLab cosa fare - Come eseguire la distribuzione in altri ambienti
Analizzatore di siti web
Crea uno scraper che analizzi la semantica dei siti web e crei la loro valutazione. Ad esempio, puoi verificare la presenza di tag alt mancanti nelle immagini. Oppure controlla se la pagina ha meta tag SEO. È possibile creare uno scraper senza un'interfaccia utente.
Imparerai:
- Come funziona il raschietto?
- Come creare selettori DOM
- Come scrivere un algoritmo
- Se non vuoi fermarti qui, crea un'interfaccia utente. Puoi anche creare un report su ogni sito web che controlli.
Rilevazione del sentiment sui social network
Il rilevamento del sentiment sui social media è un ottimo modo per conoscere il machine learning.
Puoi iniziare analizzando un solo social network. Di solito tutti iniziano con Twitter.
Se hai già esperienza con l'apprendimento automatico, prova a raccogliere dati da diversi social network e a combinarli.
Imparerai:
- Cos'è l'apprendimento automatico
Clone di Trello
Cosa imparerai:
- Organizzazione dei percorsi di elaborazione delle richieste (Routing).
- Trascinare e rilasciare.
- Come creare nuovi oggetti (schede, elenchi, carte).
- Elaborazione e controllo dei dati di input.
- Dal lato client: come utilizzare l'archiviazione locale, come salvare i dati nell'archiviazione locale, come leggere i dati dall'archiviazione locale.
- Dal lato server: come utilizzare i database, come salvare i dati nel database, come leggere i dati dal database.
, realizzato in React+Redux.
Pannello di Amministrazione
Una semplice applicazione CRUD, ideale per apprendere le basi. Impariamo:
- Crea utenti, gestisci utenti.
- Interagisci con il database: crea, leggi, modifica, elimina utenti.
- Convalidare l'input e lavorare con i moduli.
Tracker di criptovaluta (app mobile nativa)
Qualsiasi cosa: Swift, Objective-C, React Native, Java, Kotlin.
Studiamo:
- Come funzionano le applicazioni native.
- Come recuperare i dati dall'API.
- Come funzionano i layout di pagina nativi.
- Come lavorare con i simulatori mobili.
. Se trovi qualcosa di meglio, scrivi nei commenti.
Se ti interessa, eccolo qui .
Imposta la configurazione del tuo webpack da zero
Tecnicamente questa non è un'applicazione, ma è un compito molto utile per capire come funziona il webpack dall'interno. Ora non sarà una “scatola nera”, ma uno strumento comprensibile.
requisiti:
- Compila es7 in es5 (nozioni di base).
- Compila jsx in js - o - .vue in .js (dovrai imparare i caricatori)
- Configura il server di sviluppo webpack e il ricaricamento del modulo hot. (vue-cli e create-react-app utilizzano entrambi)
- Usa Heroku, now.sh o Github, scopri come distribuire progetti webpack.
- Imposta il tuo preprocessore preferito per compilare css - scss, less, stylus.
- Scopri come utilizzare immagini e SVG con webpack.
Clone di Hackernews
Ogni Jedi è tenuto a creare le proprie Hackernews.
Cosa imparerai lungo il percorso:
- Come interagire con l'API hackernews.
- Come creare un'applicazione a pagina singola.
- Come implementare funzionalità come la visualizzazione di commenti, commenti individuali, profili.
- Organizzazione dei percorsi di elaborazione delle richieste (Routing).
Tudushechka
Sul serio? Tuduška? Ce ne sono migliaia. Ma credetemi, c’è una ragione per questa popolarità.
L'app Tudu è un ottimo modo per assicurarti di comprendere le nozioni di base. Prova a scrivere un'applicazione in Javascript Vanilla e una nel tuo framework preferito.
Imparare:
- Crea nuove attività.
- Controlla che i campi siano compilati.
- Filtra le attività (completate, attive, tutte). Utilizzo
filterиreduce. - Comprendere le basi di Javascript.
Elenco drag and drop ordinabile
Molto utile per capire .
Impariamo:
- Trascina e rilascia l'API
- Crea interfacce utente avanzate
Clone di Messenger (app nativa)
Capirai come funzionano sia le applicazioni web che le applicazioni native, cosa che ti distinguerà dalla massa grigia.
Cosa studieremo:
- Socket Web (messaggi istantanei)
- Come funzionano le applicazioni native.
- Come funzionano i modelli nelle applicazioni native.
- Organizzazione dei percorsi di elaborazione delle richieste nelle applicazioni native.
Editor di testo
Lo scopo di un editor di testo è ridurre lo sforzo degli utenti che tentano di convertire la propria formattazione in markup HTML valido. Un buon editor di testo consente agli utenti di formattare il testo in diversi modi.
Ad un certo punto, tutti hanno utilizzato un editor di testo. Quindi perche no ?
Clone di Reddit
è un sito di aggregazione di notizie sociali, classificazione dei contenuti Web e discussione.
Reddit occupa la maggior parte del mio tempo, ma continuo a frequentarlo. Creare un clone di Reddit è un modo efficace per imparare a programmare (mentre navighi su Reddit allo stesso tempo).
Reddit ti offre un sito molto ricco. Non tralasciare alcuna funzionalità e non fare le cose a casaccio. Nel mondo reale con clienti e clienti, non puoi lavorare a casaccio, altrimenti perderai rapidamente il lavoro.
I clienti intelligenti si renderanno immediatamente conto che il lavoro è stato svolto male e troveranno qualcun altro.
Pubblicazione di un pacchetto NPM open source
Se scrivi codice Javascript, è probabile che utilizzi un gestore di pacchetti. Un gestore di pacchetti ti consente di riutilizzare il codice esistente che altre persone hanno scritto e pubblicato.
Comprendere l'intero ciclo di sviluppo di un pacchetto fornirà un'esperienza molto positiva. Ci sono molte cose che devi sapere quando pubblichi il codice. È necessario pensare alla sicurezza, al controllo delle versioni semantico, alla scalabilità, alle convenzioni di denominazione e alla manutenzione.
Il pacchetto può essere qualsiasi cosa. Se non hai un'idea, crea il tuo Lodash e pubblicalo.
Lodash:
Avere qualcosa che hai fatto online ti pone il 10% sopra gli altri. su open source e pacchetti.
Programma di studio freeCodeCamp
freeCodecamp ha raccolto molto .
freeCodeCamp è un'organizzazione senza scopo di lucro. Consiste in una piattaforma di apprendimento interattiva basata sul web, un forum di comunità online, chat room, pubblicazioni Medium e organizzazioni locali che intendono rendere lo sviluppo web dell'apprendimento accessibile a tutti.
Sarai più che qualificato per il tuo primo lavoro se riuscirai a completare l'intero corso.
Crea un server HTTP da zero
Il protocollo HTTP è uno dei principali protocolli attraverso i quali viaggiano i contenuti su Internet. I server HTTP vengono utilizzati per fornire contenuti statici come HTML, CSS e JS.
Essere in grado di implementare il protocollo HTTP da zero amplierà la tua conoscenza di come interagiscono le cose.
Ad esempio, se usi NodeJs, sai che Express fornisce un server HTTP.
Per riferimento, vedi se puoi:
- Configura un server senza utilizzare alcuna libreria
- Il server deve servire contenuti HTML, CSS e JS.
- Implementazione di un router da zero
- Monitorare le modifiche e aggiornare il server
Se non sai perché, usa e prova a creare un server HTTP da zero.
App desktop per appunti
Prendiamo tutti appunti, no?
Creiamo un'app per le note. L'applicazione deve salvare le note e sincronizzarle con il database. Crea un'app nativa utilizzando Electron, Swift o qualunque cosa ti piaccia e ciò che funziona per il tuo sistema.
Sentiti libero di combinarlo con la prima sfida (editor di testo).
Come bonus, prova a sincronizzare la tua versione desktop con la versione web.
Podcast (clone Coperto)
Chi non ascolta i podcast?
Creare un'applicazione Web con le seguenti funzionalità:
- Аавести аккаунт
- Cerca podcast
- Valuta e iscriviti ai podcast
- Interrompi e riproduci, cambia velocità, funzioni avanti e indietro per 30 secondi.
Prova a utilizzare l'API di iTunes come punto di partenza. Se conosci altre risorse, postale nei commenti.
Cattura dello schermo
Ciao! Sto filmando il mio schermo proprio adesso!
Crea un'app desktop o Web che ti consenta di acquisire lo schermo e salvare la clip con nome .gif
Qui come raggiungere questo obiettivo.
fonti
Fonte: habr.com