{"id":19012526,"url":"https://github.com/kennfatt/nextjs-bk-delivery","last_synced_at":"2026-04-13T15:32:16.832Z","repository":{"id":49589737,"uuid":"371946626","full_name":"KennFatt/nextjs-bk-delivery","owner":"KennFatt","description":"🍔 BurgerKing's Delivery website clone - built with NextJS, TailwindCSS, and Firebase RTDB.","archived":false,"fork":false,"pushed_at":"2021-10-11T09:58:03.000Z","size":312,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-21T15:54:06.777Z","etag":null,"topics":["clone","exercise","firebase-realtime-database","nextjs","online-shop","tailwindcss","webpack"],"latest_commit_sha":null,"homepage":"https://nextjs-bk-delivery.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KennFatt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-29T10:44:24.000Z","updated_at":"2021-10-12T13:54:01.000Z","dependencies_parsed_at":"2022-09-07T14:51:59.767Z","dependency_job_id":null,"html_url":"https://github.com/KennFatt/nextjs-bk-delivery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KennFatt/nextjs-bk-delivery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KennFatt%2Fnextjs-bk-delivery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KennFatt%2Fnextjs-bk-delivery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KennFatt%2Fnextjs-bk-delivery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KennFatt%2Fnextjs-bk-delivery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KennFatt","download_url":"https://codeload.github.com/KennFatt/nextjs-bk-delivery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KennFatt%2Fnextjs-bk-delivery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31759332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["clone","exercise","firebase-realtime-database","nextjs","online-shop","tailwindcss","webpack"],"created_at":"2024-11-08T19:18:27.758Z","updated_at":"2026-04-13T15:32:16.806Z","avatar_url":"https://github.com/KennFatt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BurgerKing's Delivery Clone\nA website clone of [bkdelivery.co.id](https://bkdelivery.co.id/). The main goal of this project is to let me understand and exercise more about [NextJS](https://nextjs.org/) and [TailwindCSS](https://tailwindcss.com/).\n\nThe project also only focused on Frontend (User Interface), so there are no actual consideration for core functionalities such Authentication, Order, etc.\n\n\n\n\u003e ⚠️ **Disclaimer:**\n\u003e\n\u003e All product images used in the project are belongs and owned by BurgerKing company. And there is no other purpose than for learning.\n\u003e\n\u003e If at any moment some images are broken or could not be loaded, it might because BK is removing that particular image.\n\n\n\n## 🎯 Goals\n\n1. Implement NextJS's [data fetching](https://nextjs.org/docs/basic-features/data-fetching) mechanism.\n\n   - `getStaticProps()` and its ISR feature\n   - `getStaticPaths()`\n\n2. Side-by-side rebuild existing UI design with TailwindCSS.\n3. Implement some optimizations and follow NextJS's best practice.\n4. Uses [Firebase Realtime Database](https://firebase.google.com/products/realtime-database) to store and generate menu items dynamically.\n\n\n\n## ⚙️ Technical Details\n\n**Installation:**\n\n1. Install all dependencies: `yarn`\n\n2. Create new `.env.local` file to be used as API Endpoint\n\n   ```ini\n   FIREBASE_RTDB_ENDPOINT=\"https://asia-southeast1.firebasedatabase.app/menus.json\"\n   ```\n\n   In this project, I'm using Firebase RTDB to store the data that will be represented as Menu. Schema will be explained in the next section.\n\n   You can use any kind of backend as it matches with the schema used in this project.\n\n3. Start development or build the project!\n\n\n\n**Schema:**\n\nI will write the schema in TypeScript to be easily undestand then I will give the exact example in JSON format.\n\n```typescript\n/**\n * Menu Item is a model for single menu,\n * \tfor instance Large Coke is a Menu Item and it is in Beverages Menu (see below).\n *\n * Beverages:\t\t\t\t\t--\u003e Menu\n *\t- Large Coke\t\t\t--\u003e MenuItem\n * \t- Large Fanta\t\t\t--\u003e MenuItem\n */\ninterface MenuItem {\n  id: string;\n\n  /** An image URL represented as Menu Item's thumbnail */\n  imageUrl: string;\n\n  /** Price in IDR (i.e. 25000 for Rp.25.000) */\n  price: number;\n}\n\n/**\n * A \"container\" like Model that consist of MenuItem(s).\n *\n * This Model primarily used to separate between Menu categories.\n * Such a grid view in index page and list of different categories in `/menus` page.\n */\ninterface Menu {\n  id: string;\n\n  /** It's optional because the Frontend will use `id` to show Menu's name too. */\n  displayName?: string;\n\n  /** List of MenuItem(s) */\n  items: MenuItem[];\n}\n```\n\nThe API Endpoint defined by `FIREBASE_RTDB_ENDPOINT` should response a JSON that consist **array** of `Menu`:\n\n```json\n[\n  {\n    \"id\": \"beverages\",\n    \"items\": [\n      {\n        \"id\": \"2786\",\n        \"imageUrl\": \"https://order.bkdelivery.co.id/media/thumb/product_photo/2019/5/3/h535upbgvthbcfethaudkj_product_list.jpg\",\n        \"name\": \"LARGE COKE\",\n        \"price\": 25000\n      },\n      {\n        \"id\": \"2631\",\n        \"imageUrl\": \"https://order.bkdelivery.co.id/media/thumb/product_photo/2019/5/3/ju3eh7pkzsnganf3xmxylj_product_list.jpg\",\n        \"name\": \"LARGE FANTA\",\n        \"price\": 25000\n      }\n    ],\n    \"thumbnailUrl\": \"https://order.bkdelivery.co.id/media/thumb/group_photo/2019/11/14/8gmvptzfvkyr8ltpevtluo_product_list.jpg\"\n  }\n]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennfatt%2Fnextjs-bk-delivery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkennfatt%2Fnextjs-bk-delivery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennfatt%2Fnextjs-bk-delivery/lists"}