flash sale
close-icon
close-icon
Full-Stack Javascript Developer MERN

Rp 7,000,000 Rp 500,000

Premium Edition

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

Learn complete JavaScript and become Full-Stack Web Developer

Member

3,915 enrolled

Tingkatan
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!

Demo Project

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)

Sneak Peek

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

(32.8K)

Mentor Prawito Hudoro

Prawito Hudoro

Full-Stack Developer

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

(30.8K)

Mentor Angga Risky

Angga Risky

Full-Stack Developer

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

(380.5K)

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

Visual Studio Code

Software Gratis

Download Now

Node JS

Software Gratis

Download Now

Figma

Software Gratis

Download Now

Next JS

Software Gratis

Download Now

Vercel

Software Gratis

Download Now

3,915 Happy Members

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

fakhrisyafrullah at BuildWith Angga
Fakhrisyafrull

Full-Stack Developer

Mantap

read more
ic-star ic-star ic-star ic-star ic-star
faulanspurba2 at BuildWith Angga
Faulanspurba2

Lifetime Learner

Mantap dan Mudah Dimengerti

read more
ic-star ic-star ic-star ic-star ic-star
rifkiardiansyah670 at BuildWith Angga
Rifkiardiansya

Lifetime Learner

good

read more
ic-star ic-star ic-star ic-star ic-star
riogore78 at BuildWith Angga
Riogore78

Full-Stack Developer

recommend!!!

read more
ic-star ic-star ic-star ic-star ic-star
wongpro651 at BuildWith Angga
Wongpro651

Full-Stack Developer

kelasnya keren dan mudah dimengerti

read more
ic-star ic-star ic-star ic-star ic-star
faizirrohman8500 at BuildWith Angga
Faizirrohman85

Full-Stack Developer

Materi sangat bermanfaat dan gampang untuk di pahami

read more
ic-star ic-star ic-star ic-star ic-star

Featured Projects

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

Belum ada hasil karya.

Are You The Next?

Lihat hasil karya member lainnya

View All Portfolio
#BeyondPremium

Start to Invest 100%

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

icon_check

Selamanya

Rp 720,000

Miliki kelas Premium secara permanen dan bangun sebuah projek nyata

icon_check

Akses kelas selamanya

icon_check

Assets & group konsultasi

icon_check

Tools pendukung belajar

icon_check

Sertifikat kelulusan

icon_check

Free update materi

icon_check

Free akses kelas Freemium

icon_check

Lowongan pekerjaan

Beli Kelas Lihat Benefit Lainnya
Jaminan Uang Kembali
Tidak perlu khawatir untuk mulai berinvestasi karena Anda bisa melakukan refund

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.

Kami telah menyediakan kelas yang terstruktur dan well-designed oleh mentor yang berpengalaman sehingga akan sangat mudah untuk dipahami oleh siapa saja.

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 BuildWith Angga. Silahkan 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 BuildWith Angga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.
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

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

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

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

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

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

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

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

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

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

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

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

  • Setup Basic SEO
    6 minutes
  • Local Build and Checking
    16 minutes
  • Save Project to Github Repository
    4 minutes
  • 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
Learn With Expert
Elfin Sanjaya
Elfin Sanjaya
Full-Stack Developer
rating-star rating-star rating-star rating-star rating-star
(32.8K)
Prawito Hudoro
Prawito Hudoro
Full-Stack Developer
rating-star rating-star rating-star rating-star rating-star
(30.8K)
Angga Risky
Angga Risky
Full-Stack Developer
rating-star rating-star rating-star rating-star rating-star
(380.5K)
Key Points
  • Mendeploy project ke Vercel (Front-End) dan Heroku (Back-End)
  • Mengintegrasikan NodeJS REST API dengan ReactJS (NextJS)
  • Membuat fitur Sign Up dan Sign In
  • Membuat CRUD yang mencakup login dengan JWT
  • Membuat Storybook untuk membangun component library pada React
  • Mengolah database dengan MongoDB
  • Melakukan konversi HTML ke NextJS
  • Memahami pengembangan website secara utuh (Front-End dan Back-End)
Created For
  • Anda yang ingin menjadi Full-Stack Developer
  • Anda yang ingin menjadi Javascript Developer
  • Anda yang ingin membangun portofolio web yang scalable dan menjual
  • Anda yang ingin membangun fitur Register dan Login pada website
  • Anda yang ingin membangun website dengan high quality design
  • Anda yang ingin menguasai pengembangan website
For Your Career
Akses Selamanya
Belajar lebih santai & produktif
Akses Offline 100%
Belajar tanpa koneksi internet
Assets & Grup Private
Diskusi belajar agar lebih terarah
Sertifikat & Portfolio
Gunakan untuk modal bekerja
Akses Freemium Courses
Sehingga lebih up to date
3,915
Happy Students
fakhrisyafrullah at BuildWith Angga
fakhrisyafrullah

Full-Stack Developer

Mantap

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
faizirrohman8500 at BuildWith Angga
faizirrohman8500

Full-Stack Developer

Materi sangat bermanfaat dan gampang untuk di pahami

ic-star ic-star ic-star ic-star ic-star
Tools Pendukung
Visual Studio Code
Visual Studio Code
Software Gratis
Node JS
Node JS
Software Gratis
Figma
Figma
Software Gratis
Next JS
Next JS
Software Gratis
Vercel
Vercel
Software Gratis

Rp 720,000

arrow_upward