Fitur

• Login dan registrasi akun manual
• Login menggunakan OAuth Google
• Splash screen setelah login manual dan Google
• Reset password berbasis token
• Proteksi halaman privat agar hanya user login yang bisa masuk
• Feed postingan dari database
• Membuat, mengedit, dan menghapus postingan milik sendiri
• Edit postingan termasuk ganti gambar langsung dari menu tiga titik postingan
• Upload gambar postingan melalui presigned URL S3 (maksimal 1 gambar)
• Like dan unlike postingan
• Status like tetap tersimpan setelah refresh
• Detail postingan (modal dan deep link /posts/:id)
• Tambah, edit, dan hapus komentar
• Dialog konfirmasi hapus komentar (custom, bukan dialog browser default)
• Balas komentar
• Notifikasi untuk like, komentar, dan balasan komentar
• Dropdown notifikasi dengan close otomatis saat klik di luar
• Halaman notifikasi
• Realtime update untuk notifikasi dan perubahan feed
• Realtime refresh untuk angka like dan komentar
• Daftar semua pengguna
• Profil publik pengguna dari halaman feed dan halaman pengguna
• Username dan bio pengguna
• Nama tampil mengikuti username jika sudah diset, jika belum memakai nama asli
• Edit profil pengguna
• Upload avatar pengguna melalui presigned URL S3
• Ubah nama, username, bio, email, avatar, dan password
• Logout
• State management frontend menggunakan Zustand dan TanStack Query
• Struktur frontend modular per fitur

Teknologi

• Runtime: Bun
• Frontend: React 19, Vite 8, TypeScript, Tailwind CSS 4, Lucide React
• State Management: Zustand, TanStack Query
• Backend: Elysia, Prisma 7
• Database: libSQL / Turso (lokal & fallback production), PostgreSQL / AWS RDS (production primary)
• Cloud: AWS S3, AWS CloudFront, AWS Lambda Function URL, AWS API Gateway WebSocket, AWS DynamoDB
• Build: Docker
• Linting: ESLint

Struktur Folder

fakebook/
├── apps/
│   ├── api/
│   │   ├── prisma/
│   │   │   ├── migrations/
│   │   │   ├── schema.prisma          SQLite (lokal dev)
│   │   │   ├── schema-pg.prisma       PostgreSQL (production)
│   │   │   └── seed-home-feed.sql
│   │   ├── scripts/
│   │   │   └── backfill-usernames.mjs
│   │   ├── src/
│   │   │   ├── db/
│   │   │   │   ├── index.ts           unified client (RDS → Turso fallback)
│   │   │   │   ├── db.ts              libSQL/Turso client
│   │   │   │   └── db-postgres.ts     PostgreSQL RDS client
│   │   │   ├── generated/             hasil Prisma generate (tidak diedit)
│   │   │   ├── http/
│   │   │   │   ├── auth.ts
│   │   │   │   └── errors.ts
│   │   │   ├── lib/
│   │   │   │   ├── prisma-errors.ts   helper deteksi error Prisma (P2002)
│   │   │   │   ├── prisma-selects.ts  shared Prisma select/include constants
│   │   │   │   └── user-utils.ts      username normalization & generation
│   │   │   ├── realtime/
│   │   │   │   └── broadcast.ts
│   │   │   ├── routes/
│   │   │   │   ├── auth/
│   │   │   │   ├── comments/
│   │   │   │   ├── notifications/
│   │   │   │   ├── posts/
│   │   │   │   ├── profile/
│   │   │   │   ├── uploads/
│   │   │   │   └── users/
│   │   │   ├── services/
│   │   │   │   ├── auth-service.ts
│   │   │   │   ├── comment-service.ts
│   │   │   │   ├── google-auth-service.ts
│   │   │   │   ├── like-service.ts
│   │   │   │   ├── notification-service.ts
│   │   │   │   ├── post-service.ts
│   │   │   │   ├── profile-service.ts
│   │   │   │   └── user-service.ts
│   │   │   ├── index.ts               entry point HTTP Lambda
│   │   │   └── ws-handler.ts          entry point WebSocket Lambda
│   │   ├── Dockerfile.lambda
│   │   ├── eslint.config.js
│   │   ├── package.json
│   │   ├── prisma.config.ts
│   │   └── tsconfig.json
│   └── web/
│       ├── public/
│       │   ├── images/
│       │   │   └── auth/
│       │   └── favicon.svg
│       ├── src/
│       │   ├── components/
│       │   │   └── avatar.tsx          shared avatar component lintas route
│       │   ├── hooks/
│       │   │   ├── use-notification-sync.ts
│       │   │   └── use-notifications.ts
│       │   ├── layouts/
│       │   │   └── app-layout.tsx
│       │   ├── lib/
│       │   │   ├── navigation.ts
│       │   │   ├── notification-display.tsx
│       │   │   ├── notification-utils.ts
│       │   │   ├── query-client.ts
│       │   │   ├── realtime-socket.ts  manajemen koneksi WebSocket + reconnect
│       │   │   ├── user-display.ts
│       │   │   └── validate-image-file.ts
│       │   ├── routes/
│       │   │   ├── auth/
│       │   │   │   ├── components/
│       │   │   │   ├── hooks/
│       │   │   │   ├── forgot-password-page.tsx
│       │   │   │   ├── login-page.tsx
│       │   │   │   └── register-page.tsx
│       │   │   ├── home/
│       │   │   │   ├── components/
│       │   │   │   └── home-page.tsx
│       │   │   ├── notifications/
│       │   │   │   └── notifications-page.tsx
│       │   │   ├── posts/
│       │   │   │   ├── components/
│       │   │   │   ├── hooks/
│       │   │   │   ├── utils/
│       │   │   │   ├── post-detail-page.tsx
│       │   │   │   └── post-detail-route.tsx   halaman deep link /posts/:id
│       │   │   ├── profile/
│       │   │   │   ├── hooks/
│       │   │   │   └── profile-page.tsx
│       │   │   └── users/
│       │   │       ├── public-user-profile-page.tsx
│       │   │       └── users-page.tsx
│       │   ├── services/
│       │   │   └── api.ts
│       │   ├── stores/
│       │   │   ├── auth-store.ts
│       │   │   ├── index.ts
│       │   │   ├── realtime-store.ts
│       │   │   └── ui-store.ts
│       │   ├── types/
│       │   │   └── social.ts
│       │   ├── app.tsx
│       │   ├── index.css
│       │   └── main.tsx
│       ├── eslint.config.js
│       ├── index.html
│       ├── package.json
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── packages/
│   └── shared/
│       ├── src/
│       │   └── index.ts
│       ├── package.json
│       └── tsconfig.json
├── bun.lock
├── package.json
└── tsconfig.base.json

Cara Menjalankan

Prasyarat: Bun, Git, Docker (opsional, hanya untuk build image Lambda).

1. Clone repositori:

   git clone git@github.com:franzxml/fakebook.git
   cd fakebook

   Atau via HTTPS:

   git clone https://github.com/franzxml/fakebook.git
   cd fakebook

2. Install dependensi:

   bun install

3. Siapkan environment frontend:

   cp apps/web/.env.example apps/web/.env

   Isi apps/web/.env:

   VITE_API_URL="http://localhost:3000"
   VITE_GOOGLE_CLIENT_ID="your-google-oauth-client-id.apps.googleusercontent.com"
   VITE_WEBSOCKET_URL="wss://your-api-gateway-websocket-url"
   

4. Siapkan environment backend:

   cp apps/api/.env.example apps/api/.env

   Isi apps/api/.env:

   DATABASE_URL="file:./prisma/dev.db"
   PORT="3000"
   CORS_ORIGIN="http://localhost:5173"
   GOOGLE_CLIENT_ID="your-google-oauth-client-id.apps.googleusercontent.com"
   UPLOADS_BUCKET="fakebook-user-content-example"
   UPLOADS_PUBLIC_BASE_URL="https://fakebook-user-content-example.s3.us-east-1.amazonaws.com"
   WEBSOCKET_CONNECTIONS_TABLE="fakebook-websocket-connections"
   WEBSOCKET_API_ENDPOINT="https://your-websocket-api.execute-api.us-east-1.amazonaws.com/prod"
   

5. Generate Prisma Client:

   bun run prisma:generate

6. Jalankan migrasi database lokal:

   bun run prisma:migrate

7. Jalankan frontend dan backend bersamaan:

   bun run dev

8. Buka di browser:

   • Frontend: http://localhost:5173
   • Backend: http://localhost:3000

Scripts

Perintah	Keterangan
bun run dev	Jalankan frontend dan backend bersamaan
bun run dev:web	Jalankan frontend Vite
bun run dev:api	Jalankan backend Elysia dengan watch mode
bun run build	Build shared package, backend, dan frontend
bun run build:shared	Build package shared
bun run build:api	Build backend
bun run build:web	Build frontend
bun run build:web:s3	Build frontend untuk deployment S3
bun run typecheck	Typecheck semua workspace
bun run typecheck:shared	Typecheck package shared
bun run typecheck:api	Typecheck backend
bun run typecheck:web	Typecheck frontend
bun run lint	Periksa kode backend dan frontend dengan ESLint
bun run lint:api	Periksa kode backend dengan ESLint
bun run lint:web	Periksa kode frontend dengan ESLint
bun run prisma:generate	Generate Prisma Client dari schema SQLite (lokal)
bun run prisma:generate:pg	Generate Prisma Client dari schema PostgreSQL (production)
bun run prisma:migrate	Jalankan migrasi database lokal
bun run prisma:migrate:pg	Jalankan migrasi database PostgreSQL production
bun run docker:build:api	Build Docker image backend Lambda lokal
bun run deploy:web:s3	Upload hasil build frontend ke S3 (butuh AWS_S3_BUCKET)
bun run deploy:web:invalidate	Buat invalidation CloudFront (butuh AWS_CLOUDFRONT_DISTRIBUTION_ID)

Deployment

Frontend

Build lalu upload ke S3 dan invalidate CloudFront:

bun run build:web:s3
AWS_S3_BUCKET=s3-monorepo-frontend-prod-2026 bun run deploy:web:s3
AWS_CLOUDFRONT_DISTRIBUTION_ID=E3PHP2PBFP7CIC bun run deploy:web:invalidate

URL production: https://d3b2jcy5w87rzf.cloudfront.net

Backend

Build container image, push ke ECR, update Lambda:

docker buildx build \
  --platform linux/arm64 \
  --provenance=false \
  -f apps/api/Dockerfile.lambda \
  -t 722765871100.dkr.ecr.us-east-1.amazonaws.com/ppwl-clone-facebook-api:<tag> \
  --push .

aws lambda update-function-code \
  --function-name ppwl-clone-facebook-api \
  --region us-east-1 \
  --image-uri 722765871100.dkr.ecr.us-east-1.amazonaws.com/ppwl-clone-facebook-api:<tag>

URL production: https://2gtrnedjhmootg6bu5e24kwdmq0oyuns.lambda-url.us-east-1.on.aws

Database Production

Database production menggunakan dua layer:

1. PostgreSQL RDS (primary) — set DATABASE_PG_URL di Lambda environment.
2. Turso (fallback) — set DATABASE_URL + DATABASE_AUTH_TOKEN. Aktif otomatis jika RDS tidak responsif dalam 3 detik.

Generate Prisma Client PostgreSQL sebelum build Docker:

bun run prisma:generate:pg

Jalankan migrasi ke PostgreSQL RDS:

DATABASE_PG_URL="postgresql://..." bun run prisma:migrate:pg

WebSocket production: wss://8z4wlfa9cd.execute-api.us-east-1.amazonaws.com/prod

Pengembang

• franzxml
• h1101241039-cmd
• ghinaaa09
• arifquuu
• isanctuarry