Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Website Desa Dengan Golang, React TypeScript dan Tailwind CSS

4.8 (4 ulasan)
52 members
DISKON 50%
Rp. 750.000
Rp. 375.000

TENTANG


GoLang adalah bahasa pemrograman modern yang sangat populer karena performa tinggi, efisiensi memori, dan dukungan concurrency yang luar biasa. Dengan GoLang, kita dapat membangun layanan backend yang ringan, cepat, dan dapat di-deploy dengan sangat mudah di server production.

Sementara itu, React TypeScript hadir sebagai salah satu teknologi frontend paling populer di dunia saat ini. Dengan dukungan component-based architecture, type safety, dan ekosistem yang mature, React membantu kita membangun aplikasi web yang interaktif, cepat, dan mudah di-maintain.

Untuk tampilan (UI), kita menggunakan Tailwind CSS, sebuah utility-first CSS framework yang sangat fleksibel dan memungkinkan kita membangun desain modern dengan cepat.

Dalam eBook ini, kita akan belajar bersama-sama bagaimana membangun sebuah Website Desa dengan memanfaatkan teknologi yang populer dan banyak digunakan di industri, yaitu:

  • GoLang – Sebagai Backend.
  • React + TypeScript – Sebagai Frontend.
  • Tailwind CSS – Sebagai UI Framework.

Pada bagian backend dengan GoLang, kita akan membangun layanan RESTful API yang menjadi fondasi aplikasi. Kita akan mempelajari banyak hal, seperti:

  • Membuat arsitektur backend yang rapi.
  • Menggunakan GORM untuk menghubungkan aplikasi dengan database MySQL.
  • Membuat autentikasi menggunakan JWT (JSON Web Token).
  • Mengimplementasikan sistem Role & Permission yang dinamis.
  • Membuat middleware untuk keamanan dan validasi.
  • Menangani upload file, pagination, pencarian, hingga optimasi query.

Di sisi frontend, kita akan menggunakan React dengan TypeScript, di mana kita akan membangun halaman website desa yang interaktif dan ramah pengguna. Di dalamnya, kita akan belajar berbagai konsep penting, seperti:

  • Menggunakan React Router untuk navigasi.
  • Mengelola data fetching dan caching dengan React Query.
  • Mengelola state global dengan Zustand.
  • Membuat halaman login dengan autentikasi JWT.
  • Membuat form dinamis dengan validasi.
  • Menampilkan data dari API dengan pagination, pencarian, dan filtering.
  • Membuat dashboard admin dengan fitur manajemen Role & Permission.
  • Menerapkan desain modern dengan Tailwind CSS.

Tidak hanya berhenti di tahap pengembangan, kita juga akan mempelajari bagaimana cara melakukan deployment aplikasi ke VPS. Pada sesi ini, kita akan membahas langkah demi langkah:

  • Setup VPS di Ubuntu Server.
  • Meng-upload source code ke GitHub dan digunakan di server.
  • Proses build aplikasi GoLang menjadi binary.
  • Proses build aplikasi React menggunakan Vite.
  • Konfigurasi NGINX sebagai reverse proxy.
  • Manajemen proses dengan systemd.
  • Konfigurasi SSL (HTTPS) menggunakan Certbot/Let’s Encrypt.
  • Menghubungkan aplikasi dengan domain agar bisa diakses publik.

Dengan mempelajari isi eBook ini, diharapkan teman-teman dapat menjadi seorang FullStack Developer yang menguasai GoLang dan React, serta mampu membangun aplikasi modern dari nol hingga siap production.


DEMO: http://desa-santri.my.id/

DAFTAR ISI


Pendahuluan
Cover
Kata Pengantar
Lisensi
Tentang
Prasyarat
Prasyarat Backend (GoLang)
Prasyarat Frontend (React)
Prasayarat FullStack GoLang dan React
Installasi & Persiapan Backend (GoLang)
Installasi GoLang
Membuat Project GoLang
Konfigurasi Live Reload GoLang (Air)
Konfigurasi File .env
Database
Apa itu Gorm ?
Installasi & Konfigurasi Gorm
Membuat Table dan Relasi Dengan Models
Konfigurasi Auto Migration
Membuat Seeder Permissions
Membuat Seeder Roles
Membuat Seeder Users
Menjalankan Proses Seeding
JWT (JSON Web Token)
Apa itu JWT (JSON Web Token) ?
Installasi dan Membuat Middleware Auth
Membuat Middleware Permission
Structs
Apa itu Struct ?
Membuat Struct Success dan Error Response
Membuat Struct Permission
Membuat Struct Role
Membuat Struct User
Membuat Struct Category
Membuat Struct Post
Membuat Struct Page
Membuat Struct Product
Membuat Struct Photo
Membuat Struct Slider
Membuat Struct Aparatur
Membuat Struct Dashboard
Helpers
Membuat Helper Hash
Membuat Helper JWT (Generate Token)
Membuat Helper Validator
Membuat Helper Permission
Membuat Helper Slug
Membuat Helper Upload
Membuat Helper Pagination
RESTful API Auth
Membuat RESTful API untuk Login
RESTful API Dashboard
Membuat RESTful API Dashboard
RESTful API Permissions
Membuat RESTful API Get Data Permissions
Membuat RESTful API Insert Data Permission
Membuat RESTful API Get Data Permission By ID
Membuat RESTful API Update Data Permission
Membuat RESTful API Delete Data Permission
Membuat RESTful API List Semua Data Permissions
RESTful API Roles
Membuat RESTful API Get Data Roles
Membuat RESTful API Insert Data Role
Membuat RESTful API Get Data Role By ID
Membuat RESTful API Update Data Role
Membuat RESTful API Delete Data Role
Membuat RESTful API List Semua Data Role
RESTful API Users
Membuat RESTful API Get Data Users
Membuat RESTful API Insert Data User
Membuat RESTful API Get Data User By ID
Membuat RESTful API Update Data User
Membuat RESTful API Delete Data User
RESTful API Categories
Membuat RESTful API Get Data Categories
Membuat RESTful API Insert Data Category
Membuat RESTful API Get Data Category By ID
Membuat RESTful API Update Data Category
Membuat RESTful API Delete Data Category
Membuat RESTful API List Semua Data Categories
RESTful API Posts
Membuat RESTful API Get Data Posts
Membuat RESTful API Insert Data Post
Membuat RESTful API Get Data Post By ID
Membuat RESTful API Update Data Post
Membuat RESTful API Delete Data Post
RESTful API Pages
Membuat RESTful API Get Data Pages
Membuat RESTful API Insert Data Page
Membuat RESTful API Get Data Page By ID
Membuat RESTful API Update Data Page
Membuat RESTful API Delete Data Page
RESTful API Products
Membuat RESTful API Get Data Products
Membuat RESTful API Insert Data Product
Membuat RESTful API Get Data Product By ID
Membuat RESTful API Update Data Product
Membuat RESTful API Delete Data Product
RESTful API Photos
Membuat RESTful API Get Data Photos
Membuat RESTful API Insert Data Photo
Membuat RESTful API Delete Data Photo
RESTful API Sliders
Membuat RESTful API Get Data Sliders
Membuat RESTful API Insert Data Slider
Membuat RESTful API Delete Data Slider
RESTful API Aparaturs
Membuat RESTful API Get Data Aparaturs
Membuat RESTful API Insert Data Aparatur
Membuat RESTful API Get Data Aparatur By ID
Membuat RESTful API Update Data Aparatur
Membuat RESTful API Delete Data Aparatur
RESTful API Public Posts
Membuat RESTful API Public Get Data Posts
Membuat RESTful API Public Get Data Post By Slug
Membuat RESTful API Public Get Data Posts Home
RESTful API Public Pages
Membuat RESTful API Public Get Data Page
Membuat RESTful API Public Get Data Page By Slug
RESTful API Public Products
Membuat RESTful API Public Get Data Products
Membuat RESTful API Public Get Data Product By Slug
Membuat RESTful API Public Get Data Products Home
RESTful API Public Photos
Membuat RESTful API Public Get Data Photos
Membuat RESTful API Public Get Data Photos Home
RESTful API Public Sliders
Membuat RESTful API Public Get Data Sliders
RESTful API Public Aparaturs
Membuat RESTful API Public Get Data Aparaturs
Membuat RESTful API Public Get Data Aparatur By ID
Membuat RESTful API Public Get Data Aparaturs Home
Konfigurasi CORS
Apa itu CORS ?
Installasi dan Konfigurasi CORS
Menambahkan Route Static File
Installasi & Persiapan Frontend (React)
Membuat Project React (TypeScript)
Install Library Pendukung
Konfigurasi Endpoint API Backend
Installasi & Konfigurasi Tailwind CSS
Assets Images
TanStack Query
Apa itu TanStack Query ?
Install dan Konfigurasi TanStack Query
Types
Membuat Type Params
Membuat Type Permission
Membuat Type Role
Membuat Type User
Membuat Type Category
Membuat Type Post
Membuat Type Page
Membuat Type Product
Membuat Type Photo
Membuat Type Slider
Membuat Type Aparatur
Membuat Type Dashboard
Membuat Type Auth
Membuat Type Theme
State Management (Zustand)
Membuat Store Auth
Membuat Store Theme
Authentication
Membuat Helper Permission
Membuat View dan Route Auth
Membuat Proses Login
Layout Admin
Membuat Component Header
Membuat Component Sidebar
Membuat Layout Admin
Halaman Dashboard
Membuat View dan Route Dashboard
Membuat Hooks Dashboard (Query)
Menampilkan Statistik Data
Halaman Forbidden
Membuat View dan Route Forbidden
Membuat Reusable Component
Membuat Component Loading
Membuat Component Error
Membuat Component Table Empty Row
Membuat Component Pagination
Permission Hooks
Membuat Hook Permissions (Query)
Membuat Hook Permission Create (Mutation)
Membuat Hook Permission By Id (Query)
Membuat Hook Permission Update (Mutation)
Membuat Hook Permission Delete (Mutation)
Membuat Hook Permission All (Query)
CRUD Data Permissions
Menampilkan List Data Permissions
Membuat Proses Create Data Permission
Membuat Proses Edit dan Update Data Permission
Membuat Proses Delete Data Permission
Role Hooks
Membuat Hook Roles (Query)
Membuat Hook Role Create (Mutation)
Membuat Hook Role By Id (Query)
Membuat Hook Role Update (Mutation)
Membuat Hook Role Delete (Mutation)
Membuat Hook Role All (Query)
CRUD Data Roles
Menampilkan List Data Roles
Membuat Proses Create Data Role
Membuat Proses Edit dan Update Data Role
Membuat Proses Delete Data Role
User Hooks
Membuat Hook Users (Query)
Membuat Hook User Create (Mutation)
Membuat Hook User By Id (Query)
Membuat Hook User Update (Mutation)
Membuat Hook User Delete (Mutation)
CRUD Data Users
Menampilkan List Data Users
Membuat Proses Create Data User
Membuat Proses Edit dan Update Data User
Membuat Proses Delete Data User
Category Hooks
Membuat Hook Categories (Query)
Membuat Hook Category Create (Mutation)
Membuat Hook Category By Id (Query)
Membuat Hook Category Update (Mutation)
Membuat Hook Category Delete (Mutation)
Membuat Hook Category All (Query)
CRUD Data Categories
Menampilkan List Data Categories
Membuat Proses Create Data Category
Membuat Proses Edit dan Update Data Category
Membuat Proses Delete Data Category
Post Hooks
Membuat Hook Posts (Query)
Membuat Hook Post Create (Mutation)
Membuat Hook Post By Id (Query)
Membuat Hook Post Update (Mutation)
Membuat Hook Post Delete (Mutation)
CRUD Data Posts
Menampilkan List Data Posts
Membuat Proses Create Data Post
Membuat Proses Edit dan Update Data Post
Membuat Proses Delete Data Post
Page Hooks
Membuat Hook Pages (Query)
Membuat Hook Page Create (Mutation)
Membuat Hook Page By Id (Query)
Membuat Hook Page Update (Mutation)
Membuat Hook Page Delete (Mutation)
CRUD Data Pages
Menampilkan List Data Pages
Membuat Proses Create Data Page
Membuat Proses Edit dan Update Data Page
Membuat Proses Delete Data Page
Product Hooks
Membuat Hook Products (Query)
Membuat Hook Product Create (Mutation)
Membuat Hook Product By Id (Query)
Membuat Hook Product Update (Mutation)
Membuat Hook Product Delete (Mutation)
CRUD Data Products
Menampilkan List Data Products
Membuat Proses Create Data Product
Membuat Proses Edit dan Update Data Product
Membuat Proses Delete Data Product
Photo Hooks
Membuat Hook Photos (Query)
Membuat Hook Photo Create (Mutation)
Membuat Hook Photo Delete (Mutation)
CRUD Data Photos
Menampilkan List Data Photos
Membuat Proses Create Data Photo
Membuat Proses Delete Data Photo
Slider Hooks
Membuat Hook Sliders (Query)
Membuat Hook Slider Create (Mutation
Membuat Hook Slider Delete (Mutation)
CRUD Data Sliders
Menampilkan List Data Sliders
Membuat Proses Create Data Slider
Membuat Proses Delete Data Slider
Aparatur Hooks
Membuat Hook Aparaturs (Query)
Membuat Hook Aparatur Create (Mutation)
Membuat Hook Aparatur By Id (Query)
Membuat Hook Aparatur Update (Mutation)
Membuat Hook Aparatur Delete (Mutation)
CRUD Data Aparaturs
Menampilkan List Data Aparaturs
Membuat Proses Create Data Aparatur
Membuat Proses Edit dan Update Data Aparatur
Membuat Proses Delete Data Aparatur
Layout Web
Membuat Component Menu Desktop
Membuat Component Menu Mobile
Membuat Component Header
Membuat Component Footer
Membuat Layout Web
Membuat Reusable Component Card
Membuat Component Card Post
Membuat Component Card Page
Membuat Component Card Product
Membuat Component Card Photo
Membuat Component Card Aparatur
Halaman Homepage
Membuat View dan Route Home
Membuat Slider Hook Home
Membuat Component dan Menampilkan Sliders di Home
Membuat Product Hook Home
Membuat Component dan Menampilkan Products di Home
Membuat Post Hook Home
Membuat Component dan Menampilkan Posts di Home
Membuat Photo Hook Home
Membuat Component dan Menampilkan Photos di Home
Membuat Aparatur Hook Home
Membuat Component dan Menampilkan Aparaturs di Home
Page Hooks Web
Membuat Hook Pages (Query)
Membuat Hook Page By Slug (Query)
Halaman Pages
Menampilkan Data Pages
Menampilkan Detail Data Page
Aparatur Hooks Web
Membuat Hook Aparaturs (Query)
Membuat Hook Aparatur By Id
Halaman Aparaturs
Menampilkan Data Aparaturs
Menampilkan Detail Data Aparatur
Post Hooks Web
Membuat Hook Posts (Query)
Membuat Hook Post By Slug
Halaman Posts
Menampilkan Data Posts
Menampilkan Detail Data Post
Product Hooks Web
Membuat Hook Products (Query)
Membuat Hook Product By Slug
Halaman Products
Menampilkan Data Products
Menampilkan Detail Data Product
Photo Hooks Web
Membuat Hook Photos (Query)
Halaman Photos
Menampilkan Data Photos
Membuat Fitur Pencarian
Membuat Fitur Pencarian di Header
Deployment Backend (GoLang)
Membeli VPS (Virtual Private Server)
Membeli Domain
Menghubungkan Domain ke Server VPS
Setup VPS
Upload Project Backend (GoLang) di GitHub
Deploy Project Backend (GoLang) di VPS
Memasang SSL di VPS
Deployment Frontend (React)
Build Project Frontend (React)
Deploy Project Frontend (React) di VPS
Memasang SSL untuk Frontend (React)
Penutup
Source Code
Penutup

TOOLS

Tools yang digunakan dalam course ini

Golang
Golang

An open-source programming language

See More
React Js
React Js

A JavaScript library

See More
TypeScript
TypeScript

strongly typed programming language

See More
React Query
React Query

Hooks for fetching and caching.

See More
Zustand
Zustand

State Management in React

See More
Tailwind CSS
Tailwind CSS

A utility-first CSS framework

See More

SCREENSHOTS

Screenshot hasil projek dari course ini

Login
Login
Roles Permissions
Roles Permissions
Create Post
Create Post
Halaman Homepage
Halaman Homepage
Halaman Aparaturs
Halaman Aparaturs
Halaman Posts
Halaman Posts

BENEFITS

Manfaat yang akan Anda dapatkan dari course ini


Ebook

Source Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Tim expert yang menyusun course ini

Fika Ridaul Maulayya
Fika Ridaul Maulayya
PREMIUM MEMBER

Full-Stack Developer, Content Creator and CEO & Founder SantriKoding.com


ULASAN MEMBERS

Apa kata mereka tentang course ini

Ahmad Akbar

Saya yakin bisa belajar dan menyelesaikan poi...

"materi yang di sampaikan tertulis dengan rapi dan bagus sekali, ini menambah skill dalam dunia programmer."

Noval Mickala Ardiansyah

Succes Is The Best Revenge !

"Sangat Membantu Membuat Structure BE dan FE Thanks mas fika"

Helmi Salsabila

Love your life because life will mean a lot i...

"Keren si ini tapi , masih harus diperhatikan lagi hal kecil"

Butuh Bantuan?