{"id":50597488,"url":"https://github.com/franzxml/fakebook","last_synced_at":"2026-06-05T15:30:44.390Z","repository":{"id":356540633,"uuid":"1231452641","full_name":"franzxml/fakebook","owner":"franzxml","description":"Fakebook adalah aplikasi sosial media berbasis web. Aplikasi ini menyediakan alur utama seperti autentikasi, feed postingan, upload gambar, like, komentar dan balasan komentar, notifikasi, daftar pengguna, profil publik, serta pengelolaan profil pengguna.","archived":false,"fork":false,"pushed_at":"2026-05-27T13:46:00.000Z","size":4964,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T15:26:07.298Z","etag":null,"topics":["klon","komunitas","sosial"],"latest_commit_sha":null,"homepage":"https://d3b2jcy5w87rzf.cloudfront.net/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/franzxml.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-07T01:21:11.000Z","updated_at":"2026-05-27T13:46:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/franzxml/fakebook","commit_stats":null,"previous_names":["franzxml/ppwl-clone-facebook","franzxml/fakebook"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/franzxml/fakebook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franzxml%2Ffakebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franzxml%2Ffakebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franzxml%2Ffakebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franzxml%2Ffakebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/franzxml","download_url":"https://codeload.github.com/franzxml/fakebook/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franzxml%2Ffakebook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33949038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["klon","komunitas","sosial"],"created_at":"2026-06-05T15:30:43.536Z","updated_at":"2026-06-05T15:30:44.380Z","avatar_url":"https://github.com/franzxml.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Laporan\n\nLaporan progress dapat diakses melalui tautan berikut:\n\n[Laporan Progress Fakebook](https://docs.google.com/document/d/1OwPiXkDV1Hle0Uq3St45m89hIQwYwXTj3xJ8fGbesxo/edit?tab=t.9hq5o51i0w7p)\n\n## Fitur\n\n* Login dan registrasi akun manual\n* Login menggunakan OAuth Google\n* Splash screen setelah login manual dan Google\n* Reset password berbasis token\n* Proteksi halaman privat agar hanya user login yang bisa masuk\n* Feed postingan dari database\n* Membuat, mengedit, dan menghapus postingan milik sendiri\n* Edit postingan termasuk ganti gambar langsung dari menu tiga titik postingan\n* Upload gambar postingan melalui presigned URL S3 (maksimal 1 gambar)\n* Like dan unlike postingan\n* Status like tetap tersimpan setelah refresh\n* Detail postingan\n* Tambah, edit, dan hapus komentar\n* Dialog konfirmasi hapus komentar (custom, bukan dialog browser default)\n* Balas komentar\n* Notifikasi untuk like, komentar, dan balasan komentar\n* Dropdown notifikasi dengan close otomatis saat klik di luar\n* Halaman notifikasi\n* Realtime update untuk notifikasi dan perubahan feed\n* Realtime refresh untuk angka like dan komentar\n* Daftar semua pengguna\n* Profil publik pengguna dari halaman feed dan halaman pengguna\n* Username dan bio pengguna\n* Nama tampil mengikuti username jika sudah diset, jika belum memakai nama asli\n* Edit profil pengguna\n* Upload avatar pengguna melalui presigned URL S3\n* Ubah nama, username, bio, email, avatar, dan password\n* Logout\n* State management frontend menggunakan Zustand\n* Struktur frontend modular per fitur\n\n## Teknologi\n\n* Bun\n* React 19\n* Vite 8\n* TypeScript\n* Tailwind CSS 4\n* Lucide React\n* Zustand\n* Elysia\n* Prisma 7\n* libSQL / Turso (lokal \u0026 fallback production)\n* PostgreSQL / AWS RDS (production primary)\n* AWS S3\n* AWS CloudFront\n* AWS Lambda Function URL\n* AWS API Gateway WebSocket\n* AWS DynamoDB untuk koneksi WebSocket\n* Docker untuk build image Lambda API\n* ESLint\n\n## Struktur Folder\n\n```text\nfakebook/\n|-- apps/\n|   |-- api/\n|   |   |-- prisma/\n|   |   |   |-- migrations/\n|   |   |   |-- schema.prisma        ← SQLite (lokal dev)\n|   |   |   |-- schema-pg.prisma     ← PostgreSQL (production)\n|   |   |   `-- seed-home-feed.sql\n|   |   |-- scripts/\n|   |   |   `-- backfill-usernames.mjs\n|   |   |-- src/\n|   |   |   |-- db/\n|   |   |   |   |-- index.ts         ← unified client (RDS → Turso fallback)\n|   |   |   |   |-- db.ts            ← libSQL/Turso client\n|   |   |   |   `-- dbPostgres.ts    ← PostgreSQL RDS client\n|   |   |   |-- generated/           ← hasil Prisma generate (tidak diedit)\n|   |   |   |-- http/\n|   |   |   |   |-- auth.ts\n|   |   |   |   `-- errors.ts\n|   |   |   |-- lib/\n|   |   |   |   |-- prismaSelects.ts ← shared Prisma select/include constants\n|   |   |   |   `-- userUtils.ts     ← username normalization \u0026 generation\n|   |   |   |-- realtime/\n|   |   |   |   `-- broadcast.ts\n|   |   |   |-- routes/\n|   |   |   |   |-- auth/\n|   |   |   |   |-- comments/\n|   |   |   |   |-- notifications/\n|   |   |   |   |-- posts/\n|   |   |   |   |-- profile/\n|   |   |   |   |-- uploads/\n|   |   |   |   `-- users/\n|   |   |   |-- services/\n|   |   |   |   |-- commentService.ts\n|   |   |   |   |-- googleAuthService.ts\n|   |   |   |   `-- profileService.ts\n|   |   |   |-- index.ts             ← entry point HTTP Lambda\n|   |   |   `-- wsHandler.ts         ← entry point WebSocket Lambda\n|   |   |-- Dockerfile.lambda\n|   |   |-- package.json\n|   |   |-- prisma.config.ts\n|   |   `-- tsconfig.json\n|   `-- web/\n|       |-- public/\n|       |   |-- images/\n|       |   |   `-- auth/\n|       |   `-- favicon.svg\n|       |-- src/\n|       |   |-- components/\n|       |   |   `-- Avatar.tsx        ← shared avatar component lintas route\n|       |   |-- hooks/\n|       |   |   `-- useNotificationSync.ts\n|       |   |-- layouts/\n|       |   |   `-- AppLayout.tsx\n|       |   |-- lib/\n|       |   |   |-- navigation.ts\n|       |   |   |-- notificationDisplay.tsx\n|       |   |   |-- notificationUtils.ts\n|       |   |   |-- userDisplay.ts\n|       |   |   `-- validateImageFile.ts\n|       |   |-- routes/\n|       |   |   |-- auth/\n|       |   |   |   |-- components/\n|       |   |   |   |-- hooks/\n|       |   |   |   |-- ForgotPasswordPage.tsx\n|       |   |   |   |-- LoginPage.tsx\n|       |   |   |   `-- RegisterPage.tsx\n|       |   |   |-- home/\n|       |   |   |   |-- components/\n|       |   |   |   `-- HomePage.tsx\n|       |   |   |-- notifications/\n|       |   |   |   `-- NotificationsPage.tsx\n|       |   |   |-- posts/\n|       |   |   |   |-- components/\n|       |   |   |   |-- hooks/\n|       |   |   |   |-- utils/\n|       |   |   |   `-- PostDetailPage.tsx\n|       |   |   |-- profile/\n|       |   |   |   |-- hooks/\n|       |   |   |   `-- ProfilePage.tsx\n|       |   |   `-- users/\n|       |   |       |-- PublicUserProfilePage.tsx\n|       |   |       `-- UsersPage.tsx\n|       |   |-- services/\n|       |   |   `-- api.ts\n|       |   |-- stores/\n|       |   |   |-- authStore.ts\n|       |   |   |-- feedStore.ts\n|       |   |   |-- index.ts\n|       |   |   |-- notificationStore.ts\n|       |   |   |-- realtimeStore.ts\n|       |   |   `-- uiStore.ts\n|       |   |-- types/\n|       |   |   `-- social.ts\n|       |   |-- App.tsx\n|       |   |-- index.css\n|       |   `-- main.tsx\n|       |-- eslint.config.js\n|       |-- index.html\n|       |-- package.json\n|       |-- tsconfig.app.json\n|       |-- tsconfig.json\n|       |-- tsconfig.node.json\n|       `-- vite.config.ts\n|-- packages/\n|   `-- shared/\n|       |-- src/\n|       |   `-- index.ts\n|       |-- package.json\n|       `-- tsconfig.json\n|-- bun.lock\n|-- package.json\n|-- README.md\n`-- tsconfig.base.json\n```\n\n## Cara Menjalankan Lokal\n\n1. Pastikan komputer sudah memiliki **Bun**, **Git**, dan **Docker** jika ingin build image backend untuk Lambda.\n\n2. Clone repositori.\n\n   ```bash\n   git clone git@github.com:franzxml/fakebook.git\n   cd fakebook\n   ```\n\n   Jika menggunakan HTTPS:\n\n   ```bash\n   git clone https://github.com/franzxml/fakebook.git\n   cd fakebook\n   ```\n\n3. Install dependensi.\n\n   ```bash\n   bun install\n   ```\n\n4. Siapkan environment frontend.\n\n   ```bash\n   cp apps/web/.env.example apps/web/.env\n   ```\n\n   Contoh konfigurasi lokal:\n\n   ```bash\n   VITE_API_URL=\"http://localhost:3000\"\n   VITE_GOOGLE_CLIENT_ID=\"your-google-oauth-client-id.apps.googleusercontent.com\"\n   VITE_WEBSOCKET_URL=\"wss://your-api-gateway-websocket-url\"\n   ```\n\n5. Siapkan environment backend.\n\n   ```bash\n   cp apps/api/.env.example apps/api/.env\n   ```\n\n   Contoh konfigurasi lokal:\n\n   ```bash\n   DATABASE_URL=\"file:./prisma/dev.db\"\n   PORT=\"3000\"\n   CORS_ORIGIN=\"http://localhost:5173\"\n   ADMIN_USERS_KEY=\"your-secret-key\"\n   GOOGLE_CLIENT_ID=\"your-google-oauth-client-id.apps.googleusercontent.com\"\n   UPLOADS_BUCKET=\"fakebook-user-content-example\"\n   UPLOADS_PUBLIC_BASE_URL=\"https://fakebook-user-content-example.s3.us-east-1.amazonaws.com\"\n   WEBSOCKET_CONNECTIONS_TABLE=\"fakebook-websocket-connections\"\n   WEBSOCKET_API_ENDPOINT=\"https://your-websocket-api.execute-api.us-east-1.amazonaws.com/prod\"\n   ```\n\n6. Generate Prisma Client.\n\n   ```bash\n   bun run prisma:generate\n   ```\n\n7. Jalankan migrasi database lokal.\n\n   ```bash\n   bun run prisma:migrate\n   ```\n\n8. Jalankan frontend dan backend bersamaan.\n\n   ```bash\n   bun run dev\n   ```\n\n9. Buka aplikasi lokal.\n\n   ```bash\n   http://localhost:5173\n   ```\n\n   Backend lokal berjalan di:\n\n   ```bash\n   http://localhost:3000\n   ```\n\n## Script\n\n* `bun run dev` menjalankan frontend dan backend secara bersamaan.\n* `bun run dev:web` menjalankan frontend Vite.\n* `bun run dev:api` menjalankan backend Elysia dengan watch mode.\n* `bun run build` build shared package, backend, dan frontend.\n* `bun run build:shared` build package shared.\n* `bun run build:api` build backend.\n* `bun run build:web` build frontend.\n* `bun run build:web:s3` build frontend sebelum deployment S3.\n* `bun run typecheck` menjalankan typecheck semua workspace.\n* `bun run typecheck:shared` typecheck package shared.\n* `bun run typecheck:api` typecheck backend.\n* `bun run typecheck:web` typecheck frontend.\n* `bun run lint` menjalankan ESLint pada frontend.\n* `bun run prisma:generate` generate Prisma Client dari schema SQLite (lokal).\n* `bun run prisma:generate:pg` generate Prisma Client dari schema PostgreSQL (production).\n* `bun run prisma:migrate` menjalankan migrasi database lokal.\n* `bun run prisma:migrate:pg` menjalankan migrasi database PostgreSQL production.\n* `bun run docker:build:api` build Docker image backend Lambda lokal.\n* `bun run deploy:web:s3` upload hasil build frontend ke AWS S3. Variabel `AWS_S3_BUCKET` harus tersedia.\n* `bun run deploy:web:invalidate` membuat invalidation CloudFront. Variabel `AWS_CLOUDFRONT_DISTRIBUTION_ID` harus tersedia.\n\n## Deployment\n\n### Frontend\n\nFrontend production di-build dari `apps/web` lalu di-upload ke S3 dan disajikan lewat CloudFront.\n\n```bash\nbun run build:web:s3\nAWS_S3_BUCKET=s3-monorepo-frontend-prod-2026 bun run deploy:web:s3\nAWS_CLOUDFRONT_DISTRIBUTION_ID=E3PHP2PBFP7CIC bun run deploy:web:invalidate\n```\n\n### Backend\n\nBackend production berjalan sebagai container image di AWS Lambda. Image dibangun dari `apps/api/Dockerfile.lambda`, dipush ke ECR, lalu Lambda di-update menggunakan image terbaru.\n\n```bash\ndocker buildx build \\\n  --platform linux/arm64 \\\n  --provenance=false \\\n  -f apps/api/Dockerfile.lambda \\\n  -t 722765871100.dkr.ecr.us-east-1.amazonaws.com/ppwl-clone-facebook-api:\u003ctag\u003e \\\n  --push .\n\naws lambda update-function-code \\\n  --function-name ppwl-clone-facebook-api \\\n  --region us-east-1 \\\n  --image-uri 722765871100.dkr.ecr.us-east-1.amazonaws.com/ppwl-clone-facebook-api:\u003ctag\u003e\n```\n\n### Database Production\n\nDatabase production menggunakan dua layer:\n\n1. **PostgreSQL RDS (primary)** — set `DATABASE_PG_URL` di Lambda environment.\n2. **Turso (fallback)** — set `DATABASE_URL` + `DATABASE_AUTH_TOKEN`. Aktif otomatis jika RDS tidak responsif dalam 3 detik.\n\nGenerate Prisma Client PostgreSQL sebelum build Docker:\n\n```bash\nbun run prisma:generate:pg\n```\n\nJalankan migrasi ke PostgreSQL RDS:\n\n```bash\nDATABASE_PG_URL=\"postgresql://...\" bun run prisma:migrate:pg\n```\n\n## Domain Production\n\nFrontend production:\n\n[https://d3b2jcy5w87rzf.cloudfront.net/](https://d3b2jcy5w87rzf.cloudfront.net/)\n\nBackend production:\n\n[https://2gtrnedjhmootg6bu5e24kwdmq0oyuns.lambda-url.us-east-1.on.aws/](https://2gtrnedjhmootg6bu5e24kwdmq0oyuns.lambda-url.us-east-1.on.aws/)\n\nWebSocket production:\n\n```text\nwss://8z4wlfa9cd.execute-api.us-east-1.amazonaws.com/prod\n```\n\n## Resource AWS\n\n* Frontend CDN: AWS CloudFront\n* CloudFront Distribution ID: `E3PHP2PBFP7CIC`\n* Frontend Storage: AWS S3\n* S3 Bucket: `s3-monorepo-frontend-prod-2026`\n* Backend Runtime: AWS Lambda\n* Lambda Function: `ppwl-clone-facebook-api`\n* Lambda Region: `us-east-1`\n* Lambda Function URL: `https://2gtrnedjhmootg6bu5e24kwdmq0oyuns.lambda-url.us-east-1.on.aws/`\n* Backend ECR: `722765871100.dkr.ecr.us-east-1.amazonaws.com/ppwl-clone-facebook-api`\n* Upload Bucket: `fakebook-user-content-722765871100-us-east-1`\n* WebSocket API: `wss://8z4wlfa9cd.execute-api.us-east-1.amazonaws.com/prod`\n* WebSocket Connections Table: `fakebook-websocket-connections`\n\n## Catatan Struktur\n\n* Folder `apps/web/src/routes` mengikuti domain halaman atau fitur.\n* Folder `components`, `hooks`, dan `utils` di dalam route dipakai untuk kode yang spesifik pada route tersebut.\n* Folder `apps/web/src/components` berisi komponen shared yang dipakai lintas route (misal `Avatar`).\n* Folder `apps/web/src/lib` berisi utility functions dan helpers yang dipakai lintas route.\n* Folder `apps/web/src/stores` berisi Zustand store dengan penamaan camelCase dan diekspor lewat `stores/index.ts`.\n* Folder `apps/web/public/images` digunakan untuk asset statis publik.\n* Folder `apps/api/src/routes` mengikuti resource API (resource-based routing).\n* Folder `apps/api/src/services` berisi business logic yang diekstrak dari route handlers.\n* Folder `apps/api/src/lib` berisi shared utility dipakai lintas route dan service.\n* Folder `apps/api/src/db` adalah database module — `index.ts` mengekspos unified client dengan fallback otomatis.\n* Folder `apps/api/src/generated` adalah hasil generate Prisma dan tidak diedit manual.\n* Folder `apps/api/prisma/migrations` mengikuti struktur Prisma dan tidak di-rename manual.\n\n---\n\nDikembangkan oleh:\n\n* @franzxml\n* @h1101241039-cmd\n* @ghinaaa09\n* @arifquuu\n* @isanctuarry\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranzxml%2Ffakebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranzxml%2Ffakebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranzxml%2Ffakebook/lists"}