K-Shop — E-Commerce Website Application

K-Shop adalah aplikasi e-commerce berbasis web yang dikembangkan sebagai proyek full-stack untuk mensimulasikan proses perdagangan produk secara digital. Aplikasi ini menyediakan fitur utama seperti autentikasi pengguna, pengelolaan produk dan kategori, pencarian dan penyaringan produk, keranjang belanja, serta pengelolaan pesanan.

Aplikasi dibangun dengan React.js sebagai front-end dan Spring Boot sebagai back-end yang terhubung dengan PostgreSQL sebagai basis data. Seluruh aplikasi kemudian dikemas menggunakan Docker untuk menyediakan lingkungan deployment yang konsisten antara proses pengembangan dan deployment.

Proyek ini dikembangkan dengan pendekatan pemisahan antara sisi client dan server sehingga antarmuka pengguna, business logic, akses data, autentikasi, serta penyimpanan file dapat dikelola secara terstruktur dan independen.

Daftar Isi

Daftar Isi

• Gambaran Proyek
• Fitur Utama
• Teknologi dan Dependency Proyek
• Arsitektur Proyek
• Struktur Proyek
• Struktur Skema Database
• Instalasi Proyek
• Alur Deployment
• Hasil dan Demo Program
  • Front-End
  • Back-End
• Pengembangan di Masa Depan
• Acknowledgements
• Author
• License

Gambaran Proyek

K-Shop dirancang sebagai aplikasi website e-commerce yang menyediakan alur pembelian produk secara terintegrasi, mulai dari pengguna menemukan produk hingga menyelesaikan pesanan. Aplikasi memiliki dua sisi utama, yaitu customer-facing interface untuk aktivitas belanja dan back-end service yang menangani proses bisnis serta pengelolaan data.

Fitur Utama

1. Autentikasi Pengguna

Pengguna dapat melakukan registrasi dan login untuk mengakses fitur yang membutuhkan autentikasi. Sistem menggunakan autentikasi berbasis JWT (JSON Web Token) sehingga setiap request yang membutuhkan akses pengguna dapat divalidasi oleh back-end. Status autentikasi juga digunakan oleh front-end untuk menyesuaikan tampilan dan akses terhadap fitur tertentu.

2. Katalog Produk

Pengguna dapat melihat daftar produk yang tersedia melalui halaman katalog. Setiap produk menampilkan informasi seperti nama, harga, stok, kategori, status ketersediaan, dan gambar produk. Katalog menggunakan pagination sehingga produk ditampilkan secara bertahap dan tidak seluruh data dimuat sekaligus dalam satu halaman.

3. Pencarian dan Filter Produk

K-Shop menyediakan mekanisme pencarian produk berdasarkan informasi produk serta filter berdasarkan kategori. Fitur ini membantu pengguna menemukan produk tertentu tanpa harus menelusuri seluruh katalog secara manual. Hasil pencarian dan filter tetap terintegrasi dengan mekanisme pagination yang digunakan pada katalog.

4. Detail Produk

Setiap produk memiliki halaman detail yang menampilkan informasi lebih lengkap mengenai produk. Dari halaman ini, pengguna dapat melihat informasi produk sebelum menentukan apakah produk akan dimasukkan ke dalam keranjang.

5. Keranjang Belanja

Produk yang dipilih dapat ditambahkan ke dalam keranjang. Pengguna dapat melihat produk yang telah dipilih, mengatur jumlah produk, serta menghapus produk yang tidak ingin dibeli. Sistem juga memperhitungkan jumlah produk dan harga untuk menghasilkan total nilai keranjang.

6. Checkout dan Pesanan

Setelah menentukan produk yang akan dibeli, pengguna dapat melakukan proses checkout untuk membuat pesanan. Pesanan menyimpan informasi produk yang dibeli, jumlah, harga, subtotal, total pembayaran, serta status pesanan. Setiap pesanan memiliki nomor pesanan yang digunakan sebagai identitas transaksi.

7. Riwayat Pesanan

Pengguna yang telah melakukan transaksi dapat melihat daftar pesanan yang pernah dibuat. Informasi pesanan digunakan untuk mengetahui produk yang dibeli serta status masing-masing pesanan.

8. Manajemen Data Produk

Dari sisi back-end, sistem menyediakan operasi untuk mengelola data produk dan kategori. Data tersebut disimpan dalam PostgreSQL dan diakses melalui layer persistence menggunakan Spring Data JPA.

9. REST API

Front-end berkomunikasi dengan back-end melalui REST API. API menangani proses autentikasi, pengambilan data produk dan kategori, pengelolaan keranjang, serta proses pembuatan dan pengambilan pesanan. Pemisahan ini memungkinkan front-end dan back-end dikembangkan serta dijalankan sebagai service yang terpisah.

Alur Penggunaan

Secara umum, alur penggunaan aplikasi adalah:

Registrasi/Login → Menjelajahi Produk → Mencari/Filter Produk → Melihat Detail → Menambahkan ke Keranjang → Checkout → Membuat Pesanan → Melihat Riwayat Pesanan

Alur tersebut menghubungkan fitur utama aplikasi menjadi satu proses pembelian yang utuh dari sisi pengguna.

Teknologi dan Dependency Proyek

K-Shop menggunakan beberapa teknologi yang dipisahkan berdasarkan tanggung jawab masing-masing komponen aplikasi. Front-end bertanggung jawab terhadap antarmuka dan interaksi pengguna, back-end menangani business logic serta REST API, sedangkan PostgreSQL digunakan sebagai media penyimpanan data.

Front-End

Teknologi	Versi	Keterangan
React.js	19.2.7	Library utama untuk membangun antarmuka pengguna berbasis component
Vite	8.1.1	Build tool dan development server untuk aplikasi React
React Router	7.18.1	Menangani routing dan navigasi antar halaman
Axios	1.18.1	Client HTTP untuk komunikasi antara front-end dan REST API
CSS	-	Digunakan untuk styling dan responsive interface

Back-End

Teknologi / Dependency	Versi	Keterangan
Java	17	Versi Java yang digunakan untuk menjalankan aplikasi back-end
Spring Boot	4.0.0	Framework utama untuk membangun aplikasi back-end
Spring Web MVC	-	Menyediakan REST API dan menangani HTTP request
Spring Data JPA	-	Menangani persistence dan komunikasi dengan database melalui JPA
Hibernate	-	ORM yang digunakan oleh Spring Data JPA
Spring Security	-	Menangani autentikasi dan otorisasi aplikasi
JWT (JJWT)	0.12.7	Digunakan untuk implementasi autentikasi berbasis JSON Web Token
Bean Validation	-	Melakukan validasi terhadap data yang diterima oleh API
PostgreSQL Driver	-	JDBC driver untuk menghubungkan Spring Boot dengan PostgreSQL
Lombok	-	Mengurangi boilerplate code pada Java entity dan component

Database

Teknologi	Versi	Keterangan
PostgreSQL	17	Database relasional untuk menyimpan data pengguna, role, kategori, produk, keranjang, dan pesanan
Hibernate ORM	-	Memetakan Java entity ke tabel PostgreSQL dan mengelola operasi persistence

Containerization dan Deployment

Teknologi	Versi	Keterangan
Docker	28.1.1	Mengemas aplikasi dan dependency ke dalam container
Docker Compose	-	Mengatur dan menjalankan beberapa service aplikasi secara terintegrasi
Nginx	-	Web server yang digunakan untuk menyajikan hasil build production React serta meneruskan request yang diperlukan

Development Tools

Tools	Versi	Keterangan
Maven Wrapper	-	Menjalankan proses build Spring Boot tanpa memerlukan instalasi Maven secara terpisah
Node.js / npm	-	Menjalankan proses development dan build aplikasi React
Git	-	Version control untuk pengelolaan source code

Arsitektur Proyek

K-Shop menggunakan arsitektur aplikasi yang memisahkan antara front-end, back-end, database, dan file storage. Pemisahan ini memungkinkan setiap komponen memiliki tanggung jawab yang jelas serta dapat dijalankan secara terisolasi menggunakan Docker.

Arsitektur Sistem

Secara umum, arsitektur aplikasi terdiri dari komponen berikut:

                         Client
                           │
                           │ HTTP
                           ▼
                ┌─────────────────────┐
                │   React Application │
                │      + Nginx        │
                └──────────┬──────────┘
                           │
                           │ REST API
                           ▼
                ┌─────────────────────┐
                │    Spring Boot      │
                │      Back-End       │
                └───────┬─────┬───────┘
                        │     │
                JDBC    │     │ File Storage
                        │     │
                        ▼     ▼
              ┌────────────┐ ┌──────────────┐
              │ PostgreSQL │ │ Uploads      │
              │  Database  │ │ Volume       │
              └────────────┘ └──────────────┘

1. Client

Client merupakan browser pengguna yang mengakses aplikasi K-Shop. Browser memuat aplikasi React yang telah dibangun menjadi static assets untuk production. Seluruh interaksi pengguna seperti navigasi halaman, pencarian produk, pengelolaan keranjang, dan checkout dilakukan melalui antarmuka yang disediakan oleh React.

2. Front-End dan Nginx

Aplikasi React dijalankan dalam container yang menggunakan Nginx sebagai web server production. Pada tahap deployment, source code React terlebih dahulu diproses melalui Vite sehingga menghasilkan static assets. Hasil build tersebut kemudian disajikan oleh Nginx kepada browser.

Nginx juga digunakan sebagai entry point untuk aplikasi dari sisi browser. Request yang membutuhkan REST API diteruskan menuju service Spring Boot. Dengan pendekatan ini, browser tidak perlu berkomunikasi langsung dengan PostgreSQL maupun mengakses filesystem back-end.

3. Spring Boot Back-End

Spring Boot berperan sebagai application server yang menyediakan REST API dan menjalankan business logic aplikasi. Request dari front-end diterima oleh controller kemudian diproses melalui layer aplikasi sebelum berinteraksi dengan database atau file storage. Secara konseptual, back-end menggunakan pemisahan layer sebagai berikut:

Controller
    │
    ▼
Service
    │
    ▼
Repository
    │
    ▼
PostgreSQL

Controller bertanggung jawab terhadap HTTP request dan response, Service menangani business logic, sedangkan Repository menangani persistence melalui Spring Data JPA. Spring Security dan JWT digunakan pada bagian yang membutuhkan autentikasi sehingga request dapat divalidasi sebelum mengakses resource yang dilindungi.

4. PostgreSQL

PostgreSQL digunakan sebagai relational database utama aplikasi. Database menyimpan data terstruktur yang berkaitan dengan aplikasi, termasuk:

• Role dan pengguna
• Kategori produk
• Produk
• Keranjang belanja
• Pesanan
• Item pesanan

Spring Boot berkomunikasi dengan PostgreSQL melalui JDBC dan Spring Data JPA. Hibernate bertindak sebagai ORM yang memetakan entity Java ke tabel database.

5. Local File Storage

Data binary seperti gambar produk dan avatar pengguna tidak disimpan sebagai binary data di PostgreSQL. File disimpan pada direktori uploads yang digunakan oleh Spring Boot sebagai local file storage. Pada deployment Docker, direktori tersebut dipetakan ke Docker volume sehingga file tetap tersedia meskipun container back-end dibuat ulang.

Secara konseptual:

Spring Boot
     │
     ▼
/app/uploads
     │
     ▼
Docker Volume
     │
     ├── products/
     └── profile/

Database hanya menyimpan path file, misalnya:

products/2026/07/1.png

Ketika gambar diperlukan oleh front-end, back-end menyediakan resource tersebut melalui endpoint /uploads/**.

6. Docker Compose

Docker Compose digunakan untuk mengatur service utama aplikasi dalam satu environment deployment. Service yang digunakan adalah:

┌─────────────────────────────────────┐
│           Docker Compose            │
│                                     │
│  ┌──────────────┐  ┌─────────────┐  │
│  │   Front-End  │  │   Back-End  │  │
│  │    Nginx     │  │ Spring Boot │  │
│  └──────────────┘  └──────┬──────┘  │
│                           │         │
│                    ┌──────▼──────┐  │
│                    │ PostgreSQL  │  │
│                    └─────────────┘  │
│                                     │
│             Docker Volumes          │
│          ┌──────────────────┐       │
│          │ postgres_data    │       │
│          │ uploads          │       │
│          └──────────────────┘       │
└─────────────────────────────────────┘

Docker Compose menangani hubungan antar-service melalui Docker network. Oleh karena itu, Spring Boot dapat mengakses PostgreSQL menggunakan nama service postgres, bukan localhost.

Contohnya:

jdbc:postgresql://postgres:5432/ecommerce

Hal ini berbeda dengan environment development lokal, ketika aplikasi Spring Boot dijalankan langsung dari host dan database dapat diakses menggunakan localhost.

7. Alur Request

Secara sederhana, alur komunikasi ketika pengguna mengakses data produk adalah:

Browser
   │
   │ GET /api/products
   ▼
Nginx / Front-End
   │
   │ HTTP Request
   ▼
Spring Boot
   │
   │ JPA / JDBC
   ▼
PostgreSQL
   │
   │ Product Data
   ▼
Spring Boot
   │
   │ JSON Response
   ▼
React
   │
   ▼
Browser

Untuk resource gambar, alurnya berbeda karena file tidak diambil dari PostgreSQL:

Browser
   │
   │ GET /uploads/products/...
   ▼
Spring Boot
   │
   ▼
Docker Volume
   │
   ▼
Image File

Dengan pembagian tersebut, PostgreSQL berfokus pada penyimpanan data terstruktur, sedangkan Docker volume digunakan untuk mempertahankan file upload.

Struktur Proyek

Struktur proyek K-Shop Ecommerce dipisahkan menjadi dua aplikasi utama, yaitu ecommerce_frontend sebagai aplikasi antarmuka pengguna dan ecommerce_backend sebagai aplikasi REST API. Selain itu, aset yang digunakan untuk dokumentasi proyek disimpan pada direktori assets di root project.

K-Shop Ecommerce Project
│
├── assets
│   └── ...
│
├── ecommerce_frontend
│   ├── dist
│   ├── src
│   │   ├── assets
│   │   ├── component
│   │   ├── context
│   │   ├── pages
│   │   ├── utils
│   │   └── ...
│   ├── Dockerfile
│   ├── nginx.conf
│   └── ...
│
├── ecommerce_backend
│   ├── src/main/java/...
│   │   ├── common
│   │   ├── config
│   │   ├── controller
│   │   ├── domain
│   │   │   ├── entity
│   │   │   ├── enums
│   │   │   ├── repository
│   │   │   └── seeder
│   │   ├── dto
│   │   ├── mapper
│   │   ├── security
│   │   ├── service
│   │   ├── storage
│   │   └── BackendEcommerceApplication.java
│   ├── uploads
│   └── ...
│
├── docker-compose.yml
└── ...

Struktur Utama

• assets/ — menyimpan aset dokumentasi proyek, seperti GIF dan gambar yang digunakan dalam README.
• ecommerce_frontend/ — berisi seluruh kode aplikasi React, termasuk halaman, component, context, utility, serta konfigurasi Docker dan Nginx.
• ecommerce_backend/ — berisi aplikasi Spring Boot beserta struktur REST API, domain, repository, service, security, konfigurasi, dan mekanisme penyimpanan file.
• uploads/ — digunakan sebagai lokasi penyimpanan file aplikasi, terutama gambar produk dan avatar pengguna.
• docker-compose.yml — mendefinisikan service dan konfigurasi deployment aplikasi menggunakan Docker.

Struktur Skema Database

K-Shop menggunakan PostgreSQL sebagai database relasional untuk menyimpan data utama aplikasi. Struktur database dirancang untuk memisahkan data pengguna, katalog produk, serta transaksi sehingga setiap entitas memiliki tanggung jawab yang jelas.

Relasi utama antar tabel dapat digambarkan sebagai berikut:


Tabel Utama

Tabel	Fungsi
roles	Menyimpan role atau hak akses pengguna.
users	Menyimpan informasi akun pengguna dan role yang dimilikinya.
categories	Menyimpan kategori produk.
products	Menyimpan informasi produk, harga, stok, status, dan lokasi file gambar.
carts	Menyimpan produk yang ditambahkan pengguna ke keranjang.
orders	Menyimpan informasi transaksi dan status pesanan.
order_items	Menyimpan detail produk yang terdapat dalam setiap pesanan.

Relasi Data

Beberapa relasi utama yang digunakan dalam aplikasi adalah:

• Satu role dapat dimiliki oleh banyak user.
• Satu category dapat memiliki banyak product.
• Satu user dapat memiliki banyak item dalam cart.
• Satu user dapat memiliki banyak order.
• Satu order terdiri dari satu atau lebih order item.
• Setiap order item mengacu pada sebuah product.
• Setiap cart mengacu pada sebuah product.

Instalasi Proyek

Prasyarat

Pastikan beberapa perangkat lunak berikut telah tersedia pada sistem:

• Git untuk mengambil source code proyek.
• Docker dan Docker Compose untuk menjalankan seluruh service aplikasi.
• JDK 17 apabila ingin menjalankan atau mengembangkan back-end secara langsung di luar Docker.
• Node.js dan npm apabila ingin menjalankan atau mengembangkan front-end secara langsung di luar Docker.

Pada deployment menggunakan Docker, tidak diperlukan instalasi Java, Maven, Node.js, atau PostgreSQL secara manual untuk menjalankan versi Docker dari aplikasi karena masing-masing kebutuhan tersebut telah disediakan melalui container dan proses build Docker.

1. Clone Repository

Clone repository K-Shop kemudian masuk ke direktori utama proyek.

git clone <repository-url>
cd <project-directory>

2. Konfigurasi Environment

Buat file .env pada direktori utama proyek berdasarkan konfigurasi environment yang dibutuhkan oleh Docker Compose.

Contoh:

# PostgreSQL
POSTGRES_DB=ecommerce
POSTGRES_USER=ecommerce_user
POSTGRES_PASSWORD=<database-password>

# Spring Boot
DB_URL=jdbc:postgresql://postgres:5432/ecommerce
DB_USERNAME=ecommerce_user
DB_PASSWORD=<database-password>

# Storage
STORAGE_BASE_URL=http://localhost:8080/uploads

# JWT
JWT_SECRET=<jwt-secret>

Nilai sensitif seperti password database dan JWT secret tidak disimpan secara langsung di dalam source code.

3. Menjalankan Aplikasi

Dari direktori utama proyek, jalankan:

docker compose up --build

Docker Compose akan membangun image untuk front-end dan back-end serta menjalankan service PostgreSQL. Setelah seluruh container berhasil berjalan, aplikasi dapat diakses melalui:

http://localhost

Back-end Spring Boot berjalan di dalam container dan melayani request API melalui:

http://localhost:8080/api

Sedangkan PostgreSQL digunakan oleh back-end melalui jaringan internal Docker sehingga koneksi database menggunakan nama service postgres, bukan localhost.

4. Menghentikan Aplikasi

Untuk menghentikan container tanpa menghapus data PostgreSQL maupun volume aplikasi, gunakan:

docker compose down

Untuk menghapus container sekaligus volume database dan memulai database dari kondisi baru:

docker compose down -v

Perintah docker compose down -v akan menghapus volume PostgreSQL sehingga seluruh data yang tersimpan di database container akan ikut terhapus. Gunakan perintah tersebut hanya ketika memang ingin melakukan reset database.

5. Memeriksa Status Container

Status seluruh service dapat diperiksa menggunakan:

docker compose ps

Log aplikasi dapat diperiksa dengan:

docker compose logs -f

Untuk melihat log service tertentu:

docker compose logs -f backend

atau:

docker compose logs -f frontend

6. Akses Aplikasi

Jika seluruh service berhasil berjalan, komponen aplikasi dapat diakses melalui:

Komponen	URL
Front-end	http://localhost
Back-end API	http://localhost:8080/api
PostgreSQL	localhost:5432

Front-end berkomunikasi dengan back-end melalui API, sedangkan back-end bertanggung jawab terhadap autentikasi, pengelolaan produk, keranjang, pesanan, dan akses database.

Alur Deployment

K-Shop menggunakan pendekatan containerized deployment dengan Docker Compose. Seluruh komponen utama aplikasi dijalankan sebagai service terpisah, yaitu front-end, back-end, dan PostgreSQL. Alur deployment aplikasi adalah sebagai berikut:

                         Docker Compose
                              │
             ┌────────────────┼────────────────┐
             │                │                │
             ▼                ▼                ▼
       Front-End          Back-End         PostgreSQL
       React + Vite      Spring Boot          17
             │                │                │
             │                │                │
             ▼                ▼                │
           Nginx             JAR               │
             │                │                │
             │                └──── JDBC ──────┘
             │
             └──── HTTP/API ────► Spring Boot

Front-End

Source code React dibangun menggunakan Vite melalui proses:

React Source Code
       │
       ▼
   npm run build
       │
       ▼
      dist/
       │
       ▼
 Docker Image
       │
       ▼
     Nginx
       │
       ▼
 http://localhost

Hasil build Vite ditempatkan ke dalam image Nginx. Nginx kemudian berfungsi sebagai web server untuk menyajikan file statis hasil build React kepada browser.

Back-End

Back-end dibangun menggunakan Spring Boot dan Maven Wrapper. Proses deployment dilakukan melalui Dockerfile:

Spring Boot Source Code
          │
          ▼
      ./mvnw clean package
          │
          ▼
       app.jar
          │
          ▼
      Docker Image
          │
          ▼
    Spring Boot
          │
          ├──── REST API
          ├──── JWT Authentication
          ├──── Business Logic
          ├──── JPA / Hibernate
          └──── File Storage

Spring Boot berjalan pada container tersendiri dan menyediakan REST API yang digunakan oleh front-end.

PostgreSQL

PostgreSQL dijalankan sebagai container database terpisah:

PostgreSQL Docker Container
          │
          ▼
    ecommerce database
          │
          ▼
     PostgreSQL Volume

Data database disimpan pada Docker named volume sehingga data tidak bergantung pada lifecycle container. Dengan demikian, container dapat dihentikan atau dibuat ulang tanpa secara otomatis menghapus data database.

Komunikasi Antar-Container

Docker Compose membuat network internal yang memungkinkan setiap service berkomunikasi menggunakan nama service. Back-end tidak menggunakan localhost untuk mengakses PostgreSQL. Koneksi database menggunakan:

jdbc:postgresql://postgres:5432/ecommerce

postgres merupakan nama service PostgreSQL di dalam Docker Compose. Sementara itu, browser mengakses front-end melalui Nginx pada:

http://localhost

dan front-end mengirim request API ke back-end melalui port yang diekspos oleh Docker:

http://localhost:8080/api

Persistent File Storage

File gambar produk dan avatar pengguna disimpan menggunakan Docker volume yang di-mount ke container back-end:

Host / Docker Volume
        │
        ▼
/app/uploads
        │
        ▼
Spring Boot Resource Handler
        │
        ▼
/uploads/**

Dengan pendekatan tersebut, file yang diunggah tidak menjadi bagian dari Docker image sehingga tetap dapat dipertahankan ketika container back-end dibuat ulang.

Hasil dan Demo Program

Berdasarkan gambaran pengembangan, dapat ditunjukkan hasil dari pada program website yang telah dibuat sebagai berikut.

Front-End

Front-end menyediakan antarmuka pengguna untuk berinteraksi dengan berbagai fitur e-commerce.

1. Halaman Utama Produk

Halaman katalog yang menampilkan daftar produk yang tersedia beserta informasi seperti nama, harga, stok, kategori, dan gambar produk.

Fitur yang tersedia meliputi:

• Menampilkan daftar produk dalam bentuk katalog.
• Menampilkan gambar, nama, dan harga produk.
• Menampilkan tombol Add to Cart pada setiap produk.
• Menampilkan katalog dengan tata letak yang responsif pada berbagai ukuran layar.
• Menampilkan informasi ketika tidak terdapat produk yang tersedia.

2. Paginasi

Paginasi digunakan untuk membagi data produk ke dalam beberapa halaman sehingga pengguna tidak perlu memuat seluruh katalog produk dalam satu halaman. Fitur ini juga digunakan bersama dengan pencarian dan filter kategori untuk mempertahankan navigasi pada hasil yang diperoleh.

Fitur yang tersedia meliputi:

• Membagi katalog produk ke dalam beberapa halaman.
• Menampilkan informasi halaman yang sedang aktif.
• Menyediakan navigasi untuk berpindah ke halaman berikutnya dan sebelumnya.
• Memungkinkan pengguna berpindah ke halaman tertentu.
• Mempertahankan hasil pencarian atau filter kategori ketika pengguna berpindah halaman.

3. Pencarian Produk

Fitur pencarian digunakan untuk membantu pengguna menemukan produk berdasarkan nama atau kata kunci tertentu. Sistem juga menyediakan rekomendasi produk berdasarkan input yang diberikan sehingga pengguna dapat memilih rekomendasi yang sesuai secara langsung.

Fitur yang tersedia meliputi:

• Mencari produk berdasarkan kata kunci.
• Menampilkan rekomendasi produk berdasarkan kata kunci yang sedang dimasukkan.
• Memungkinkan pengguna memilih rekomendasi untuk langsung menampilkan hasil pencarian.
• Menyaring produk berdasarkan kategori.
• Menggabungkan pencarian dan filter kategori dengan paginasi.

4. Login dan Registrasi Pengguna

Fitur autentikasi yang digunakan untuk mengelola akses pengguna ke bagian aplikasi yang membutuhkan identitas pengguna. Pengguna dapat membuat akun baru dan melakukan login menggunakan kredensial yang telah didaftarkan.

Fitur yang tersedia meliputi:

• Registrasi pengguna baru.
• Validasi data pada proses registrasi.
• Login menggunakan email dan password.
• Penyimpanan token autentikasi pada sisi front-end.
• Pengiriman token pada request ke endpoint yang membutuhkan autentikasi.
• Penanganan sesi ketika kredensial pengguna tidak lagi valid.
• Pembatasan fitur tertentu bagi pengguna yang belum melakukan login.

5. Keranjang Belanja

Keranjang belanja digunakan untuk menyimpan produk yang ingin dibeli oleh pengguna sebelum dilanjutkan ke proses checkout. Pengguna dapat mengatur produk dan jumlah item yang akan dibeli sebelum pesanan dibuat.

Fitur yang tersedia meliputi:

• Menambahkan produk ke dalam keranjang.
• Menampilkan daftar produk yang terdapat di dalam keranjang.
• Mengubah jumlah produk yang ingin dibeli.
• Menghapus produk dari keranjang.
• Menghitung subtotal berdasarkan harga dan jumlah produk.
• Menampilkan total nilai belanja.
• Memastikan pengguna telah melakukan autentikasi sebelum menggunakan fitur keranjang.

6. Checkout dan Pesanan

Checkout merupakan tahap akhir dari proses pembelian yang mengubah produk yang terdapat pada keranjang menjadi sebuah pesanan. Setelah pesanan berhasil dibuat, pengguna dapat melihat informasi dan detail pesanan yang telah tersimpan pada sistem.

Fitur yang tersedia meliputi:

• Menampilkan ringkasan produk sebelum checkout.
• Menampilkan jumlah dan harga setiap produk.
• Menghitung subtotal setiap item.
• Menghitung total nilai pesanan.
• Membuat pesanan berdasarkan isi keranjang.
• Menyimpan detail produk yang dibeli pada pesanan.
• Menampilkan informasi pesanan yang telah dibuat.
• Menampilkan status pesanan.

Back-End

Back-end menyediakan REST API yang menangani proses bisnis dan akses data aplikasi.

Beberapa fungsi utama yang disediakan meliputi:

• Authentication dan authorization menggunakan JWT.
• Pengelolaan pengguna dan role.
• Pengelolaan kategori dan produk.
• Pengelolaan keranjang belanja.
• Pembuatan dan pengelolaan pesanan.
• Pagination dan filtering produk.
• Penyimpanan serta penyajian file gambar melalui storage.
• Persistensi data menggunakan PostgreSQL dan Spring Data JPA.

REST API menjadi penghubung antara front-end dan database. Setiap request dari front-end diproses oleh controller, diteruskan ke service untuk menjalankan business logic, kemudian berinteraksi dengan repository untuk mengakses PostgreSQL.

Contoh Endpoint

Method	Endpoint	Fungsi
POST	/api/auth/login	Login pengguna
POST	/api/auth/register	Registrasi pengguna
GET	/api/products	Mengambil daftar produk
GET	/api/products/{id}	Mengambil detail produk
GET	/api/categories	Mengambil daftar kategori
GET	/api/cart	Mengambil keranjang pengguna
POST	/api/cart	Menambahkan produk ke keranjang
POST	/api/orders	Membuat pesanan
GET	/api/orders	Mengambil pesanan pengguna

Endpoint pada tabel merupakan representasi fungsi utama API. Detail request, response, parameter, dan authentication dapat dikembangkan lebih lanjut menggunakan dokumentasi API seperti Swagger/OpenAPI.

Pengembangan di Masa Depan

K-Shop masih dapat dikembangkan lebih lanjut untuk meningkatkan fungsionalitas, keamanan, dan kesiapan aplikasi untuk penggunaan pada skala yang lebih besar. Beberapa pengembangan yang dapat dilakukan antara lain:

• Payment Gateway Mengintegrasikan payment gateway agar proses pembayaran dapat dilakukan secara langsung melalui aplikasi.

• Product Search yang Lebih Advanced Mengembangkan pencarian produk dengan fitur seperti full-text search, filtering yang lebih kompleks, dan sorting berdasarkan berbagai atribut produk.

• Order Management Menambahkan fitur pengelolaan status pesanan dan riwayat transaksi yang lebih lengkap, termasuk proses pembaruan status pesanan oleh administrator.

• Admin Dashboard Menyediakan dashboard khusus administrator untuk mengelola produk, kategori, pengguna, stok, dan pesanan melalui antarmuka web.

• Cloud Storage Memindahkan penyimpanan file dari Docker volume ke object storage seperti Amazon S3 atau layanan object storage lainnya agar lebih sesuai untuk deployment berskala besar.

• Automated Testing Menambahkan unit test, integration test, dan end-to-end test untuk meningkatkan reliability aplikasi serta mengurangi risiko regresi ketika aplikasi dikembangkan.

• CI/CD Pipeline Mengintegrasikan pipeline CI/CD untuk mengotomatisasi proses build, testing, pembuatan Docker image, dan deployment aplikasi.

• Production Deployment Mengembangkan deployment menuju lingkungan production dengan reverse proxy, HTTPS, domain, environment management, monitoring, dan konfigurasi keamanan yang lebih ketat.

Acknowledgements

Pengembangan K-Shop memanfaatkan berbagai teknologi, framework, library, dan sumber daya open-source. Terima kasih kepada komunitas dan pengembang dari proyek-proyek berikut:

• React — sebagai framework/library utama untuk membangun antarmuka front-end.
• Vite — sebagai build tool dan development server untuk aplikasi front-end.
• Spring Boot — sebagai framework utama untuk membangun REST API dan back-end application.
• Spring Data JPA & Hibernate — untuk implementasi persistence layer dan interaksi dengan database.
• PostgreSQL — sebagai relational database management system.
• Docker & Docker Compose — untuk containerization dan deployment aplikasi.
• Nginx — sebagai web server untuk menyajikan hasil build front-end.
• Axios — untuk komunikasi HTTP antara front-end dan REST API.
• Lombok — untuk mengurangi boilerplate code pada aplikasi Java.

Referensi Dasar Pengembangan Kode:

• machadop1407 — Shopping Cart React Repository. Digunakan sebagai referensi awal untuk desain antarmuka dan struktur dasar halaman frontend e-commerce.

• Deepak12159 — Projects Repository. Digunakan sebagai referensi awal untuk desain antarmuka halaman autentikasi (Login dan Register), yang kemudian dimodifikasi dan diintegrasikan dengan sistem autentikasi Laravel pada proyek ini.

Seluruh proses pengembangan backend, perancangan REST API, struktur basis data, integrasi frontend–backend, sistem autentikasi, fitur keranjang belanja, pemrosesan pesanan, deployment, serta penyempurnaan antarmuka pengguna merupakan hasil pengembangan dan implementasi pada proyek K-Shop E-Commerce.

Author

Febrianto Kudadiri

Mahasiswa Teknik Informatika yang memiliki minat pada bidang Backend Development, Data Engineering, dan Distributed Systems. Proyek ini dikembangkan sebagai bagian dari portofolio pembelajaran dalam membangun aplikasi web full-stack menggunakan Laravel dan React.

• GitHub: https://github.com/EgoEquusFebrianto
• Email: febrianto.kudadiri.04@gmail.com
• LinkedIn: Febrianto Kudadri

License

Proyek ini dirilis di bawah MIT License.

Silakan menggunakan, mempelajari, memodifikasi, maupun mengembangkan proyek ini sesuai dengan ketentuan yang tercantum pada berkas LICENSE.