Premium Edition

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

Learn complete JavaScript and become Full-Stack Web Developer

Member

2,450 enrolled

Tingkatan
Sertifikat
Konsultasi

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

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)

Sneak Peek

Designed 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

Learn With Expert

Angga Risky

Full-Stack Developer

Profile Mentor

Elfin Sanjaya

Full-Stack Developer

Profile Mentor

Prawito Hudoro

Full-Stack Developer

Profile Mentor

Course Prerequisite

Kami rekomendasikan untuk mempelajari kelas di bawah

Happy Learning

Materi kelas yang bermanfaat untuk karir kita

1

Pengenalan & Persiapan Kelas

play_circle

Perkenalan Mentor Product Designer Angga

1 mins

play_circle

Perkenalan Mentor Prawito

1 mins

lock

Installasi NextJS dan Project Structure

4 mins

lock

Installasi Storybook

3 mins

lock

Eslint Setup

3 mins

lock

VSCode Setup (Extensions & Shortcut)

5 mins

2

HTML to NextJS

play_circle

Convert HTML to React Introduction

4 mins

lock

Convert Landing Page

20 mins

lock

Convert Detail Page

7 mins

lock

Convert Checkout Page

3 mins

lock

Convert Completed Checkout

3 mins

lock

Convert Sign In Page

3 mins

lock

Convert Sign Up Page

2 mins

lock

Convert Sign Up Photo Page

2 mins

lock

Convert Sign Up Success Page

2 mins

lock

Convert 404 Page

2 mins

lock

Convert Member Overview Page

5 mins

lock

Convert Member Transactions Page

3 mins

lock

Convert Member Transaction Detail Page

3 mins

lock

Convert Member Edit Profile

2 mins

3

Atomic Design

play_circle

Atomic Design Structure Introduction

9 mins

lock

Refactor Navbar to Organisms

21 mins

lock

Refactor Login Navbar Component

10 mins

lock

Refactor Main Banner Component

5 mins

lock

Refactor Transaction Step Component

12 mins

lock

Refactor Featured Game Component

12 mins

lock

Refactor Reached, Story, Footer

5 mins

lock

Refactor Detail Page

7 mins

lock

Refactor Checkout Page

7 mins

lock

Refactor Authentication Page

8 mins

lock

Refactor Member Sidebar

16 mins

lock

Refactor Overview Content

18 mins

lock

Refactor Edit Profile

12 mins

lock

Refactor Member Transaction

13 mins

lock

Refactor Member Transaction Detail

7 mins

4

Storybook

lock

Storybook Introduction

5 mins

lock

Component Input Stories

10 mins

lock

Global Style di Storybook

5 mins

lock

Molecules Stories

14 mins

5

Mengenal NodeJS

lock

Mengenal NodeJS

1 mins

lock

Konfigurasi dan Instalasi NodeJS

3 mins

lock

Mengenal NPM

2 mins

lock

Membuat projek baru

7 mins

lock

Membuat module

3 mins

lock

Module NPM

4 mins

lock

Membuat Scripts di package.json

2 mins

lock

Menangani routing

3 mins

lock

Framework di NodeJS

2 mins

lock

Kesimpulan

1 mins

6

Mengenal Framework ExpressJS

lock

Mengenal framework ExpressJS

5 mins

lock

Routing pada ExpressJS

17 mins

lock

Middleware pada Express JS

5 mins

lock

Kesimpulan

1 mins

7

Mengenal MongoDB

lock

Instalasi dan konfigurasi MongoDB

5 mins

lock

Query dasar MongoDB

13 mins

lock

Kesimpulan

1 mins

8

ExpressJS & MongoDB

lock

Konfigurasi MongoDB & ExpressJS

4 mins

lock

Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 1

7 mins

lock

Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 2

9 mins

lock

Mengenal ODM pada MongoDB→Part 1

10 mins

lock

Mengenal ODM pada MongoDB→Part 2

6 mins

lock

Menerapkan Mongoose pada ExpressJS

11 mins

lock

Kesimpulan

1 mins

9

Admin StoreGG

lock

Membuat project baru dengan Express Generator dan konfigurasi awal→Part 1

10 mins

lock

Membuat project baru dengan Express Generator dan konfigurasi awal→Part2

6 mins

lock

Instalasi adminLTE dan konfigurasi template admin

12 mins

lock

Convert adminLTE kedalam halaman kategori

8 mins

lock

Mengelola halaman kategori (CRUD)→ Create

12 mins

lock

Mengelola halaman kategori (CRUD)→Read

4 mins

lock

Mengelola halaman kategori (CRUD)→ Update

10 mins

lock

Mengelola halaman kategori (CRUD)→Delete

3 mins

lock

Notif (connect-flash, express-session) & Title Dinamis

11 mins

lock

Mengelola halaman nominal (CRUD)→Craete

11 mins

lock

Mengelola halaman nominal (CRUD)→Read

2 mins

lock

Mengelola halaman nominal (CRUD)→Update

4 mins

lock

Mengelola halaman nominal (CRUD)→Delete

2 mins

lock

Mengelola halaman voucher (CRUD)→Part 1 Create

14 mins

lock

Mengelola halaman voucher (CRUD)→Part 2 Create

11 mins

lock

Mengelola halaman voucher (CRUD)→Read

9 mins

lock

Mengelola halaman voucher (CRUD)→ Update

12 mins

lock

Mengelola halaman voucher (CRUD)→Delete

2 mins

lock

Mengelola halaman voucher (CRUD)→ Update Status

3 mins

lock

Mengelola halaman bank (CRUD)→ Create

7 mins

lock

Mengelola halaman bank (CRUD) Part 2 Read

2 mins

lock

Mengelola halaman bank (CRUD) Part 3 Update

4 mins

lock

Mengelola halaman bank (CRUD) Part 4 Delete

1 mins

lock

Mengelola halaman payment (CRUD) Part 1 Create

8 mins

lock

Mengelola halaman payment (CRUD) Part 2 Read

3 mins

lock

Mengelola halaman payment (CRUD) Part 3 Update

5 mins

lock

Mengelola halaman payment (CRUD) Part 4 Delete

1 mins

lock

Mengelola halaman signin admin

4 mins

lock

Action signin admin dan middleware auth

17 mins

lock

Membuat logout, menampilkan user yang login dan title dinamis

9 mins

lock

Mengelola halaman transaksi

24 mins

lock

Konfirmasi Transaksi dan Tolak Transaksi

4 mins

lock

Mengelola halaman beranda

11 mins

lock

Review halaman admin

3 mins

10

Api Player StoreGG

lock

Membuat api landing page

10 mins

lock

Membuat api detail page

5 mins

lock

Membuat api signup

17 mins

lock

Membuat api category

2 mins

lock

Membuat api signin

8 mins

lock

Membuat api checkout

24 mins

lock

Membuat api history transaksi

9 mins

lock

Membuat api detail history transaksi

4 mins

lock

Membuat api dashbaord

8 mins

lock

Membuat api read profile

5 mins

lock

Membuat api ubah profile

14 mins

lock

Membuat dokumentasi api dengan postman dan Install cors

4 mins

11

Deploy

lock

Simpan projek kedalam github

4 mins

lock

Deploy ke Heroku

20 mins

12

Integration

lock

Menjalankan API documentation di Postman

4 mins

lock

Sample Integration di NextJS

13 mins

lock

Membuat configurasi API services

12 mins

lock

Membuat API data types

6 mins

lock

Setup routing dinamis voucher detail

7 mins

lock

Integrasi Voucher Detail

11 mins

lock

Setup Nominal dan Payment Component

11 mins

lock

Integrasi Nominal dan Payment

9 mins

lock

Setup Number Format

4 mins

lock

Membuat Voucher Data Types

5 mins

lock

Setup Sign-Up Form

14 mins

lock

Mendapatkan Value Select Option

10 mins

lock

Upload Photo dan Integrasi Sign-Up

19 mins

lock

Validasi Sign-up dan Error Modal

12 mins

lock

Integrasi Sign-In Page

17 mins

lock

Refactor pemanggilan API

11 mins

lock

Memporses JWT (JSON Web Token)

16 mins

lock

Membuat Kondisi Login di Navbar

12 mins

lock

Membuat Fungsi Logout

8 mins

lock

Menghandle private Route di NextJS

17 mins

lock

Memperbaiki URL avatar

4 mins

lock

Setup Data Checkout

8 mins

lock

Setup Data Checkout Part 2

14 mins

lock

Global Toast

5 mins

lock

Integrasi Game Item

6 mins

lock

Purchase and Payment Info

12 mins

lock

Mempersiapkan data untuk API Checkout

8 mins

lock

Integrasi Checkout API

13 mins

lock

Memperbaiki Routing Setelah Checkout

4 mins

lock

Setup private route member

4 mins

lock

Integrasi Sidebar Profile User

5 mins

lock

Integrasi Member Overview Category

10 mins

lock

Integrasi Latest Transaction

9 mins

lock

Merapikan integrasi Member Overview

13 mins

lock

Private Route Member Transaction

8 mins

lock

Integrasi Total Transaction

8 mins

lock

Integrasi Table Transaction

7 mins

lock

Maping data API ke Table Integration

9 mins

lock

Setup Dynamic Routes

5 mins

lock

Membuat Service Transaction Detail

11 mins

lock

Integrasi Item detail dan Purchase detail

8 mins

lock

Integrasi Payment Information

5 mins

lock

Setup Local Data untuk Form Profile

7 mins

lock

Setup Form dan Upload Image

6 mins

lock

Integrasi Edit Profile

8 mins

lock

Update Voucher Page (getStaticPaths&getStaticProps)

13 mins

lock

Bug Fix Checkout Page

4 mins

13

Deployment

lock

Setup Basic SEO

6 mins

lock

Local Build and Checking

16 mins

lock

Save Project to Github Repository

4 mins

lock

Deploy Project ke Vercel

5 mins

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

2,450 Happy Members

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

Uray M Y

Full-Stack Developer

terbaik

Fakhri Syafrullah

Full-Stack Developer

Mantap

Raihan Adi Nugroho

Full-Stack Developer

Keren

Acep Nurman Sidik

Full-Stack JavaScript Develope...

mantap sekail materninya, mudah utk dipelajari dan dipahami

Pramudya Diva Alam

Full-Stack Developer

GOODDD

reinaldi

Full-Stack Developer

Mantap

Subroto Yudha Hars

Full-Stack Developer

Sangat bagus sekali kelas ini, lengkap dan bisa di mengerti penjelasan dari setiap mentor

Fyan Estu Widyanto

Full-Stack Developer

Lengkap

dimas pradipto

Full-Stack Developer

Penjelasan Mentornya sangat jelas, mentor nya pun sudah pengelaman. #Maju terus bwa

wahyu fahrozi reze

Full-Stack Developer

just woooooooow

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

Selamanya

Rp 99,999

Miliki kelas Premium secara permanen
dan bangun sebuah projek nyata

Akses kelas selamanya

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Beli Kelas Lihat Benefit Lainnya

Berlangganan

Rp 0

Mengikuti kelas dengan waktu yang
terbatas dan biaya lebih hemat

Akses kelas terbatas

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Subscribe Kelas Lihat Benefit Lainnya

Pertanyaan Umum

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

WhatsApp Admin

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.

Rp 99,999

Rp 720,000

Beli Kelas