Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Kelas Online
Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game

Learn complete JavaScript and become Full-Stack Web Developer

icon global
Release date August 2021
icon convert
Last updated October 2024
Member

4,336 enrolled

Tingkatan
level
Sertifikat
icon_check
Konsultasi
icon_check

Develop Your Skills

MERN Stack adalah pengembangan website dari Front-End sampai Back-End dengan memakai satu bahasa pemrograman yaitu Javascript. MERN adalah singkatan beberapa teknologi pengembangan yang powerful: M untuk MongoDB (Database); E untuk Express (Framework); R untuk ReactJS (FE); dan N untuk NextJS (FE) dan NodeJS (core BE).

Faktanya, Javascript telah dikenal sangat populer dan fleksibel karena dapat digunakan bersamaan dengan bahasa pemrograman lain. Mampu bekerja pada sisi FE dan BE sekaligus, Javascript dapat menciptakan tampilan website menarik dan mengatur logika data dengan baik. Di dunia pemrograman, Javascript telah banyak memberikan bermanfaat selama 25 tahun, dan memahami Javascript melalui kelas ini dapat menjadi investasi yang berharga untuk karir Anda sebagai Developer dalam jangka panjang.

Pada kelas ini, kita akan membuat project yang kompleks berupa website top up game “STORE GG”. Materi dimulai dari sisi FE antara lain mengubah template HTML desain yang sudah kita slicing ke dalam NextJS. Untuk mengelola data berskala besar dengan mudah, library component akan diatur sesuai prinsip Atomic Design. Pada sisi BE, framework utama NodeJS digunakan untuk proses routing, middleware, database integration hingga testing. CRUD (Create, Read, Update, Delete) juga akan digunakan untuk mengatur konten database sesuai kebutuhan. Lalu integrasi API diimplementasikan pada kedua sisi guna memungkinkan akses data pada satu server yang sama. Setelah selesai, project disimpan di GitHub dan diunggah ke platform real-time untuk memudahkan update data di kemudian hari.

Kelas ini cocok bagi Anda yang ingin mendalami pengembangan website dengan Javascript. Dengan mengetahui keseluruhan prosesnya dengan baik dan benar, kita dapat meningkatkan skill sebagai Developer dan tentunya aplikasi yang dihasilkan kedepannya akan semakin berkualitas. Agar belajar lebih mudah, harap pahami terlebih dulu fundamental Javascript, React, dan Database. Dan silahkan juga bertanya kepada Mentor ahli kami di grup konsultasi. Daftar sekarang dan sampai jumpa di kelas!

Sneak Peek

Key Points

icon_check

Mendeploy project ke Vercel (Front-End) dan Heroku (Back-End)

icon_check

Mengintegrasikan NodeJS REST API dengan ReactJS (NextJS)

icon_check

Membuat fitur Sign Up dan Sign In

icon_check

Membuat CRUD yang mencakup login dengan JWT

icon_check

Membuat Storybook untuk membangun component library pada React

icon_check

Mengolah database dengan MongoDB

icon_check

Melakukan konversi HTML ke NextJS

icon_check

Memahami pengembangan website secara utuh (Front-End dan Back-End)

Designed For

icon_check

Anda yang ingin menjadi Full-Stack Developer

icon_check

Anda yang ingin menjadi Javascript Developer

icon_check

Anda yang ingin membangun portofolio web yang scalable dan menjual

icon_check

Anda yang ingin membangun fitur Register dan Login pada website

icon_check

Anda yang ingin membangun website dengan high quality design

icon_check

Anda yang ingin menguasai pengembangan website

Course Lessons

Learn With Expert

Mentor Elfin Sanjaya

Elfin Sanjaya

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star

(37.7K)

Mentor Prawito Hudoro

Prawito Hudoro

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star

(35.7K)

Mentor Angga Risky S

Angga Risky S

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star

(415.3K)

Our Happy Students

Review setelah bergabung di kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game

All Rating
Uray M Y at BuildWithAngga
Uray M Y

Full-Stack Developer

terbaik read more

ic-star ic-star ic-star ic-star ic-star
Prastowo Adi at BuildWithAngga
Prastowo Adi

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star
Rifan Hilmie at BuildWithAngga
Rifan Hilmie

Full-Stack Developer

Materi yang lengkap dan terstruktur memudahkan saya untuk memahami materi secara komprehensif read more

ic-star ic-star ic-star ic-star ic-star
Ihwanul Hakim at BuildWithAngga
Ihwanul Hakim

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star
Januar Maksum at BuildWithAngga
Januar Maksum

Full-Stack Developer

Instruktur cukup jelas dalam menyampaikan materi, rekomended untuk kelas fullstack javascript read more

ic-star ic-star ic-star ic-star ic-star
Eky Zulianto Arif at BuildWithAngga
Eky Zulianto Arif

Full-Stack Developer

Kelas yang sangat Lengkap sekali materinya, tidak hanya belajar Frontend tapi juga belajar Backend sampai deployment dengan menggunakan Vercel. Terima kasih untuk para mentor yang sudah membagikan ilmunya. read more

ic-star ic-star ic-star ic-star ic-star
Belum ada review
loader
Load More Reviews

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

logo

Visual Studio Code

Software Gratis

logo

Node JS

Software Gratis

logo

Figma

Software Gratis

logo

Next JS

Software Gratis

logo

Vercel

Software Gratis

#BeyondPremium
Tampaknya kelas ini sedang menutup pendaftaran baru.
Silahkan menunggu pendaftaran batch selanjutnya.
Similar Courses
Foto kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game Foto kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game Foto kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game

Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game

Learn complete JavaScript and become Full-Stack Web Developer

  • play
  • lock
    Convert Landing Page
    20 minutes
  • lock
    Convert Detail Page
    7 minutes
  • lock
    Convert Checkout Page
    3 minutes
  • lock
    Convert Completed Checkout
    3 minutes
  • lock
    Convert Sign In Page
    3 minutes
  • lock
    Convert Sign Up Page
    2 minutes
  • lock
    Convert Sign Up Photo Page
    2 minutes
  • lock
    Convert Sign Up Success Page
    2 minutes
  • lock
    Convert 404 Page
    2 minutes
  • lock
    Convert Member Overview Page
    5 minutes
  • lock
    Convert Member Transactions Page
    3 minutes
  • lock
    Convert Member Transaction Detail Page
    3 minutes
  • lock
    Convert Member Edit Profile
    2 minutes

  • play
  • lock
    Refactor Navbar to Organisms
    21 minutes
  • lock
    Refactor Login Navbar Component
    10 minutes
  • lock
    Refactor Main Banner Component
    5 minutes
  • lock
    Refactor Transaction Step Component
    12 minutes
  • lock
    Refactor Featured Game Component
    12 minutes
  • lock
    Refactor Reached, Story, Footer
    5 minutes
  • lock
    Refactor Detail Page
    7 minutes
  • lock
    Refactor Checkout Page
    7 minutes
  • lock
    Refactor Authentication Page
    8 minutes
  • lock
    Refactor Member Sidebar
    16 minutes
  • lock
    Refactor Overview Content
    18 minutes
  • lock
    Refactor Edit Profile
    12 minutes
  • lock
    Refactor Member Transaction
    13 minutes
  • lock
    Refactor Member Transaction Detail
    7 minutes

  • lock
    Storybook Introduction
    5 minutes
  • lock
    Component Input Stories
    10 minutes
  • lock
    Global Style di Storybook
    5 minutes
  • lock
    Molecules Stories
    14 minutes

  • lock
    Mengenal NodeJS
    1 minutes
  • lock
    Konfigurasi dan Instalasi NodeJS
    3 minutes
  • lock
    Mengenal NPM
    2 minutes
  • lock
    Membuat projek baru
    7 minutes
  • lock
    Membuat module
    3 minutes
  • lock
    Module NPM
    4 minutes
  • lock
    Membuat Scripts di package.json
    2 minutes
  • lock
    Menangani routing
    3 minutes
  • lock
    Framework di NodeJS
    2 minutes
  • lock
    Kesimpulan
    1 minutes

  • lock
    Mengenal framework ExpressJS
    5 minutes
  • lock
    Routing pada ExpressJS
    17 minutes
  • lock
    Middleware pada Express JS
    5 minutes
  • lock
    Kesimpulan
    1 minutes

  • lock
    Instalasi dan konfigurasi MongoDB
    5 minutes
  • lock
    Query dasar MongoDB
    13 minutes
  • lock
    Kesimpulan
    1 minutes

  • lock
    Konfigurasi MongoDB & ExpressJS
    4 minutes
  • lock
    Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 1
    7 minutes
  • lock
    Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 2
    9 minutes
  • lock
    Mengenal ODM pada MongoDB→Part 1
    10 minutes
  • lock
    Mengenal ODM pada MongoDB→Part 2
    6 minutes
  • lock
    Menerapkan Mongoose pada ExpressJS
    11 minutes
  • lock
    Kesimpulan
    1 minutes

  • lock
    Membuat project baru dengan Express Generator dan konfigurasi awal→Part 1
    10 minutes
  • lock
    Membuat project baru dengan Express Generator dan konfigurasi awal→Part2
    6 minutes
  • lock
    Instalasi adminLTE dan konfigurasi template admin
    12 minutes
  • lock
    Convert adminLTE kedalam halaman kategori
    8 minutes
  • lock
    Mengelola halaman kategori (CRUD)→ Create
    12 minutes
  • lock
    Mengelola halaman kategori (CRUD)→Read
    4 minutes
  • lock
    Mengelola halaman kategori (CRUD)→ Update
    10 minutes
  • lock
    Mengelola halaman kategori (CRUD)→Delete
    3 minutes
  • lock
    Notif (connect-flash, express-session) & Title Dinamis
    11 minutes
  • lock
    Mengelola halaman nominal (CRUD)→Craete
    11 minutes
  • lock
    Mengelola halaman nominal (CRUD)→Read
    2 minutes
  • lock
    Mengelola halaman nominal (CRUD)→Update
    4 minutes
  • lock
    Mengelola halaman nominal (CRUD)→Delete
    2 minutes
  • lock
    Mengelola halaman voucher (CRUD)→Part 1 Create
    14 minutes
  • lock
    Mengelola halaman voucher (CRUD)→Part 2 Create
    11 minutes
  • lock
    Mengelola halaman voucher (CRUD)→Read
    9 minutes
  • lock
    Mengelola halaman voucher (CRUD)→ Update
    12 minutes
  • lock
    Mengelola halaman voucher (CRUD)→Delete
    2 minutes
  • lock
    Mengelola halaman voucher (CRUD)→ Update Status
    3 minutes
  • lock
    Mengelola halaman bank (CRUD)→ Create
    7 minutes
  • lock
    Mengelola halaman bank (CRUD) Part 2 Read
    2 minutes
  • lock
    Mengelola halaman bank (CRUD) Part 3 Update
    4 minutes
  • lock
    Mengelola halaman bank (CRUD) Part 4 Delete
    1 minutes
  • lock
    Mengelola halaman payment (CRUD) Part 1 Create
    8 minutes
  • lock
    Mengelola halaman payment (CRUD) Part 2 Read
    3 minutes
  • lock
    Mengelola halaman payment (CRUD) Part 3 Update
    5 minutes
  • lock
    Mengelola halaman payment (CRUD) Part 4 Delete
    1 minutes
  • lock
    Mengelola halaman signin admin
    4 minutes
  • lock
    Action signin admin dan middleware auth
    17 minutes
  • lock
    Membuat logout, menampilkan user yang login dan title dinamis
    9 minutes
  • lock
    Mengelola halaman transaksi
    24 minutes
  • lock
    Konfirmasi Transaksi dan Tolak Transaksi
    4 minutes
  • lock
    Mengelola halaman beranda
    11 minutes
  • lock
    Review halaman admin
    3 minutes

  • lock
    Membuat api landing page
    10 minutes
  • lock
    Membuat api detail page
    5 minutes
  • lock
    Membuat api signup
    17 minutes
  • lock
    Membuat api category
    2 minutes
  • lock
    Membuat api signin
    8 minutes
  • lock
    Membuat api checkout
    24 minutes
  • lock
    Membuat api history transaksi
    9 minutes
  • lock
    Membuat api detail history transaksi
    4 minutes
  • lock
    Membuat api dashbaord
    8 minutes
  • lock
    Membuat api read profile
    5 minutes
  • lock
    Membuat api ubah profile
    14 minutes
  • lock
    Membuat dokumentasi api dengan postman dan Install cors
    4 minutes

  • lock
    Simpan projek kedalam github
    4 minutes
  • lock
    Deploy ke Heroku
    20 minutes

  • lock
    Menjalankan API documentation di Postman
    4 minutes
  • lock
    Sample Integration di NextJS
    13 minutes
  • lock
    Membuat configurasi API services
    12 minutes
  • lock
    Membuat API data types
    6 minutes
  • lock
    Setup routing dinamis voucher detail
    7 minutes
  • lock
    Integrasi Voucher Detail
    11 minutes
  • lock
    Setup Nominal dan Payment Component
    11 minutes
  • lock
    Integrasi Nominal dan Payment
    9 minutes
  • lock
    Setup Number Format
    4 minutes
  • lock
    Membuat Voucher Data Types
    5 minutes
  • lock
    Setup Sign-Up Form
    14 minutes
  • lock
    Mendapatkan Value Select Option
    10 minutes
  • lock
    Upload Photo dan Integrasi Sign-Up
    19 minutes
  • lock
    Validasi Sign-up dan Error Modal
    12 minutes
  • lock
    Integrasi Sign-In Page
    17 minutes
  • lock
    Refactor pemanggilan API
    11 minutes
  • lock
    Memporses JWT (JSON Web Token)
    16 minutes
  • lock
    Membuat Kondisi Login di Navbar
    12 minutes
  • lock
    Membuat Fungsi Logout
    8 minutes
  • lock
    Menghandle private Route di NextJS
    17 minutes
  • lock
    Memperbaiki URL avatar
    4 minutes
  • lock
    Setup Data Checkout
    8 minutes
  • lock
    Setup Data Checkout Part 2
    14 minutes
  • lock
    Global Toast
    5 minutes
  • lock
    Integrasi Game Item
    6 minutes
  • lock
    Purchase and Payment Info
    12 minutes
  • lock
    Mempersiapkan data untuk API Checkout
    8 minutes
  • lock
    Integrasi Checkout API
    13 minutes
  • lock
    Memperbaiki Routing Setelah Checkout
    4 minutes
  • lock
    Setup private route member
    4 minutes
  • lock
    Integrasi Sidebar Profile User
    5 minutes
  • lock
    Integrasi Member Overview Category
    10 minutes
  • lock
    Integrasi Latest Transaction
    9 minutes
  • lock
    Merapikan integrasi Member Overview
    13 minutes
  • lock
    Private Route Member Transaction
    8 minutes
  • lock
    Integrasi Total Transaction
    8 minutes
  • lock
    Integrasi Table Transaction
    7 minutes
  • lock
    Maping data API ke Table Integration
    9 minutes
  • lock
    Setup Dynamic Routes
    5 minutes
  • lock
    Membuat Service Transaction Detail
    11 minutes
  • lock
    Integrasi Item detail dan Purchase detail
    8 minutes
  • lock
    Integrasi Payment Information
    5 minutes
  • lock
    Setup Local Data untuk Form Profile
    7 minutes
  • lock
    Setup Form dan Upload Image
    6 minutes
  • lock
    Integrasi Edit Profile
    8 minutes
  • lock
    Update Voucher Page ( getStaticPaths & getStaticProps )
    13 minutes
  • lock
    Bug Fix Checkout Page
    4 minutes

  • lock
    Setup Basic SEO
    6 minutes
  • lock
    Local Build and Checking
    16 minutes
  • lock
    Save Project to Github Repository
    4 minutes
  • lock
    Deploy Project ke Vercel
    5 minutes
Develop Your Skills

MERN Stack adalah pengembangan website dari Front-End sampai Back-End dengan memakai satu bahasa pemrograman yaitu Javascript. MERN adalah singkatan beberapa teknologi pengembangan yang powerful: M untuk MongoDB (Database); E untuk Express (Framework); R untuk ReactJS (FE); dan N untuk NextJS (FE) dan NodeJS (core BE).

Faktanya, Javascript telah dikenal sangat populer dan fleksibel karena dapat digunakan bersamaan dengan bahasa pemrograman lain. Mampu bekerja pada sisi FE dan BE sekaligus, Javascript dapat menciptakan tampilan website menarik dan mengatur logika data dengan baik. Di dunia pemrograman, Javascript telah banyak memberikan bermanfaat selama 25 tahun, dan memahami Javascript melalui kelas ini dapat menjadi investasi yang berharga untuk karir Anda sebagai Developer dalam jangka panjang.

Pada kelas ini, kita akan membuat project yang kompleks berupa website top up game “STORE GG”. Materi dimulai dari sisi FE antara lain mengubah template HTML desain yang sudah kita slicing ke dalam NextJS. Untuk mengelola data berskala besar dengan mudah, library component akan diatur sesuai prinsip Atomic Design. Pada sisi BE, framework utama NodeJS digunakan untuk proses routing, middleware, database integration hingga testing. CRUD (Create, Read, Update, Delete) juga akan digunakan untuk mengatur konten database sesuai kebutuhan. Lalu integrasi API diimplementasikan pada kedua sisi guna memungkinkan akses data pada satu server yang sama. Setelah selesai, project disimpan di GitHub dan diunggah ke platform real-time untuk memudahkan update data di kemudian hari.

Kelas ini cocok bagi Anda yang ingin mendalami pengembangan website dengan Javascript. Dengan mengetahui keseluruhan prosesnya dengan baik dan benar, kita dapat meningkatkan skill sebagai Developer dan tentunya aplikasi yang dihasilkan kedepannya akan semakin berkualitas. Agar belajar lebih mudah, harap pahami terlebih dulu fundamental Javascript, React, dan Database. Dan silahkan juga bertanya kepada Mentor ahli kami di grup konsultasi. Daftar sekarang dan sampai jumpa di kelas!

read more
Key Points
  • check
    Mendeploy project ke Vercel (Front-End) dan Heroku (Back-End)
  • check
    Mengintegrasikan NodeJS REST API dengan ReactJS (NextJS)
  • check
    Membuat fitur Sign Up dan Sign In
  • check
    Membuat CRUD yang mencakup login dengan JWT
  • check
    Membuat Storybook untuk membangun component library pada React
  • check
    Mengolah database dengan MongoDB
  • check
    Melakukan konversi HTML ke NextJS
  • check
    Memahami pengembangan website secara utuh (Front-End dan Back-End)
Created For
  • check
    Anda yang ingin menjadi Full-Stack Developer
  • check
    Anda yang ingin menjadi Javascript Developer
  • check
    Anda yang ingin membangun portofolio web yang scalable dan menjual
  • check
    Anda yang ingin membangun fitur Register dan Login pada website
  • check
    Anda yang ingin membangun website dengan high quality design
  • check
    Anda yang ingin menguasai pengembangan website
For Your Career
phone
Akses Selamanya
Belajar lebih santai & produktif
private
Assets & Grup Private
Diskusi belajar agar lebih terarah
project
Sertifikat & Portfolio
Gunakan untuk modal bekerja
4,336
Happy Students
Uray M Y at BuildWithAngga
Uray M Y

Full-Stack Developer

terbaik

ic-star ic-star ic-star ic-star ic-star
Prastowo Adi at BuildWithAngga
Prastowo Adi

Full-Stack Developer

mantap

ic-star ic-star ic-star ic-star ic-star
Rifan Hilmie at BuildWithAngga
Rifan Hilmie

Full-Stack Developer

Materi yang lengkap dan terstruktur memudahkan saya untuk memahami materi secara komprehensif

ic-star ic-star ic-star ic-star ic-star
Ihwanul Hakim at BuildWithAngga
Ihwanul Hakim

Full-Stack Developer

Nice

ic-star ic-star ic-star ic-star ic-star
Januar Maksum at BuildWithAngga
Januar Maksum

Full-Stack Developer

Instruktur cukup jelas dalam menyampaikan materi, rekomended untuk kelas fullstack javascript

ic-star ic-star ic-star ic-star ic-star
Eky Zulianto Arif at BuildWithAngga
Eky Zulianto Arif

Full-Stack Developer

Kelas yang sangat Lengkap sekali materinya, tidak hanya belajar Frontend tapi juga belajar Backend sampai deployment dengan menggunakan Vercel. Terima kasih untuk para mentor yang sudah membagikan ilmunya.

ic-star ic-star ic-star ic-star ic-star
loader

Pertanyaan Umum

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

Contact CS

Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels yang memberartikan bahwa cocok untuk seluruh tingkatan. Kami juga menyarankan calon member untuk mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.

Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan untuk mendapatkannya, para member diwajibkan untuk menyelesaikan seluruh materi kelas dan juga Quiz yang telah disediakan oleh mentor.

Salah satu benefit unggulan kami adalah group konsultasi yang diberikan sebagai bonus untuk member yang telah mengikuti kelas Premium di platform BuildWithAngga. Silakan menghubungi Admin untk mendapatkan akses pada group tersebut.

Kami mengizinkan member yang telah mengikuti kelas Premium untuk menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat utamanya adalah dengan memodifikasi sedikitnya yaitu 30% dari original project buatan mentor kelas tersebut.

Kami melarang member menjual atau membagikan hak akses kelas Premium kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari kita support creators Indonesia dengan cara membeli kelas secara resmi dan satu akun hanya untuk satu pengguna saja.

Kami tidak memperbolehkan member menjual kembali materi kelas di BuildWithAngga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.

Silahkan menunggu pendaftaran batch selanjutnya

arrow_upward