Main Menu

Membangun Website Desa Dengan Golang, React TypeScript dan Tailwind CSS

7 members

All Levels

DISKON 50%

Rp. 250.000

Rp. 500.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

Golang

An open-source programming language

React Js

A JavaScript library

TypeScript

strongly typed programming language

React Query

Hooks for fetching and caching.

Zustand

State Management in React

Tailwind CSS

A utility-first CSS framework

SCREENSHOTS


Login

Roles Permissions

Create Post

Halaman Homepage

Halaman Aparaturs

Halaman Posts

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Fika Ridaul Maulayya

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