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 September 2023
Member

4,335 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

(35.8K)

Mentor Prawito Hudoro

Prawito Hudoro

Full-Stack Developer

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

(33.5K)

Our Happy Students

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

All Rating
Gafar Risky at BuildWith Angga
Gafar Risky

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star
Dani Hidayat at BuildWith Angga
Dani Hidayat

Lifetime Learner

kenapa bagian review ini harus refresh:) read more

ic-star ic-star ic-star ic-star ic-star
faulans purba at BuildWith Angga
Faulans purba

Lifetime Learner

Mantap dan Mudah Dimengerti read more

ic-star ic-star ic-star ic-star ic-star
Rifki Ardiansyah at BuildWith Angga
Rifki Ardiansyah

Lifetime Learner

ic-star ic-star ic-star ic-star ic-star
Rio Pambudi at BuildWith Angga
Rio Pambudi

Full-Stack Developer

recommend!!! read more

ic-star ic-star ic-star ic-star ic-star
Rayhan Alief Febryan at BuildWith Angga
Rayhan Alief Febryan

Full-Stack Developer

kelasnya keren dan mudah dimengerti read more

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

Featured Projects

27 Hasil karya terbaik di kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game

 member of BuildWith Angga

hernawana60

 member of BuildWith Angga

teguhharits21895

 member of BuildWith Angga

hernawana60

 member of BuildWith Angga

fajarhidayat21

 member of BuildWith Angga

achmadfazza

 member of BuildWith Angga

mundzirmuin

 member of BuildWith Angga

aryawardanna

 member of BuildWith Angga

ayisrhmn

 member of BuildWith Angga

ananletcol123

 member of BuildWith Angga

hmmiyelahtech728

 member of BuildWith Angga

rezarizqir

 member of BuildWith Angga

darwin-knowless

 member of BuildWith Angga

fiimaarif

 member of BuildWith Angga

rdy24

 member of BuildWith Angga

lahiardhan

 member of BuildWith Angga

asrudii

 member of BuildWith Angga

mohamad9albie367

 member of BuildWith Angga

tiyanattirmidzi20

 member of BuildWith Angga

riifkiramadhan2

 member of BuildWith Angga

khoirullohrafi2

 member of BuildWith Angga

nurhakikiajha340

 member of BuildWith Angga

hilmiyusuf197

 member of BuildWith Angga

fathurds

 member of BuildWith Angga

zaeroblitz

 member of BuildWith Angga

hiboedi8416

 member of BuildWith Angga

chairulikhsan2016

 member of BuildWith Angga

mramirid

Are You The Next?

Lihat hasil karya member lainnya

View All Portfolio
#BeyondPremium
Pendaftaran Sudah Ditutup.
Berikut Kelas Rekomendasi Kami.
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
access
Akses Freemium Courses
Sehingga lebih up to date
4,335
Happy Students
gafartok at BuildWith Angga
gafartok

Full-Stack Developer

mantap

ic-star ic-star ic-star ic-star ic-star
hidayatdani127 at BuildWith Angga
hidayatdani127

Lifetime Learner

kenapa bagian review ini harus refresh:)

ic-star ic-star ic-star ic-star ic-star
faulanspurba2 at BuildWith Angga
faulanspurba2

Lifetime Learner

Mantap dan Mudah Dimengerti

ic-star ic-star ic-star ic-star ic-star
rifkiardiansyah670 at BuildWith Angga
rifkiardiansyah670

Lifetime Learner

good

ic-star ic-star ic-star ic-star ic-star
riogore78 at BuildWith Angga
riogore78

Full-Stack Developer

recommend!!!

ic-star ic-star ic-star ic-star ic-star
wongpro651 at BuildWith Angga
wongpro651

Full-Stack Developer

kelasnya keren dan mudah dimengerti

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

Pendaftaran Kelas Ditutup

arrow_upward