Kelas Online
Full-Stack JavaScript Developer

Dibangun oleh Yein Narayana & Angga Risky


STUDENT

3820

TINGKAT

ALL LEVELS

KONSULTASI

check_circle

SERTIFIKAT

check_circle

Tentang Kelas

MERN Stack adalah bagian dari Full-Stack Web Developer yang difokuskan kepada JavaScript (Full-Stack JavaScript Developer). M untuk MongoDB, E untuk ExpressJS, R untuk ReactJS, dan N untuk NodeJS. Kalian akan mempelajari semua hal tersebut pada kelas ini. Tapi bukan hanya sekedar ngoding aja namun kalian akan mulai dari bagian UI dan UX sehingga paham betul bagaimana caranya membangun suatu website yang memiliki better experience.

Tools pada kelas ini semuanya gratis dan pengguna OS apa saja dapat mengikutinya. Pertama kalian akan mulai merancang design website dari tahap melakukan riset dan pembuatan information architecture. Lalu setelah itu kita juga akan membuat Wireframe untuk digunakan sebagai gambaran kasar.

Setelah proses Wireframe selesai maka akan dilanjutkan kepada tahap Visual Design dan Web Development. Silakan bergabung untuk mempelajarinya lebih lanjut. Kami akan tunggu kalian di kelas ya.

Kamu Akan Mempelajari:

check_circle

Belajar Menggunakan Library Reactjs

check_circle

Belajar Membuat API dengan Nodejs & Expressjs

check_circle

Belajar membuat reusable component react from scratch

check_circle

Belajar mengolah DB non-sequel dengan mongodb

check_circle

Belajar UI/UX dalam membangun suatu website booking hotel online

check_circle

Belajar Usability-Testing dengan menganalisa behaviour pengguna website

Screenshots

Lihat dulu yuk foto projek kelas

Gabung dan Pelajari

Materi kelas yang akan kita pelajari bersama

lock  

Brief Project

lock  

Break Heula

lock  

Customer Part 1

lock  

Customer Part 2

lock  

Customer Part 3

lock  

Break Heula

lock  

Break Heula Again

lock  

Information Architecture Part 1

lock  

Information Architecture Part 2

lock  

Quiz

lock  

Break Sebentar

lock  

UX User Flow Part 1

lock  

UX User Flow Part 2

lock  

UX User Flow Part 3

lock  

Share UX Project

lock  

Quiz

lock  

Persiapan

lock  

Part 1

lock  

Part 2

lock  

Part 3

lock  

Part 4

lock  

Part 5

lock  

Part 6

lock  

Perkenalan

lock  

New MoodBoard

lock  

Color Scheme

lock  

Icon Design Inspiration

lock  

Illustration Empty States

lock  

Pemilihan Font Tipografi

lock  

Perkenalan Figma

lock  

Grid System

lock  

Logo & Navigation

lock  

Coloring Logo

lock  

Hero Banner Title

lock  

UX Above the Fold

lock  

CTA Button

lock  

Drop Shadows

lock  

Components

lock  

Banner Image

lock  

Customize Frame

lock  

Data Placeholder Statistic

lock  

Icon Traveler

lock  

Icon Treasure & Cities

lock  

Export & Resize Icons

lock  

Column

lock  

Linear Gradient

lock  

Tugas Design

lock  

Badge Hotel

lock  

Other Items

lock  

New Badge

lock  

Add Image

lock  

Icon Star

lock  

UX Content

lock  

Design Footer

lock  

Copyright

lock  

Details

lock  

House Photos

lock  

Room Descriptions

lock  

Features dan Icons

lock  

Lamp Icon

lock  

Bathroom Icon

lock  

Dining Room Icon

lock  

Wifi Icon

lock  

AC Icon

lock  

Others Icon

lock  

Booking Form

lock  

Calendar Module

lock  

Icon Calendar

lock  

CTA Button

lock  

Tweking Design

lock  

Treasure Section

lock  

Story Section

lock  

Item Booking

lock  

Stepper Section

lock  

Form Customer

lock  

Design Button CTA

lock  

UX Stepper

lock  

Payment Section

lock  

Final Page

lock  

Sketching Illustration

lock  

Shapes Illustration

lock  

New Elements

lock  

Export Illustration

lock  

UI Animation

lock  

UI Prototype

lock  

Final Prototype

lock  

Persiapan Kolaborasi

lock  

Presentation

lock  

Feedback Design

lock  

Slicing Design Asset

lock  

Inspect Design Element

lock  

Support Developer

lock  

Pengenalan project

lock  

Tools required

lock  

Persiapan workspace part 1

lock  

Persiapan workspace part 2

lock  

Quiz

lock  

Mempersiapkan component button

lock  

Mempersiapkan component button part 2

lock  

Mempersiapkan component button part 3

lock  

Testing component button

lock  

Testing component button part 2

lock  

Commit component button

lock  

Quiz

lock  

Update variable color

lock  

Create logo as parts components

lock  

Persiapan Slicing header

lock  

Mulai slicing header component

lock  

Styling navbar header

lock  

Troubleshooting ketika mengalami salah penutupan tag + commit git

lock  

Export image from figma

lock  

Import image to hero js

lock  

Menyusun component hero

lock  

Menyusun component hero part 2

lock  

Menyusun component hero part 3

lock  

Styling Component Hero

lock  

Styling Component Hero Part 2

lock  

Number Format with internationalization browser API

lock  

Penjelasan singkat section mostpicked

lock  

export image dari figma + contoh menggunakan grid bootstrap

lock  

display grid + simple grid markup

lock  

markup mostpicked complete

lock  

mostpicked styling css

lock  

mostpicked styling css part 2

lock  

mostpicked styling css part 3

lock  

double check kerjaan di section mostpicked

lock  

Quiz

lock  

Penjelasan Section Categories

lock  

Component categories

lock  

Component categories part 2

lock  

Component categories part 3 sampai conclusion component categories

lock  

Penjelasan Section Testimonial + Export assets

lock  

Smart component star

lock  

Smart component star part 2

lock  

Styling component star

lock  

Styling component star part 2

lock  

Testing component star

lock  

Component testimony

lock  

Component testimony part 2

lock  

Styling component testimony

lock  

Penjelasan dan mulai menulis component footer

lock  

Component footer part 2

lock  

Component footer part 3

lock  

menambahkan react reveal

lock  

Penjelasan singkat item details

lock  

Persiapan untuk slicing item details

lock  

component element input number

lock  

component element input number part 2

lock  

styling input number

lock  

testing input number

lock  

contoh input number

lock  

Elements input date dan pengenalan singkat hooks useEffect dan useRef

lock  

Elements input date part 2

lock  

Elements input date part 3

lock  

Styling input date

lock  

Testing input date + utils formatDate

lock  

Testing input date part 2

lock  

Contoh input date

lock  

Element breadcrumb

lock  

Styling breadcrumb

lock  

Testing breadcrumb

lock  

Sample breadcrumb

lock  

Parts page detail title

lock  

Parts page detail title part 2

lock  

detail page featured image

lock  

page detail description

lock  

page detail description bug fix

lock  

booking form

lock  

booking form part 2

lock  

styling booking form

lock  

menyelesaikan details page

lock  

Intro checkout page

lock  

Improve parts header

lock  

Sneak peak component stepper

lock  

Component Stepper

lock  

Component Controller

lock  

Component main content

lock  

Component meta

lock  

Component numbering

lock  

Styling numbering

lock  

Quiz

lock  

Component input text

lock  

Styling input text

lock  

Component input file

lock  

Booking Information

lock  

Payment

lock  

Completed

lock  

Checkout page

lock  

Checkout page part 2

lock  

End slicing session

lock  

Roadmap Node JS

lock  

Intro Node JS

lock  

Tools

lock  

Install Node JS on Windows

lock  

How to Use Node with REPL & File JS

lock  

Module build in

lock  

Module npm

lock  

Membuat module sendiri

lock  

Install Express JS with Node JS

lock  

Belajar Menangani Routing dan Instalasi Nodemon Development

lock  

Instalasi Template Engine EJS

lock  

Belajar Parsing data

lock  

Quiz

lock  

Installing MongoDB on Windows Compass

lock  

Mengenal Mongoose dan Create Data

lock  

Membaca data dari database mongodb menggunakan mongoose

lock  

Validasi data menggunakan mongoose

lock  

Update dan Delete data menggunakan Mongoose

lock  

Membuat relationship dan memasukkan data menggunakan mongoose

lock  

Quiz

lock  

Schema Staycation Part 1

lock  

Schema Staycation part 2

lock  

Schema Staycation part 3

lock  

Install Express Generator

lock  

Create Structure folder Express JS

lock  

Install Mongoose & Create Models Part 1

lock  

Validasi Mongoose

lock  

Install Mongoose & Create Models Part 2

lock  

Install Mongoose & Create Models Part 3

lock  

Install sbadmin2

lock  

Integrasi template sbadmin2

lock  

Pemisahan Template dan Content

lock  

View Dashboard

lock  

Setting Sidebar and Navbar Project Staycation

lock  

Setting url Admin Staycation

lock  

View Category

lock  

View Bank

lock  

View Item

lock  

View Booking

lock  

Quiz

lock  

Membuat Koneksi Database

lock  

CRUD Project Staycation Category Create

lock  

CRUD Project Staycation Category Read

lock  

CRUD Project Staycation Update Part 1

lock  

CRUD Project Staycation Update Part 2

lock  

CRUD Project Staycation Delete

lock  

Handle Error with try catch and validasi input required

lock  

Alert Message &Title Dinamis

lock  

CRUD Project Staycation Bank Create

lock  

CRUD Project Staycation Bank Read

lock  

CRUD Project Staycation Bank Update

lock  

CRUD Project Staycation Bank Delete

lock  

Repair Relasi Project Staycation

lock  

View Item with Nav Tabs

lock  

CRUD Project Staycation Item Create

lock  

CRUD Project Staycation Item Read

lock  

Show image Project Staycation Item

lock  

Show Item Single by id

lock  

CRUD Projrect Staycation Item Update

lock  

CRUD Project Staycation Item Delete

lock  

Detail Item Project Staycation Show Feature & Activity

lock  

CRUD Project Staycation Create Feature

lock  

CRUD Project Staycation Read Feature

lock  

CRUD Project Staycation Update Feature

lock  

CRUD Project Staycation Delete Feature

lock  

CRUD Project Staycation Create Activity

lock  

CRUD Project Staycation Read Activity

lock  

CRUD Project Staycation Update Activity

lock  

CRUD Project Staycation Delete Activity

lock  

Add Schema Users and Seeder

lock  

Login Project Staycation

lock  

Autentikasi Project Staycation

lock  

Logout Project Staycation

lock  

Booking Project Staycation

lock  

Show Detail Booking

lock  

Action Confirmation and Reject booking Project Staycation

lock  

Dashboard Project Staycation

lock  

API Landing Page Project Staycation Part 1

lock  

API Landing Page Project Staycation Part 2

lock  

API Landing Page Project Staycation Part 3

lock  

API Landing Page Project Staycation Part 4

lock  

API Landing Page Project Staycation Part 5

lock  

Quiz

lock  

API Detail Page Project Staycation

lock  

API Booking Project Staycation Part 1

lock  

API Booking Project Staycation Part 2

lock  

Documentation API with Postman

lock  

Testing API Landing Page

lock  

Testing API Detail Page

lock  

Testing API Booking Page

lock  

Persiapan Tools

lock  

Create Akun Heroku

lock  

Create Repository Github

lock  

Create akun mongodb atlas

lock  

Deploy Heroku

lock  

Quiz

lock  

Instalasi Redux

lock  

Actions, Reducers, Provider, store installed

lock  

Connect item details to checkout booking page

lock  

Try checkout booking

lock  

Setup postman to test ready endpoint

lock  

Action fetchPage

lock  

Action fetchPage part 2

lock  

Tracing error while integration landing page

lock  

Tracing error while integration landing page part 2

lock  

Tracing error while integration landing page part 3

lock  

API integration item details page

lock  

API integration item details page part 2

lock  

API integration item details page part 3

lock  

API integration item details page part 4

lock  

API integration item details page part 5

lock  

Setup postman method post checkout

lock  

Integrasi checkout page

lock  

Integrasi checkout page part 2

lock  

Integrasi checkout page part 3

lock  

Axios interceptor

lock  

Error handler with toaster

Demo Project

Sertifikat Kelas

Tools

Bootstrap Framework BuildWith Angga

Bootstrap Framework

InVision App BuildWith Angga

InVision App

React JS BuildWith Angga

React JS

Node JS BuildWith Angga

Node JS

GitHub BuildWith Angga

GitHub

Figma BuildWith Angga

Figma

Express JS BuildWith Angga

Express JS


Sistem Operasi

Windows / Mac OS / Linux

RAM

4 Gigabyte

Storage Kosong

5 Gigabyte

Mentor Kelas

Terpilih sebagai pengajar yang trusted dan handal

Kenapa BWA
Cocok Untukmu

Kini belajar design apps dan coding
terasa lebih mudah dan asyik

materi IT terbaru buildwithangga
Studi Kasus
Up-To-Date
kualitas video HD kelas buildwithangga
Kualitas Video
1080HD 60FPS
belajar dari modul buildwithangga
Modules
Dasar ke Expert
bebas konsultasi IT gratis buildwithangga
Konsultasi
Seumur Hidup
kelas android bahasa indonesia buildwithangga
Bahasa
Bahasa Indonesia
download projek akhir buildwithangga
Project
Untuk Portfolio
sertifikat kelulusan kelas buildwithangga
Sertifikat
Kelulusan Kelas
akses kelas seumur hidup buildwithangga
Akses Kelas
Seumur Hidup
belajar offline buildwithangga
Offline
Dapat diunduh

Karya Members

Portofolio yang telah dibangun di kelas ini

Investasi Masa Depan

Langkah awal yang tepat untuk menuju kesuksesan

3820 Happy Student

Review setelah gabung kelas online Full-Stack JavaScript Developer

materi bagus, hanya saja pada saat penyampaian si ka yein terlalu cepat jadi agak kurang paham.

Fathurrahman

Web Designer

Materinya bagus banget, untuk mas yein semoga kedepannya lebih baik lagi dalam memberi penjelasan.

Muhammad Riziq Susanto

Full-Stack Developer

Kelas terbaik, mentor dalam memberikan penjelasan cukup mudah dimengerti.

Kelasnya keren mas, tapi menurut saya untuk alurnya lebih enak, design -> db -> backend -> front end. Ini tidak perlu jadi acuan, dan tak perlu dipikirkan mas hehe hanya pendapat saya saja. Terima kasih untuk kelasnya ^^.

Wahyudin

Developer -

gak rugi dan mantap.

Arvin Fairuz

Developer

Sangat bermanfaat.

Penyampaian materinya cukup jelas, mantap..

Adit Hernowo

Front End Web Development

mudah dimengerti.

best.

agustina

web developer

Keren materinya.

Dimas Purwanto

FULLSTACK DEVELOPER

Penjelasannya lengkap banget.

Hamdan Muktafi

Front End Web Developer

mantap.

Mantab.

Mantapp dah sangat bermanfaat.

Sukses selalu untuk semua mentor !.

Nico

Programming Enthusiast

Saya newbei nih kang. So far masih aman ngikutin kelas. Cuma mau confirm(kurang penting mungkin), dalam dokumen ilustrasi MERN seharusnya ada di bawah sub #Teshstack kan yah? CMIIW.. :).

Kelas yang sangat bagus, Diajari Dari Bagaimana Awal Projek dikerjakan, Dipersiapkan, Dan Dikembangkan. Penjelasan dari Video juga sangat Jelas dan mudah untuk dimengerti.

Rivaldi Gunawan Yusuf

Web Master & Software Developer

Materinya bagus,lengkap kualitas video oke bngt plus bisa offline 🀣.

Rangdra Pangestu

Web Developer

materinya sangat lengkap beda dari yang lain, gak nyesel beli bwamern top banget.

afif shato

Full Stack Javascript

Kelas MERN Stack ini sangat bagus sekali, saya suka..

Muhammad Ilyas

Fullstack Javascript Developer

Sangat baik.

Kelas terbaik.

bagus dan materi dijelaskan secara detail.

Riyanto nugroho

Web developer

good.

Agus Setyawan

Junior Front End Developer

mantep sangat bermanfaat sukses selalu buat para mentor.

Pematerinya keren + isinya.. daging euy.

dicki

webdesigner

Pematerinya keren + isinya.. daging ruy.

dicki

webdesigner

Terima Kasih Mas, penjelasan materi sangat mudah dipahami.

Esau Batkunda

Web Programing

masih banyak yang ragu sih mass , walaupun bisa ditiru dulu sama tutorial, kelas nya membantu banget terimaasihh.

Eko Putra

, Vidio Editor

Alhamdulillah saya lolos tahap assesment di evermos dengan belajar kelas ini.

Alhamdulilah berkah ilmunya.

Randi Maulana Akbar

Full Stack Developer

great class :).

Gooddd.

Rizki Ramadhan

Web Developer

Materinya sungguh bermanfaat banget dan mudah di pahami..

Kurnia Mulya R

Web designer

Lumayan untuk pemula, cuman untuk yang expert masih kurang kayaknya...

Ari Bahtiar

Fulstack Web Developer

Mantap, penyampaian materi sudah bagus. Thanks :).

Saeful Rahman

Full Stack Web Developer

Gurih parah materinya, sukses terus BWA dan team.

KELASNYA PEOPLE WITH SPIRIT OF LEARNING!!!.

Terbaik materi segini bagusnya dengan harga yg setara kantong pelajar. Kalo bisa bisa berikan juga alur pembelajarannya sebelum ke mernπŸ™.

Materi dan mentornya bagus.

Rian Akbar Ferdiansyah

Web And Mobile Developer

Belum menyelesaikan si, tapi ini kelas keren. Pembawaan materinya jelas . πŸ™.

kelpin hartanto

Web Developer

jossss.

Rifky Ardiansyah

Web Developer

harusnya sih bintang enam tapi bintangnya cuma lima.

FATHOR ROHMAN

Front End Dev

konten yang mengajarkan tentang bagaimana kita bisa produktif dan berkarya.

Abdul aziz

Web development

Mantaap, penyampaian materi mudah dimengeti (y).

Kelasnya sangat bagus dan murah banget cocok bagi pemula yang ingin belajar fullstack javascript dari awal.

M. Bambang Sumantri

Fullstack Developer

Terbaik semua mentornya.

Sugeng

Web Developer

materinya sangat bagus, dan penjelasannya juga sangat mudah dimengerti. terima kasih.

simple tp sangat kena materinya.

Khadafi Ichsan

Web Designer

mantul.

Pembelajarannya mudah dimengerti bagi yang ingin mempelajari tools yang berguna di dunia kerja.

Thazka Al Afkar

Front-End Programmer

Terjangkau harganya namun Materi Sangat Berkualitas, sangat mudah menangkap apa yang disampaikan dari sang pemateri! Sukses terus untuk mas Angga, Mas Yein dan Mas Elfin sebagai mentor! Terimakasih Banyak!.

Muhamad Akmal

Back-end Developer

Materinya daging sekali... Kalau saya boleh minta request, diakhir video tolong dibahas responsivenya dong mas.. terimaksih buat mas angga sudah buat platform keren ini..

Kurniawan

Software Developer

Penyampaian materi masih perlu di tingkatkan lagi, tapi gak nyesel beli kelas ini. selain itu, mentor juga fast respon dalam menanggapi hal. recommended class.

Aldino Efendi

Web Development

Materi nya bagus, mudah dipahami tapi sangat disayangkan bberapa video di bagian server staycation, audio pemateri ada yg sangat pelan hampir tdak terdengar.. Terima kasih mas mas mentor dan mb admin πŸ™πŸ™.

Pelajaranya mudah dipahami, salain fokus pada modul pembelajaran juga diajarkan teknologi pendukung.

Very Nice!.

Surya Ramadhan

Web Designer

Kelas ini membuat ku cinta dengan JavaScript, Thank you All Mentors.

Ari Sutarman

Web and android developer

Kelas yang mantap.

Alif sahputra

Web Developer

Sangat mudah di pahami dalam Penyampaian.. :).

Proses pembelajaran untuk sebuah proyek jadi itu bener bagus bangat, dituntun untuk bisa membuat suatu aplikasi dan di kembangkan sendiri oleh si pelajar. memang disinilah wadah awal yang nantinya dibutuhkan oleh industri. terima kasih BWA.

Nur Iman

Web Developer

materi nya bagus, dan penjelasan mudah di mengerti thank you!.

Nice.

Ryan Hartadi

Android Dev

Kelas yang sangat menarik, banyak ilmu dan pelajaran baru yang saya dapat khususnya penggunaan library ReactJs dan MongoDb sebagai DB Management System. Terima kasih BWA team atas kelas nya ini. Sukses terus dan terus berkarya kedepannya..

Febry Ardi Ansari

Web Developer

Semoga ada update materi, untuk Responsive website...

Rahmat Subandi

Web Development

Kecepetan pak wkwk suara ngetik keyboard nya gak sinkron sama rekaman layarnya wkwk jadi gagal fokus awokawokawok.

Rafly Yusrizal Amrie

Basic Web Developer

Suka bgt sama materi kelasnya, apalagi penjelasan mas elfin yang lengkap dan jelas.. mungkin bisa dijadikan contoh untuk mas yein untuk lebih bisa mantep lagi penjelasannya. Overal kerenn kelasnya, semoga kedepannya lebih baik lagi. Amin.

Sejauh ini tutorial mudah diikuti dan sangat mudah difahami.

Muhammad Luthfi Azzammi

Web Developer, Desktop Developer

Sudah keren.

mungkin perlu memperpadat isi kontennya, supaya tidak terlampau lama dalam menjelaskan.

Rinto Setiono

Elektronika, Web desainer, Desain grafis

Error CORS membuat saya sulit mencerna letak errornya hingga strecthbutton mostPicked dan category tidak menampilkan link url pada pojok kiri bawah.

Penjelasannya sangat mendetail jadi kami yang pemula jadi mudah memahaminya, cuman saran saya sih pas udah masuk di detail page cara kak yein menjelaskan di lanjutkan dong seperti sebelumnya hehe biar kami makin cepat paham. Sekian dan Terima Kasih ^-^.

RadesPratama

Junior Web Developer

Bagus materinya.

Teguh Muhammad harits

Fullstack Developer

penjelasan sederhana dan mudah dimengerti.

ridho husin

web developer , fullstack developer

suaranya terlalu kecil.

Rahul Syaban

front end web development

Untuk bagian UX/UI cukup details UI sudah details, untuk bagian React terlalu banyak step yang di skip di video jdi rada bingung tidak disraankan untuk pemula yg baru belajar koding.

Bayu Dewantoro

UI UX Designer

materi ui/ux & react bagus. backend kurang. mentor bukannya menjelaskan tapi malah membacakan ap yang dia ketik.

Bagian express JS cuma nyalin coding, tidak dijelaskan tentang apa itu middleware, ide yang mau dibangun sebelum mulai coding, untungnya saya udah ngerti express sebelumnya, ga bayangin kalo untuk yang pertama kali coba expressjs.

Angga Ari Wijaya

Full Stack Programmer

member yang belajar di buildwithangga

β€œ Bergabung dengan puluhan ribu lainnya untuk menyambut era teknologi;

Tidak perlu download / kartu kredit. Cukup daftar langsung belajar.