AslamPangestu / vacation-be

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Kelas Online Premium

Membuat Website Mencari Kosan/Hotel/Apartment dengan MERN Stack

MERN Stack Development adalah salah satu techstack yang banyak digunakan oleh web developer saat ini. Mengandalkan ReactJS dalam membuat website lebih interactive dan easy to maintain.

Kita juga akan menggunakan NodeJS dan ExpressJS untuk handle bagian back-end terutama dalam pembuatan suatu API.

Di kelas ini juga kita akan belajar UI UX Design agar website lebih mudah digunakan oleh pengguna (sangat bagus jika kamu punya bisnis).

Pada kelas ini kita akan belajar mengenai:

  1. UI UX design menggunakan Figma
  2. Design handoff yang dilakukan designer kepada developer
  3. Convert design ke Bootstrap dan React JS
  4. Membuat Back-End dengan Node JS dan Express JS
  5. Upload ke vps (heroku)

Mentor

Angga Risky Product Designer Mengajar Design (UIUX)
Elfin Sanjaya Expert Backend Developer Mengajar NodeJS & ExpressJS
Yein Narayana Expert Front End Developer Mengajar Bootstrap & React JS & Integrasi AP

Tools (semua gratis dan siapa saja bisa belajar):

  1. Windows 10 / Linux / Mac OS
  2. Figma (https://figma.com)
  3. Whimsical (https://whimsical.com/)
  4. FlowMapp (https://flowmapp.com/)
  5. InVision (https://www.invisionapp.com/)
  6. React JS (https://reactjs.org/)
  7. Node JS (https://nodejs.org/en/)
  8. Express JS (https://expressjs.com/)
  9. Visual Studio Code (https://code.visualstudio.com/)
  10. Niat, Usaha dan Kerja Keras.
  11. Mongodb

Benefit Unggulan

  1. Materi Desain UI UX
  2. Materi Web Front-End Apps Development (Bootstrap + React JS)
  3. Materi Web Back End Apps Development (Node JS + Express JS + API)
  4. File Master Projek Design
  5. File Master Projek Web Apps
  6. Sertifikat Kelulusan
  7. Konsultasi Gratis Seumur Hidup (Group Private Telegram)
  8. Video kualitas tinggi (1080 HD)
  9. Akses Kelas Seumur Hidup
  10. Audio lebih nyaman untuk didengarkan
  11. Masih banyak lagi, lihat sendiri saja nanti

Daftar Materi

UX Design (dibawakan oleh Angga)

  • Memahami Brief (Ideation) VIDEO SELESAI DIBUAT
    • Membuat Customer Persona VIDEO SELESAI DIBUAT
    • Membuat Information Architecture UX VIDEO SELESAI DIBUAT
    • Membuat User-Flow VIDEO SELESAI DIBUAT
    • Membuat Wireframe
  • Landing Page VIDEO SELESAI DIBUAT
    • banner VIDEO SELESAI DIBUAT
    • navigation header VIDEO SELESAI DIBUAT
    • items featured VIDEO SELESAI DIBUAT
    • testimonial VIDEO SELESAI DIBUAT
    • features VIDEO SELESAI DIBUAT *footer VIDEO SELESAI DIBUAT
  • Details Page VIDEO SELESAI DIBUAT
    • information kosan/hotel VIDEO SELESAI DIBUAT
    • breadcrumbs (ux sitemap) VIDEO SELESAI DIBUAT
    • booking now VIDEO SELESAI DIBUAT
    • features kosan VIDEO SELESAI DIBUAT
    • testimonial VIDEO SELESAI DIBUAT
    • footer VIDEO SELESAI DIBUAT
    • header VIDEO SELESAI DIBUAT
  • Checkout Page VIDEO SELESAI DIBUAT
    • form request book VIDEO SELESAI DIBUAT
    • information orders VIDEO SELESAI DIBUAT

Visual Design (dibawakan oleh Angga)

  • Membuat MoodBoard
    • Perkenalan VIDEO SELESAI DIBUAT
    • New MoodBoard VIDEO SELESAI DIBUAT
    • Color Scheme VIDEO SELESAI DIBUAT
    • Icon Style VIDEO SELESAI DIBUAT
    • Illustration Style VIDEO SELESAI DIBUAT
    • Tipography VIDEO SELESAI DIBUAT
  • Transformasi Wireframe ke Visual Design VIDEO SELESAI DIBUAT
    • Pengenalan Figma VIDEO SELESAI DIBUAT
    • Landing Page VIDEO SELESAI DIBUAT
      • banner VIDEO SELESAI DIBUAT
      • navigation header VIDEO SELESAI DIBUAT
      • items featured VIDEO SELESAI DIBUAT
      • testimonial VIDEO SELESAI DIBUAT
      • statistic VIDEO SELESAI DIBUAT
      • footer VIDEO SELESAI DIBUAT
    • Details Page VIDEO SELESAI DIBUAT
      • information kosan/hotel VIDEO SELESAI DIBUAT
      • booking now VIDEO SELESAI DIBUAT
      • features kosan VIDEO SELESAI DIBUAT
      • testimonial VIDEO SELESAI DIBUAT
    • Checkout Page VIDEO SELESAI DIBUAT
      • form request book VIDEO SELESAI DIBUAT
      • information orders VIDEO SELESAI DIBUAT

Interaction Design IxD (dibawakan oleh Angga)

  • Micro Interaction Design VIDEO SELESAI DIBUAT
  • UI Animation VIDEO SELESAI DIBUAT
  • UI Prototype VIDEO SELESAI DIBUAT
  • Team Collaborate (bersama Front-End) VIDEO SELESAI DIBUAT
  • Meeting online VIDEO SELESAI DIBUAT
  • Hasil Feedback VIDEO SELESAI DIBUAT

Design Handoff (dibawakan oleh Angga)

  • Mempersiapkan Assets VIDEO SELESAI DIBUAT
  • Slicing Icon, Illustration, etc. VIDEO SELESAI DIBUAT
  • Kolaborasi dengan Developer VIDEO SELESAI DIBUAT
  • CSS Inspect VIDEO SELESAI DIBUAT
  • Support Developer VIDEO SELESAI DIBUAT

Front-End Development (dibawakan oleh Yein)

  • Memahami kebutuhan user VIDEO SELESAI DIBUAT
  • PRD (product requirements development) dengan backend guy VIDEO SELESAI DIBUAT
  • Mempersiapkan reactjs + redux environment dan minimal tools yg harus di install VIDEO SELESAI DIBUAT
  • Mempersiapkan folder structure VIDEO SELESAI DIBUAT
  • Memindai components untuk smart-components (elements) dan dumb-components (parts) VIDEO SELESAI DIBUAT
  • Memulai Slicing Mockup ke Reactjs components (Scenes)
    • Landing Page VIDEO SELESAI DIBUAT
    • banner VIDEO SELESAI DIBUAT
    • navigation header VIDEO SELESAI DIBUAT
    • items featured VIDEO SELESAI DIBUAT
    • testimonial VIDEO SELESAI DIBUAT
    • features VIDEO SELESAI DIBUAT
    • footer VIDEO SELESAI DIBUAT
  • Details Page
    • information kosan/hotel VIDEO SELESAI DIBUAT
    • booking now VIDEO SELESAI DIBUAT
    • features kosan VIDEO SELESAI DIBUAT
    • testimonial VIDEO SELESAI DIBUAT
  • Checkout Page
    • form request book VIDEO SELESAI DIBUAT
    • information orders VIDEO SELESAI DIBUAT
    • Integrasi Scene Components dengan API
  • Landing Page VIDEO SELESAI DIBUAT
    • Diskusi dengan Backend team VIDEO SELESAI DIBUAT
    • Listing dynamic banner VIDEO SELESAI DIBUAT
    • Listing items featured VIDEO SELESAI DIBUAT
    • Listing testimonial VIDEO SELESAI DIBUAT
    • Listing Features VIDEO SELESAI DIBUAT
  • Details Page
    • Diskusi dengan Backend team VIDEO SELESAI DIBUAT
    • Menampilkan informasi kosan/hotel VIDEO SELESAI DIBUAT
    • navigate booking now -> checkout page VIDEO SELESAI DIBUAT
    • listing features kosan VIDEO SELESAI DIBUAT
    • listing testimonial VIDEO SELESAI DIBUAT Checkout Page
    • form request book validation VIDEO SELESAI DIBUAT
    • request API to create new booking VIDEO SELESAI DIBUAT
    • menampilkan feedback dari hasil request API create VIDEO SELESAI DIBUAT

Back-End Development (dibawakan oleh Elfin)

  • Persiapan Tools VIDEO SELESAI DIBUAT
  • Pengenalan Node JS VIDEO SELESAI DIBUAT
  • Memulai setup project NodeJS
    • Instalasi Node JS VIDEO SELESAI DIBUAT
    • Membuat projek di NodeJS dengan NPM init VIDEO SELESAI DIBUAT
    • Install Express JS with Node JS VIDEO SELESAI DIBUAT
    • Belajar Menangani Routing dan Instalasi Nodemon (Development) VIDEO SELESAI DIBUAT
    • Instalasi template engine EJS VIDEO SELESAI DIBUAT
    • Belajar Parsing Data VIDEO SELESAI DIBUAT
  • Pengenalan MongoDB dan Mongoose
    • Instalasi MongoDB VIDEO SELESAI DIBUAT
    • Mengenal Mongoose dan Create Data VIDEO SELESAI DIBUAT
    • Membaca data dari database mongodb menggunakan mongoose VIDEO SELESAI DIBUAT
    • Validasi data menggunakan mongoose VIDEO SELESAI DIBUAT
    • Update dan Delete data menggunakan Mongoose VIDEO SELESAI DIBUAT
    • Membuat relationship dan memasukkan data menggunakan mongoose VIDEO SELESAI DIBUAT
  • Memulai setup project (Admin)
    • Membuat projek baru dengan Express Generator VIDEO SELESAI DIBUAT
    • Setup project Express JS VIDEO SELESAI DIBUAT
    • Membuat tampilan dengan EJS Template Engine VIDEO SELESAI DIBUAT
    • Instalasi sbadmin2 dan konfigurasi template admin VIDEO SELESAI DIBUAT
    • View Login User
    • View Dashboard admin VIDEO SELESAI DIBUAT
    • View Item VIDEO SELESAI DIBUAT
    • View Booking VIDEO SELESAI DIBUAT
    • View Bank VIDEO SELESAI DIBUAT
    • Membuat model database dengan MongoDB VIDEO SELESAI DIBUAT
    • Konfigurasi MongoDB VIDEO SELESAI DIBUAT
    • Membuat CRUD Category (admin) VIDEO SELESAI DIBUAT
    • Handle Error & Validasi Input VIDEO SELESAI DIBUAT
    • Alert Message (connect-flash, express-session) & Title Dinamis VIDEO SELESAI DIBUAT
    • Membuat CRUD Bank(admin) VIDEO SELESAI DIBUAT
    • Membuat dashboard (admin) VIDEO SELESAI DIBUAT
    • Membuat CRUD Item (admin) VIDEO SELESAI DIBUAT
    • Membuat CRUD Feature (admin) VIDEO SELESAI DIBUAT
    • Membuat CRUD Activity (admin) VIDEO SELESAI DIBUAT
    • Membuat booking (admin) VIDEO SELESAI DIBUAT
    • Autentikasi VIDEO SELESAI DIBUAT
    • Membuat login (admin) VIDEO SELESAI DIBUAT
  • Memulai membuat API (Member)
    • Landing Page
      • endpoint get all landing page VIDEO SELESAI DIBUAT
      • menguji endpoint dengan postman / insomnia VIDEO SELESAI DIBUAT
    • Details Page
      • endpoint get detail page VIDEO SELESAI DIBUAT
      • menguji endpoint dengan postman / insomnia VIDEO SELESAI DIBUAT
    • Checkout Page
      • endpoint post checkout VIDEO SELESAI DIBUAT
      • menguji endpoint dengan postman / insomnia VIDEO SELESAI DIBUAT
    • Membuat dokumentasi Rest API dengan Postman
      • Landing Page VIDEO SELESAI DIBUAT
      • Details Page VIDEO SELESAI DIBUAT
      • Checkout Page VIDEO SELESAI DIBUAT
    • Unit Testing dengan menggunakan Mocha dan Chai
      • Landing Page VIDEO SELESAI DIBUAT
      • Details Page VIDEO SELESAI DIBUAT
      • Checkout Page VIDEO SELESAI DIBUAT

Website Deployment (VPS)

  • Persiapan Tools VIDEO SELESAI DIBUAT
  • Create akun heroku VIDEO SELESAI DIBUAT
  • Membuat repository github VIDEO SELESAI DIBUAT
  • Membuat akun mongodb atlas VIDEO SELESAI DIBUAT
  • Deploy ke Heroku dan Automated Deploy (Back-End) VIDEO SELESAI DIBUAT

Diskon potongan harga 50.000 khusus untuk pelajar/mahasiswas selama masa preorder. Kirimkan foto kartu pelajar/kartu mahasiswa ketika melakukan konfirmasi pembayaran di whatsapp. Terima kasih.

Tata Cara Order Harga Pre Order: Rp. 290.000 (10 Maret - 30 April) cukup transfer Rp. 240.000 khusus pelajar/mahasiswa selama masa preorder

Harga Normal (Setelah Kelas di Publish / Rilis):
Rp. 690.000 (1 Mei 2020 Kelas Dirilis) *bayar sekali, akses video dan konsultasi selamanya

Silahkan transfer uang sebesar nominal di atas kepada rekening:

BCA 8270785396 a/n I Ketut Suyasa Narayana

BNI 0949079370 a/n I Ketut Suyasa Narayana

Keterangan Transfer: BWAMERNNamaAnda (Jika transfer via ATM tidak perlu pakai keterangan)

Setelah transfer silahkan konfirmasi foto pembayaran dan berikan data diri berupa:

  1. Nama Lengkap
  2. Email (@gmail)
  3. Username Telegram (mohon setup username telegram untuk mempermuda proses invite) Foto Bukti Transfer untuk pelajar/mahasiswa sertakan KTM/tanda pelajar

Kirim data diri dan bukti transfer ke WhatsApp :

  • 0859 5531 6973
  • Novita (Admin)
  • (Jam 08.00 - 20.00 WIB)

Kami akan balas maksimal 1x24 jam chat kamu. Terima kasih dan kami tunggu di kelas! :)

Catatan Penting:

  1. Video akan diletakan pada Google Drive dan bebas akses selamanya dan dapat di-download untuk belajar secara offline
  2. Kelas akan dapat diakses melalui platform BWA Dengan mengikuti kelas online ini, kalian mendapatkan akses ke serangkaian video pembelajaran sesuai dengan materi yang sudah ditulis di atas
  3. Proses belajar dilakukan secara mandiri setelah kalian mendapatkan akses ke video pembelajaran
  4. Kelas online ini tidak berupa pembelajaran secara live streaming
  5. Video pembelajaran berbahasa Indonesia
  6. Materi dari Dasar (tidak perlu khawatir, semua bisa belajar)
  7. Semua tools yang diperlukan gratis / open-source

Info Lebih Lengkap

Website : www.eudeka.id
Twitter: @EudekaID
Telegram : @eudekainfo
Instagram : @eudeka.id
WhatsApp : 0895351577557
Email : info@eudeka.id


tags: mern classbwa codeathome

About


Languages

Language:JavaScript 52.7%Language:EJS 47.3%Language:Procfile 0.0%