15 Proyek Full Stack Menarik di GitHub Untuk Pemula [2022]

Pengembangan tumpukan penuh melibatkan perangkat lunak klien dan server. Untuk membuat karier yang sukses sebagai pengembang web, Anda memerlukan pengetahuan tentang pengembangan ujung depan dan ujung belakang. Proyek full-stack di GitHub menawarkan cara hebat untuk belajar dan membangun keterampilan pengembangan Anda. Menerapkan proyek tumpukan penuh akan membantu Anda menguasai HTML dan CSS sambil menyempurnakan kemampuan pemrograman Anda terkait dengan:

• Browser (menggunakan jQuery, Angular, JavaScript, Vue, dll.)
• Server (menggunakan PHP, Python, Node, dll.)
• Basis data (menggunakan SQL, SQLite, MongoDB, dll.)

Selain itu, pengembangan tumpukan penuh adalah profesi yang sangat diminati. Karena pengembang mengetahui tentang teknologi terbaru dan semua aspek teknik yang digunakan, mereka dapat membuat prototipe dengan cepat dan mendukung anggota tim lainnya. Dengan cara ini, pengembang tumpukan penuh yang terampil mengurangi biaya proyek secara keseluruhan dan memungkinkan komunikasi tim yang efisien.

Proyek tumpukan penuh di GitHub

1. Ketuk Berita

Ini adalah aplikasi web berbasis React yang secara otomatis merekomendasikan berita berdasarkan log pengguna. Pada dasarnya, TapNews mengumpulkan berita dari berbagai sumber dan menerapkan pembelajaran mesin untuk menyarankan topik. Ini menghapus duplikat menggunakan algoritme TF-IDF dan memprediksi topik berita menggunakan TensorFlow CNN. Selanjutnya, JSON-RPC membantu komunikasi antara beberapa layanan backend.

2. Fullstackinator

Proyek ini menggunakan server Node.js dengan Express dan Next.js untuk aplikasi React. Ini berfungsi sebagai boilerplate yang solid untuk proyek skala besar dan terdiri dari struktur organisasi folder sederhana. Fullstackinator menggabungkan Redux untuk manajemen keadaan global dan pengaturan TypeScript di file server dan klien. Jadi, Anda dapat melihat proyek sumber terbuka ini untuk mendapatkan kejelasan lebih lanjut tentang cara kerja Node.js, Next.js, TypeScript, Redux, dan komponen gaya.

3. PascaVapoRS

PostVapoRS mengacu pada tumpukan penuh dengan PostgreSQL, Vapor, React, dan Swift. Proyek GitHub ini juga merupakan alat pengembangan backend dan front-end berikut:

• MySQL
• SQLite
• MariaDB
• JavaScript
• jQuery
• Reaksi
• Vue
• sudut
• Langsing
• Popper, dll.

4. MongoVapoRS

Proyek ini sangat mirip dengan ide di atas, tetapi menggunakan MongoDB bukan PostgreSQL. Anda dapat mereplikasi MongoVapoRS untuk membiasakan diri dengan pengembangan basis data, driver basis data, kerangka kerja aplikasi, dan pustaka. Jadi, akses kodenya dan berlatihlah!

5. PPM tumpukan penuh juga

Anda dapat menemukan kode alat manajemen proyek pribadi ini di sini , tersedia secara gratis di GitHub. Itu telah dibangun menggunakan React dan SpringBoot. Proyek full-stack-ppm-tool memiliki fungsi berikut:

• Fitur pendaftaran dan login pengguna
• Otentikasi pengguna melalui Token JWT
• operasi CRUD

6. PengkodeanAI

Proyek inovatif ini memiliki komunitas kontributor yang besar. CodingAI adalah contoh yang sangat baik dari aplikasi full-stack yang memungkinkan pengembang untuk menemukan mentor yang terkait dengan tumpukan teknologi mereka. Dokumentasi proyeknya yang komprehensif dapat membantu Anda mempelajari tentang React, CSS, Redux, dan pengembangan responsif.

7. Katalog Barang

Proyek katalog item yang khas menyediakan daftar item di bawah kategori yang berbeda dan terdiri dari pendaftaran pengguna dan sistem otentikasi. Repositori GitHub ini mencakup semua fitur ini dan mencakupnya secara mendetail. Proyek katalog item telah dibangun dengan HTML5, Bootstrap, SQLAlchhemy, Vagrant, dan Flask. Ini juga memungkinkan login sosial OAuth2 dengan Google dan Facebook.

Setelah masuk, pengguna dapat memilih item tertentu untuk mengumpulkan informasi produk. Mereka juga dapat menambah, mengedit, dan menghapus informasi item. Setelah keluar, halaman beranda tampak kosong, tanpa item yang ditambahkan.

Proyek ini juga menunjukkan kemungkinan perbaikan dalam desain tata letak dan penerapan perlindungan CSRF pada operasi CRUD. Jika Anda sudah memiliki pengalaman di bidang ini, ini mungkin patut dicoba.

8. Tutorial tumpukan penuh

Anda dapat melalui tutorial ini untuk memahami cara mengimplementasikan aplikasi CRUD menggunakan JavaScript (React) untuk front-end dan Python (Flask) untuk backend. Prasyarat untuk pengembangan dari awal termasuk Node.js dan Anaconda (Python 3). Tutorial aplikasi terbukti bermanfaat bagi pemula yang mungkin terintimidasi untuk memulai sendiri.

9. Rasakan

Feel adalah aplikasi open-source yang menawarkan solusi progresif untuk mengatasi masalah kecemasan manusia. Ini menghubungkan orang-orang yang telah melalui situasi kehidupan yang sama dan menunjukkan posting yang berhubungan dengan buku, makanan, permainan, film, dan musik. Dengan cara ini, ini menciptakan ruang yang aman untuk berbagi masalah dan bahkan memberikan gangguan harian kepada beberapa orang. Berikut adalah tampilan konten teknis dari aplikasi Feel:

• Bagian belakang: NodeJS, Express, dan MongoDB
• Ujung depan: ReactJs dan beberapa dependensi lainnya
• Seluler: Expo dan React Native

10. Peta Lingkungan Berlin

Ini adalah aplikasi web satu halaman yang menampilkan peta lingkungan Anda. Dengan proyek peta ini, Anda menyorot tempat, mengidentifikasi tempat populer dengan penanda peta, menambahkan data pihak ketiga, dan menyertakan fungsi pencarian dan tampilan daftar semua lokasi. Anda dapat menyempurnakan keterampilan KnockoutJS dan Google Maps API Anda dengan mereplikasi kode proyek ini.

11. Pengurus rumah tangga

Aplikasi web Housekeeper memungkinkan siswa menjadwalkan layanan pembersihan untuk kamar asrama mereka. Karena siswa memiliki waktu kelas yang berbeda-beda, membersihkan kamar mereka tepat waktu dengan cara yang hemat sumber daya merupakan tantangan yang signifikan. Proyek ini mengatasi masalah ini secara langsung melalui desain skema database dan aplikasi web front-end dan backend-nya. Kode sumber untuk ketiga segmen tersedia di repositori.

12. Sistem Manajemen Rumah Sakit

Proyek GitHub ini menggunakan bahasa dan teknologi berikut:

• HTML5/CSS3
• PHP
• Bootstrap
• Javascript (untuk memperbarui konten secara dinamis)
• XAMPP (Server web Apache Friends)
• TCPDF (perangkat lunak sumber terbuka untuk menghasilkan PDF)

Anda dapat menjalankan proyek ini di komputer Anda untuk mengetahui cara kerjanya dan membiasakan diri dengan seluk-beluknya. Anda perlu menginstal XAMPP di mesin Anda dan idealnya menggunakan Sublime Text sebagai editor teks dan Google Chrome untuk menjalankan proyek.

13. Klon BookMyShow

Jika anda ingin mempelajari bagaimana menggunakan Django, proyek ini adalah untuk anda. Repositori GitHub ini memberi Anda replika tumpukan penuh Book My Show dengan elemen-elemen berikut:

• Halaman Filter Film
• Halaman Detail Film
• Daftar Bioskop/Aula Bioskop
• Halaman Pemesanan

14. Blog Makanan Jepang

Repo GitHub ini memiliki kode sumber situs web J Food Blogger. Tumpukan teknologi telah dibangun menggunakan Node.js, Express, MongoDB, Bootstrap, dan Cloudinary. Orang-orang dapat berbagi pengalaman makanan Jepang di situs dengan membuat profil pribadi, mengunggah gambar, menulis blog, berkomentar, dll. Pengguna juga dapat mencari posting yang mereka minati.

15. Veudo

Ini adalah contoh aplikasi manajemen tugas yang memungkinkan Anda mengatur aktivitas sehari-hari dan meningkatkan produktivitas Anda. Veudo menggunakan tumpukan PEVN, yang terdiri dari PostgreSQL, Express, Vue, dan Node.js. Karena tempat kerja semakin mengadopsi model kerja dari rumah, relevansi aplikasi yang harus dilakukan meningkat. Anda juga dapat menggunakan aplikasi tersebut untuk melacak tugas dan tanggung jawab pribadi, seperti membuat daftar belanja atau menyetel pengingat untuk ulang tahun.

Pelajari: Django vs NodeJS: Perbedaan Antara Django dan NodeJS

Pelajari Kursus Rekayasa Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Membungkus

Dengan ini, kami telah membahas campuran ide menarik yang akan berguna bagi calon pengembang web dan pelajar. Daftar proyek tumpukan penuh di atas di GitHub akan membantu Anda memahami praktik terbaik pengembangan dan meningkatkan kompetensi teknis Anda. Jadi, cobalah tangan Anda di proyek tumpukan penuh dan mulailah perjalanan belajar Anda hari ini!

Jika Anda tertarik untuk mempelajari lebih lanjut tentang Javascript, pengembangan tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek , dan penugasan, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.

Menjadi Pengembang Tumpukan Penuh

Daftar Sekarang untuk Program PG Eksekutif dalam Pengembangan Tumpukan Penuh