15 interessanti progetti Full Stack su GitHub per principianti [2022]

Pubblicato: 2021-01-06

Lo sviluppo full-stack coinvolge sia il software client che quello server. Per fare una carriera di successo come sviluppatore web, avresti bisogno della conoscenza dello sviluppo front-end e back-end. I progetti full-stack su GitHub offrono un modo fantastico per apprendere e sviluppare le tue capacità di sviluppo. L'implementazione di un progetto full-stack ti aiuterebbe a padroneggiare HTML e CSS mentre raffini le tue capacità di programmazione relative a:

  • Browser (usando jQuery, Angular, JavaScript, Vue, ecc.)
  • Server (utilizzando PHP, Python, Node, ecc.)
  • Database (utilizzando SQL, SQLite, MongoDB, ecc.)

Inoltre, lo sviluppo full-stack è una professione molto richiesta. Poiché gli sviluppatori conoscono le ultime tecnologie e tutti gli aspetti delle tecniche utilizzate, possono realizzare rapidamente un prototipo e supportare altri membri del team. In questo modo, abili sviluppatori full-stack riducono il costo complessivo del progetto e consentono una comunicazione efficiente del team.

Sommario

Progetti full-stack su GitHub

Impara a creare applicazioni come Swiggy, Quora, IMDB e altro

1. Tocca Notizie

È un'app Web basata su React che consiglia automaticamente le notizie in base ai registri degli utenti. Fondamentalmente, TapNews raccoglie notizie da una varietà di fonti e applica l'apprendimento automatico per suggerire argomenti. Rimuove i duplicati utilizzando l'algoritmo TF-IDF e prevede argomenti di notizie utilizzando TensorFlow CNN. Inoltre, JSON-RPC aiuta la comunicazione tra più servizi di back-end.

2. Impilatore completo

Questo progetto utilizza un server Node.js con Express e Next.js per l'applicazione React. Serve come un solido boilerplate per progetti su larga scala e comprende una semplice struttura di organizzazione delle cartelle. Fullstackinator incorpora Redux per la gestione globale dello stato e una configurazione Typescript nei file del server e del client. Quindi, puoi dare un'occhiata a questo progetto open source per ottenere maggiore chiarezza sul funzionamento di Node.js, Next.js, Typescript, Redux e componenti di stile.

3. PostVapoRS

PostVapoRS si riferisce allo stack completo con PostgreSQL, Vapor, React e Swift. Questo progetto GitHub prevede anche i seguenti strumenti di sviluppo back-end e front-end:

  • MySQL
  • SQLite
  • MariaDB
  • JavaScript
  • jQuery
  • Reagire
  • Vue
  • Angolare
  • Svelto
  • Popper, ecc.

4. MongoVapoRS

Questo progetto è abbastanza simile all'idea di cui sopra, ma utilizza MongoDB invece di PostgreSQL. Puoi replicare MongoVapoRS per familiarizzare con lo sviluppo di database, i driver di database, i framework di applicazioni e le librerie. Quindi, accedi al codice e fai pratica!

5. Anche PPM full-stack

Puoi trovare il codice di questo strumento personale di gestione dei progetti qui , disponibile gratuitamente su GitHub. È stato creato utilizzando React e SpringBoot. Il progetto full-stack-ppm-tool ha le seguenti funzionalità:

  • Caratteristiche di registrazione e login dell'utente
  • Autenticazione utente tramite token JWT
  • Operazioni CRUD

6. Codifica AI

Questo progetto innovativo gode di una vasta comunità di contributori. CodingAI è un eccellente esempio di applicazione full-stack che consente agli sviluppatori di trovare mentori relativi al loro stack tecnologico. La sua documentazione di progetto completa può aiutarti a conoscere React, CSS, Redux e lo sviluppo reattivo.

7. Catalogo articoli

Un tipico progetto di catalogo articoli fornisce un elenco di articoli in diverse categorie e consiste nella registrazione dell'utente e nel sistema di autenticazione. Questo repository GitHub include tutte queste funzionalità e le copre in dettaglio. Il progetto del catalogo articoli è stato creato con HTML5, Bootstrap, SQLAlchhemy, Vagrant e Flask. Consente inoltre l'accesso social OAuth2 con Google e Facebook.

Dopo l'accesso, gli utenti possono selezionare articoli specifici per raccogliere informazioni sul prodotto. Possono anche aggiungere, modificare ed eliminare informazioni sugli elementi. Al momento del logout, la home page appare vuota, senza elementi aggiunti.

Il progetto indica anche possibilità di miglioramento nella progettazione del layout e nell'implementazione della protezione CSRF sulle operazioni CRUD. Se hai già una certa esperienza in questo settore, potrebbe valere la pena provare.

8. Esercitazione completa

Puoi seguire questo tutorial per capire come implementare un'app CRUD usando JavaScript (React) per il front-end e Python (Flask) per il back-end. I prerequisiti per lo sviluppo da zero includono Node.js e Anaconda (Python 3). Un tutorial sull'app può rivelarsi utile per i principianti che altrimenti potrebbero essere intimiditi dall'iniziare da soli.

9. Senti

Feel è un'applicazione open source che offre una soluzione progressiva per affrontare il problema dell'ansia umana. Collega persone che hanno vissuto situazioni di vita simili e indica post relativi a libri, cibo, giochi, film e musica. In questo modo, crea uno spazio sicuro per condividere i problemi e persino fornire una distrazione quotidiana ad alcune persone. Ecco uno sguardo al contenuto tecnico dell'applicazione Feel:

  • Back-end: NodeJS, Express e MongoDB
  • Front-end: ReactJs e molte altre dipendenze
  • Mobile: Expo e React Native

10. Mappa del quartiere di Berlino

È un'applicazione web a pagina singola che mostra una mappa del tuo quartiere. Con questo progetto di mappa, evidenzi luoghi, identifichi luoghi popolari con indicatori di mappa, aggiungi dati di terze parti e includi una funzione di ricerca e una visualizzazione elenco di tutte le posizioni. Puoi affinare le tue abilità di KnockoutJS e API di Google Maps replicando il codice di questo progetto.

11. Governante

L'applicazione web Housekeeper consente agli studenti di programmare i servizi di pulizia per le stanze dell'ostello. Dal momento che gli studenti hanno orari di lezione variabili, pulire le loro stanze in tempo e in modo efficiente in termini di risorse è una sfida significativa. Questo progetto affronta questo problema direttamente attraverso la progettazione dello schema del database e le sue app Web front-end e back-end. Il codice sorgente per tutti e tre i segmenti è disponibile nel repository.

12. Sistema di gestione dell'ospedale

Questo progetto GitHub utilizza i seguenti linguaggi e tecnologie:

  • HTML5/CSS3
  • PHP
  • Bootstrap
  • Javascript (per aggiornare i contenuti in modo dinamico)
  • XAMPP (un server web di Apache Friends)
  • TCPDF (software open source per la generazione di PDF)

Puoi eseguire questo progetto sul tuo computer per capire come funziona e familiarizzare con le sue complessità. Dovresti installare XAMPP nella tua macchina e idealmente utilizzare Sublime Text come editor di testo e Google Chrome per eseguire il progetto.

13. Clona BookMyShow

Se vuoi imparare a usare Django, questo progetto fa per te. Questo repository GitHub ti offre una replica completa dello stack di Book My Show con i seguenti elementi:

  • Pagina filtro film
  • Pagina dei dettagli del film
  • Elenco dei teatri/sale cinematografiche
  • Pagina di prenotazione

14. Blog sul cibo giapponese

Questo repository GitHub ha il codice sorgente del sito Web di J Food Blogger. Lo stack tecnologico è stato creato utilizzando Node.js, Express, MongoDB, Bootstrap e Cloudinary. Le persone possono condividere esperienze culinarie giapponesi sul sito creando un profilo personale, caricando immagini, scrivendo blog, commentando, ecc. Gli utenti possono anche cercare post di loro interesse.

15. Veudo

È un esempio di un'applicazione di gestione delle attività che ti consente di organizzare le tue attività quotidiane e migliorare la tua produttività. Veudo utilizza lo stack PEVN, che consiste in PostgreSQL, Express, Vue e Node. Poiché i luoghi di lavoro adottano sempre più il modello del lavoro da casa, l'importanza delle app per le attività è in aumento. Puoi anche utilizzare tali app per tenere traccia delle faccende e delle responsabilità personali, come fare liste della spesa o impostare promemoria per i compleanni.

Impara: Django vs NodeJS: differenza tra Django e NodeJS

Impara i corsi di ingegneria del software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.

Avvolgendo

Con questo, abbiamo coperto un entusiasmante mix di idee che sarebbero utili per aspiranti sviluppatori web e studenti. L'elenco di cui sopra di progetti a stack completo su GitHub ti aiuterebbe a familiarizzare con le migliori pratiche di sviluppo e a rispolverare le tue competenze tecniche. Quindi, cimentati in un progetto completo e inizia il tuo viaggio di apprendimento oggi!

Se sei interessato a saperne di più su Javascript, lo sviluppo full-stack, dai un'occhiata al programma Executive PG di upGrad & IIIT-B in Full-stack Software Development, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi, status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.

Diventa uno sviluppatore full stack

Richiedi ora il programma Executive PG in Full Stack Development