Post

EatoSphere - Global Restaurants Catalog

EatoSphere - Global Restaurants Catalog

EatoSphere

🌐 Final Submission dari Kelas: Menjadi Front-End Web Developer Expert (MFWDE) - Dicoding
🌐 Link Production: https://eatosphere.netlify.app


Sertifikat

Deskripsi Proyek

EatoSphere adalah aplikasi katalog restoran global yang memungkinkan pengguna untuk:

  • Menjelajahi restoran dengan berbagai informasi lengkap.
  • Menyimpan restoran favorit untuk akses mudah.
  • Menambahkan ulasan pelanggan langsung di aplikasi.
  • Mengakses aplikasi secara offline berkat fitur Progressive Web App (PWA).

Fitur Utama

  1. Halaman Utama
    Menampilkan daftar restoran lengkap dengan nama, kota, rating, dan deskripsi.

  2. Halaman Detail
    Menyediakan informasi lengkap restoran termasuk menu, lokasi, dan ulasan pelanggan.

  3. Halaman Favorit
    Menyimpan dan menampilkan restoran favorit.
    Memungkinkan pengguna menghapus restoran dari favorit.

  4. Offline Support
    Mendukung akses offline dengan cache Service Worker.

Langkah Menjalankan Proyek

Prasyarat

  • Node.js versi >= 18
  • npm versi >= 8
  • Git untuk mengelola repository

Langkah-Langkah

  1. Clone repository ini:
    1
    
    git clone https://github.com/xebec51/EatoSphere-GlobalRestaurantsCatalog.git
    
  2. Masuk ke folder proyek:
    1
    
    cd EatoSphere-GlobalRestaurantsCatalog
    
  3. Instal semua dependensi:
    1
    
    npm install
    
  4. Jalankan server pengembangan:
    1
    
    npm run start-dev
    
  5. Akses aplikasi di browser:
    http://localhost:8080

Build untuk Production

  1. Jalankan perintah berikut:
    1
    
    npm run build
    
  2. File hasil build akan tersimpan di folder dist.

Bundle Analyzer

Untuk memeriksa optimasi bundle, jalankan:

1
ANALYZE=true npm run build

Akses Webpack Bundle Analyzer di http://localhost:8888.

Pengujian

Unit Testing

Jalankan pengujian unit menggunakan Jest:

1
npm test

End-to-End Testing

Jalankan pengujian E2E menggunakan Playwright:

1
npm run e2e

Teknologi Pendukung

  • HTML, CSS, JavaScript: Teknologi dasar antarmuka.
  • Webpack: Untuk optimasi dan bundling kode.
  • Workbox: Untuk mendukung PWA.
  • IndexedDB: Untuk penyimpanan lokal data favorit.
  • Jest: Untuk pengujian unit.
  • Playwright: Untuk pengujian E2E.
  • Imagemin dan WebP: Untuk optimasi gambar.

Kontributor

Lisensi

Proyek ini dilisensikan di bawah MIT License. Lihat file LICENSE untuk informasi lebih lanjut. ```

This post is licensed under CC BY 4.0 by the author.