https://github.com/ifwhy/ifwhy-dicoding-menjadi-front-end-web-developer-expert

Projek ini merupakan submission untuk kelas Menjadi Front-End Web Developer Expert dari Dicoding pada beasiswa DBS Foundation Coding Camp 2024.
https://github.com/ifwhy/ifwhy-dicoding-menjadi-front-end-web-developer-expert

dicoding-academy dicoding-submission front-end-development progressive-web-app single-page-applications

Last synced: about 1 year ago
JSON representation

Projek ini merupakan submission untuk kelas Menjadi Front-End Web Developer Expert dari Dicoding pada beasiswa DBS Foundation Coding Camp 2024.

Host: GitHub
URL: https://github.com/ifwhy/ifwhy-dicoding-menjadi-front-end-web-developer-expert
Owner: ifwhy
Created: 2025-01-12T12:44:27.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-01-28T01:46:03.000Z (over 1 year ago)
Last Synced: 2025-02-06T01:49:13.388Z (over 1 year ago)
Topics: dicoding-academy, dicoding-submission, front-end-development, progressive-web-app, single-page-applications
Language: JavaScript
Homepage: https://dicoding-menjadi-front-end-web-developer-expert.vercel.app
Size: 5.05 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          


  
🍽️ Kulinary - Kuliner Nyentrik


  

  


    

    

    

    

  




Projek ini merupakan submission untuk kelas [Menjadi Front-End Web Developer Expert](https://www.dicoding.com/academies/219) dari [Dicoding](https://www.dicoding.com) pada beasiswa [DBS Foundation Coding Camp 2024](https://www.dbs.com/newsroom/DBS_Foundation_holds_DBS_Foundation_Coding_Camp_2024_to_offer_free_coding_classes).  

> **⚠️ PERINGATAN: Jadikan repositori ini sebagai rujukan/referensi.**  

>

> - Sesuai dengan terms of use di Dicoding, submission kelas Dicoding Academy haruslah hasil karya Anda sendiri.  

> - Kode yang didapatkan dari sumber lain (website, buku, forum, GitHub, dan lain-lain) hanya digunakan sebagai referensi. Tingkat kesamaannya tidak boleh lebih dari 70%.  

---

## 📋 Daftar Isi  

1. [✨ Features](#-features)  

   - [Submission 1](#submission-1)  

   - [Submission 2](#submission-2)  

   - [Submission 3](#submission-3)  

2. [🛠 Tech Stack](#-tech-stack)  

3. [🚀 Jalankan Di Lokal](#cara-menjalankan-proyek)  

4. [🌐 Telah Mengudara](#deployment-live-demo)  

5. [👤 Author](#authors)  

---

## ✨ Features

### 🛠️ Submission 1  

- **App Bar (Navigation Bar)**  

  - Menampilkan nama aplikasi atau brand logo dari aplikasi katalog restoran.  

  - Navigation menu:  

    - Home → mengarah ke root domain.  

    - Favorite → target URL cukup bernilai `#`.  

    - About Us → mengarah ke profil LinkedIn/GitHub/Social Media Anda.  

  - Navigation drawer responsif pada layar seluler.  

- **Hero Element (Jumbotron Element)**  

  - Full-width gambar untuk semua layar.  

- **Daftar Restoran**  

  - Menampilkan informasi wajib (Nama, Gambar, dll.).  

- **Footer & Responsibilitas Tampilan**  

  - Hak cipta dan desain responsif.  

### 🛠️ Submission 2  

- **API Integration**  

  - Data restoran dari API `restaurant-api.dicoding.dev`.  

- **Offline & PWA Support**  

  - Mendukung mode offline dan fitur **Add to Home Screen**.  

- **Halaman Detail Restoran**  

  - Menampilkan detail lengkap restoran.  

- **Favorit dan IndexedDB**  

  - Favoritkan restoran, disimpan di IndexedDB.  

### 🛠️ Submission 3  

- **Testing**  

  - Integration dan End-to-End Test.  

- **Image Optimization**  

  - Gambar hero dikompresi (<200KB).  

- **Bundle Optimization**  

  - Teknik *Code Splitting*.  

---

## 🛠 Tech Stack

| **Technology**  | **Description**                                |

|------------------|-----------------------------------------------|

| HTML5            | Markup untuk konten                          |

| CSS3             | Styling dan layout                          |

| JavaScript (ES6+) | Fungsionalitas interaktif                   |

| IndexedDB        | Menyimpan favorit di sisi klien              |

| Webpack          | Modul bundler untuk optimisasi kode          |

| PWA              | Dukungan mode offline dan **Add to Home**    |

---

## 🚀 Jalankan Di Lokal  

Berikut langkah-langkah menjalankan proyek ini secara lokal:  

```bash

  git clone https://github.com/ifwhy/ifwhy-Dicoding-Menjadi-Front-End-Web-Developer-Expert.git

  cd ifwhy-Dicoding-Menjadi-Front-End-Web-Developer-Expert

  npm i

  npm run start-dev

```

---

## 🌐 Telah Mengudara

Proyek ini telah di-deploy di platform berikut:

👉 [Kulinary App on Vercel](https://dicoding-menjadi-front-end-web-developer-expert.vercel.app/)

---

## 👤 Author

[Ivan Wahyu Nugroho](https://github.com/ifwhy)