Skip to content

Instantly share code, notes, and snippets.

@dirumahrafif
Last active August 19, 2026 16:10
Show Gist options
  • Select an option

  • Save dirumahrafif/8d35baed58f4419614e1baf83b054e3a to your computer and use it in GitHub Desktop.

Select an option

Save dirumahrafif/8d35baed58f4419614e1baf83b054e3a to your computer and use it in GitHub Desktop.
Vibe Coding Anonymous Chat Using Laravel + Deploy Using Coolify

Baca Saya

Masukkan file:

  • prd.md
  • design.md
  • task-insturction.md ke dalam folder .agents

File Dockerfile diletakkan di root folder Project Laravel

version alpha
name Zed Dev
description Editor-dark, warmer than pitch, glyph-sharp.
colors
primary secondary tertiary neutral surface on-primary
#E5E4DF
#7B7A74
#5FB5D6
#161614
#1D1D1B
#161614
typography
display h1 body label
fontFamily fontSize fontWeight letterSpacing
JetBrains Mono
3.2rem
500
-0.02em
fontFamily fontSize fontWeight
JetBrains Mono
1.75rem
500
fontFamily fontSize lineHeight
Inter
0.92rem
1.55
fontFamily fontSize
JetBrains Mono
0.72rem
rounded
sm md lg
3px
6px
10px
spacing
sm md lg
8px
16px
32px
components
button-primary card
backgroundColor textColor rounded padding
{colors.tertiary}
{colors.on-primary}
{rounded.md}
12px 20px
backgroundColor textColor rounded padding
{colors.surface}
{colors.primary}
{rounded.lg}
24px

Overview

A developer-editor palette: warm near-black, cyan accent, mono everywhere.

Colors

The palette is built around high-contrast neutrals and a single accent that drives interaction.

  • Primary (#E5E4DF): Headlines and core text.
  • Secondary (#7B7A74): Borders, captions, and metadata.
  • Tertiary (#5FB5D6): The sole driver for interaction. Reserve it.
  • Neutral (#161614): The page foundation.

Typography

  • display: JetBrains Mono 3.2rem
  • h1: JetBrains Mono 1.75rem
  • body: Inter 0.92rem
  • label: JetBrains Mono 0.72rem

Do's and Don'ts

  • Do use Tertiary for exactly one action per screen.
  • Do let Neutral carry the composition — negative space is a feature.
  • Don't introduce gradients. This system is flat on purpose.
  • Don't mix Tertiary with alternate accents; the single-accent rule is load-bearing.
FROM php:8.4-fpm-alpine
# Install system dependencies & extension compiler tools
RUN apk add --no-cache \
nginx \
shadow \
curl \
libpng-dev \
libxml2-dev \
libzip-dev \
zip \
unzip \
git \
nodejs \
npm \
oniguruma-dev
# Install PHP extensions yang dibutuhkan Laravel secara lengkap
RUN docker-php-ext-install pdo_mysql bcmath gd xml zip mbstring
# Install Composer terbaru
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
WORKDIR /app
COPY . .
# Install dependencies dengan mengabaikan pengecekan platform lokal vps yang ketat
RUN composer install --no-dev --optimize-autoloader --ignore-platform-reqs
# Build frontend assets (Vite / Mix)
RUN npm install && npm run build
# Setup Nginx configuration inline
RUN echo 'server { \
listen 80; \
root /app/public; \
index index.php index.html; \
location / { \
try_files $uri $uri/ /index.php?$query_string; \
} \
location ~ \.php$ { \
try_files $uri =404; \
fastcgi_split_path_info ^(.+\.php)(/.+)$; \
fastcgi_pass 127.0.0.1:9000; \
fastcgi_index index.php; \
include fastcgi_params; \
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; \
fastcgi_param PATH_INFO $fastcgi_path_info; \
} \
}' > /etc/nginx/http.d/default.conf
# === TAMBAHKAN DUA BARIS PERINTAH PERMISSION INI ===
RUN chown -R www-data:www-data /app/storage /app/bootstrap/cache
RUN chmod -R 775 /app/storage /app/bootstrap/cache
EXPOSE 80
# Jalankan PHP-FPM dan Nginx bersamaan
CMD php-fpm -D && nginx -g "daemon off;"

Buatkan aplikasi Temporary Chat Room sederhana menggunakan Laravel 13 + PHP 8.4 + MySQL + TailwindCSS + Vanilla JavaScript.

Konsep aplikasi:

  • User bisa membuat room chat sementara.
  • Setelah room dibuat, sistem menghasilkan kode room unik.
  • User lain bisa join menggunakan link room.
  • Tidak perlu login/register.
  • Chat bersifat realtime sederhana menggunakan AJAX polling tiap 2 detik.
  • Room otomatis expired setelah 24 jam.
  • Semua chat otomatis terhapus saat room expired.
  • Ada fitur “user sedang mengetik”.

Fitur MVP:

  1. Homepage

    • Tombol "Create Room"
    • Input "Nama Anda"
    • Desain minimalis modern dark mode
  2. Create Room

    • Generate room code random 8 karakter (contoh: X7K9P2MQ), kombinasi huruf kapital + angka, collision resistant.
    • Simpan ke database
    • Set expired_at = now + 24 jam
    • Redirect ke halaman chat room
  3. Join Room

    • URL format: /room/{code}
    • User diminta memasukkan nama jika belum ada session
    • Simpan nama user menggunakan session sederhana
    • Cegah nama duplikat di room yang sama (tambahkan suffix seperti "Rafif (2)" jika nama sudah dipakai)
  4. Chat Room

    • Daftar pesan realtime
    • Input pesan + tombol kirim
    • Jumlah user online
    • Status “sedang mengetik”
    • Countdown room expired (realtime, berubah warna jika <1 jam tersisa)
    • Auto scroll ke bawah saat pesan baru masuk (smart scroll)
    • Pesan sendiri di kanan (violet), pesan orang lain di kiri
    • Tampilkan waktu setiap pesan (HH:mm)
    • Tombol "Copy Link" dengan toast notification
    • Tombol "Leave Room" dengan konfirmasi
    • Empty state yang bagus saat belum ada pesan
  5. Realtime

    • AJAX polling setiap 2 detik
    • Pesan baru muncul tanpa reload halaman
    • Polling typing indicator menggunakan GET endpoint read-only (jangan pakai POST yang mengupdate typing_at)
  6. Typing Indicator

    • True debounce 300ms: POST typing hanya dikirim setelah user berhenti mengetik 300ms (bukan setiap keystroke)
    • POST /room/{code}/typing — update typing_at = now() (hanya dipanggil saat user benar-benar mengetik)
    • GET /room/{code}/typing/status — query siapa yang sedang mengetik (dipanggil polling 2 detik, read-only, tidak memperbarui typing_at)
    • Backend: typing status = typing_at >= now() - 3 detik
    • Tampilkan "Rafif sedang mengetik..." (jangan tampilkan milik sendiri)
    • Animasi titik-titik
    • Typing indicator otomatis hilang max 5 detik setelah user berhenti mengetik
  7. Temporary Room Behavior

    • Room expired setelah 24 jam
    • Semua data (room, users, messages) otomatis dihapus
    • Gunakan foreign key dengan cascade delete
    • Buat Laravel Scheduler/Command untuk cleanup
  8. System Messages

    • Tampilkan "Rafif joined the room" saat user masuk
    • Tampilkan "Rafif left the room" saat user keluar (Leave Room)
  9. Security & Input Handling

    • Sanitize semua inputan dari user (nama dan pesan) untuk mencegah XSS dan script injection.
    • Gunakan Laravel Purifier atau HTMLPurifier untuk membersihkan pesan.
    • Strip tag dan escape output dengan benar di Blade dan JSON response.
    • Batasi panjang nama maksimal 30 karakter dan pesan maksimal 500 karakter.
  10. Additional Features

    • Fitur Share Room via WhatsApp dan Telegram (tombol share)
    • Notifikasi suara saat ada pesan baru (dengan toggle on/off)
    • Toast notification untuk success, error, dan info
    • Rate limiting sederhana (maks 1 pesan per detik per user)

Database Structure:

  • rooms (id, code, expired_at, timestamps)
  • users (id, room_id, name, last_seen, typing_at, timestamps)
  • messages (id, room_id, user_id, message, timestamps)

Backend Logic:

  • Update last_seen saat user aktif, kirim pesan, atau typing
  • Online user = last_seen < 30 detik yang lalu
  • Cek room expired di middleware
  • CSRF protection untuk semua AJAX

Frontend:

  • Blade + TailwindCSS (modern dark mode, responsive mobile friendly)
  • Chat bubble modern
  • Typing indicator dengan animasi
  • Countdown realtime
  • Sound notification toggle

JavaScript:

  • AJAX polling + axios
  • Debounce untuk typing
  • Smart auto scroll
  • Toast notification
  • Sound notification

Code Style:

  • Clean, readable, well commented
  • Gunakan Eloquent relationship
  • Validation yang baik
  • Pisahkan logic dengan rapi
  • Sertakan migration, model, route, controller, command scheduler, dan semua blade file yang diperlukan

Tujuan: Aplikasi harus bisa langsung dijalankan dan didemokan sebagai realtime temporary anonymous chat room yang modern, lengkap dengan typing indicator, online users, system messages, sound notification, input sanitization, dan auto delete setelah expired.

Berikan juga instruksi cara menjalankan aplikasi setelah kode selesai (migrate, npm install, scheduler, dll).

Task Instruction untuk OpenCode

Proyek: Temporary Chat Room (TempChat)

Saya telah menyimpan:

  • Spesifikasi lengkap proyek → prd.md
  • Panduan Design & UI/UX → design.md

Instruksi Utama

  1. Selalu baca dan ikuti kedua file prd.md dan design.md sebelum mengerjakan apapun.
  2. Ikuti panduan design di design.md secara ketat untuk semua hal yang berhubungan dengan UI/UX, warna, layout, dan komponen.
  3. Kerjakan task secara bertahap dan rapi.

Struktur Task Checklist

Gunakan struktur kategori berikut:

1. Project Setup & Configuration

2. Database & Migration

3. Models & Relationships

4. Backend Logic & API

5. Security (Input Sanitization, Rate Limiting, XSS Protection, CSRF)

6. Frontend & Blade Views (Ikuti design.md)

7. JavaScript & Realtime Features

8. Additional Features (Sound Notification, Share, Toast, System Message, dll)

9. Cleanup Command & Scheduler

10. Final Polish & Bug Fixes

Aturan Wajib Update Tasklist (PENTING!)

Setiap kali selesai mengerjakan satu task atau satu grup task, kamu WAJIB melakukan langkah berikut sebelum melapor ke saya:

  1. Update file .agents/tasklist.md
  2. Tandai task yang selesai dengan [x]
  3. Tambahkan emoji ✅ di depan task
  4. Update progress keseluruhan proyek (contoh: Progress: 35%)
  5. Tambahkan catatan singkat di bawah task yang selesai (file apa yang dibuat/diubah)

Contoh format:

- [x] ✅ Task 2.3 - Membuat Room Migration `[Mudah]` (Selesai)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment