ANR Transport

Portfolio: ANR Transport

#

Membangun Platform Rental Mobil Modern dengan Laravel, Filament, Tailwind dan Flowbite

#

---

Deskripsi Proyek

#

ANR Transport adalah platform rental mobil yang melayani pelanggan di seluruh Indonesia. Saya bertanggung jawab untuk merancang dan membangun sistem yang tidak hanya fungsional tetapi juga optimal dalam performa dan ramah mesin pencari (SEO-friendly). Proyek ini dikembangkan menggunakan Laravel, Tailwind CSS, Flowbite, dan Filament Admin Panel untuk mendukung pengelolaan sistem backend yang efisien. Kunjungi website resmi ANR Transport

---

Teknologi yang Digunakan

#

1. Tailwind CSS (Frontend Styling)

   • Framework utility-first yang memudahkan pembuatan desain responsif dan konsisten.

2. Flowbite (UI Components)

   • Menyediakan komponen UI siap pakai seperti tabel, modal, dan navbar untuk meningkatkan efisiensi pengembangan.

3. Filament (Admin Panel)

   • Membuat dashboard admin untuk pengelolaan data kendaraan, cabang, artikel dan lainnya.

4. SEO (Search Engine Optimization)

   • Meta tags dinamis, sitemap.xml, dan robots.txt untuk meningkatkan peringkat di mesin pencari.

5. MySQL / Sqlite (Database)

   • Digunakan untuk menyimpan data terkait armada, artikel, dan lainnya.

---

Fitur Utama

#

1. Dashboard Admin

   • Pengelolaan data armada, cabang, artikel dan lainnya dalam satu tempat.

2. Desain Responsif

   • Optimalisasi tampilan untuk desktop, tablet, dan perangkat mobile menggunakan Tailwind CSS.
   • Navbar dinamis dengan dropdown.
   • Modal untuk popup promotion.
   • dst.

3. SEO-Friendly Content Management

   • Meta title dan description otomatis berdasarkan data lokasi dan jenis layanan.
   • Penggunaan Open Graph dan struktur data JSON-LD untuk visibilitas di mesin pencari.

4. Optimasi Performa

   • Cache query database menggunakan fitur bawaan Laravel.
   • Minifikasi CSS dan JavaScript menggunakan Laravel Mix.

---

SEO Implementasi

#

• Meta Tags Dinamis:
  Setiap halaman memiliki meta title, meta description, dan meta keyword yang relevan. Contoh:

  <title>{{ $pageTitle }}</title>
  <meta name="description" content="{{ $pageDescription }}">
  <meta name="keywords" content="{{ $pageKeywords }}">
  

• Sitemap dan Robots.txt:
  Sitemap dihasilkan secara dinamis menggunakan Laravel, sementara robots.txt memastikan hanya halaman tertentu yang diindeks.

  Route::get('/sitemap.xml', [SitemapController::class, 'generate']);
  

• Open Graph dan Twitter Cards:
  Menambahkan metadata untuk meningkatkan visibilitas di platform sosial media.

  <meta property="og:title" content="{{ $pageTitle }}">
  <meta property="og:description" content="{{ $pageDescription }}">
  <meta property="og:image" content="{{ $pageImage }}">
  

---

Proses Pengembangan

#

1. Perencanaan dan Desain

   • Diskusi kebutuhan bisnis dengan klien.
   • Membuat wireframe menggunakan Figma untuk desain antarmuka yang jelas.

2. Pengembangan Backend

   • Menggunakan laravel filament

3. Pengembangan Frontend

   • Tailwind CSS digunakan untuk styling responsif.
   • Flowbite mempersingkat waktu pembuatan UI interaktif.

4. Pengujian dan Deployment

   • Pengujian dengan PHPUnit untuk memastikan setiap fitur berjalan sesuai spesifikasi.
   • Deployment ke server menggunakan git.

---