Belajar GraphQL - Project: Complete E-Commerce with GraphQL

#Pendahuluan

Mulai episode 41, kalian memasuki fase real-world projects — menggabungkan seluruh keterampilan dari 40 episode sebelumnya dalam satu aplikasi nyata. Project pertama: platform e-commerce lengkap.

Kita akan merancang arsitektur monorepo, membangun backend GraphQL dengan Prisma, mengimplementasikan fitur inti seperti product catalog dan shopping cart, mengintegrasikan pembayaran Stripe, dan menutup dengan pertimbangan produksi.

#Project Architecture

#Monorepo dengan Turborepo

Project ini memakai monorepo — satu repository berisi banyak package:

npx create-turbo@latest ecommerce

Struktur yang kita bangun:

ecommerce/
  apps/
    web/       # Next.js + Apollo Client
    api/       # Node.js + Apollo Server + Prisma
  packages/
    ui/        # komponen bersama
    shared/    # tipe dan util bersama

#Stack Pilihan

• Frontend: Next.js + Apollo Client (episode 25 dan 27).
• Backend: Node.js + Apollo Server 4 (episode 7).
• Database: PostgreSQL + Prisma (episode 8).
• Auth: JWT (episode 13) dengan RBAC (episode 14).

Schema GraphQL dibagi domain: Product, Cart, Order, dan User.

#Core Features Implementation

#Product Catalog dengan Search

Model Prisma untuk produk:

Model Prisma untuk produk

model Product {
  id          Int      @id @default(autoincrement())
  name        String
  description String
  price       Int
  category    String
  stock       Int      @default(0)
  createdAt   DateTime @default(now())
}

Query dengan search dan filter:

type Query {
  products(search: String, category: String, first: Int!, after: String): ProductConnection!
}

Resolver memakai kombinasi pencarian teks, filter kategori, dan cursor pagination (episode 12). Tambahkan index di kolom yang sering di-filter.

#Shopping Cart dengan Mutations

Cart adalah domain yang melibatkan mutation intensif:

type Mutation {
  addToCart(input: AddToCartInput!): Cart
  updateCartItem(input: UpdateCartItemInput!): Cart
  removeFromCart(itemId: ID!): Cart
}

Cart disimpan per user di database, dengan pengecekan stok saat item ditambahkan (validasi di resolver, episode 10). Setiap mutation mengembalikan state cart terbaru agar client tinggal menampilkan.

#User Auth dan Order Management

Auth memakai pola dari episode 13: mutation login dan signup dengan bcrypt dan JWT, user disematkan di context. Order management memakai result pattern dengan union (episode 11) agar error (stok habis, kartu ditolak) tertangani rapi.

#Advanced Features

#Pembayaran Stripe

Integrasi pembayaran memakai pola checkout Stripe; install dengan npm install stripe:

Checkout session Stripe

import Stripe from "stripe";
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
 
async function createCheckout(_, args, ctx) {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: args.input.items.map((item) => ({
      price_data: {
        currency: "idr",
        product_data: { name: item.name },
        unit_amount: item.price,
      },
      quantity: item.quantity,
    })),
    mode: "payment",
    success_url: "https://app.kalian.com/order/success",
    cancel_url: "https://app.kalian.com/cart",
  });
  return { url: session.url };
}

Webhook Stripe memverifikasi pembayaran dan mengubah status order — ingat untuk memverifikasi signature webhook demi keamanan.

#Real-Time Order Tracking dan Rekomendasi

Real-time order tracking memakai subscriptions (episode 16): setiap perubahan status order di-publish, dan halaman tracking mendengarkannya. Product recommendations bisa sederhana dulu: produk satu kategori atau yang paling banyak dilihat, di-cache di Redis.

#Production Considerations

#Deployment, Security, dan Monitoring

Sebelum production, terapkan seluruh best practices:

• Deployment: Docker multi-stage dan CI/CD (episode 31-32).
• Security: depth limit, cost analysis, rate limiting, matikan introspection (episode 15).
• Performance: DataLoader untuk N+1 (episode 9), caching query umum.
• Monitoring: Apollo Studio, health checks, structured logging (episode 24).

docker compose up -d --build

Project e-commerce ini adalah fondasi yang bisa kalian kembangkan: tambahkan admin dashboard, analitik, dan email notification setelah arsitektur inti berjalan.

#Penutup

Inti yang harus dibawa pulang:

• Monorepo dengan Turborepo memisahkan apps dan packages dengan rapi.
• Product catalog memakai search, filter, dan cursor pagination.
• Cart dan order memakai mutation dengan validasi dan result pattern.
• Stripe checkout session menangani pembayaran; webhook memverifikasi.
• Subscriptions menambah real-time order tracking.
• Terapkan security, caching, dan monitoring sebelum production.

Di episode 42 selanjutnya kalian akan mempelajari proyek social media platform — user profiles dan relationships, post creation dengan media upload, komentar dan reaksi, following-followers, feed dengan pagination, notifikasi real-time, chat, hingga strategi performa feed di skala besar. Kalian akan membangun aplikasi sosial lengkap!