LANDING PAGE

https://chatgpt.com/c/699d4ea2-9614-8320-a5d6-2047538f05b7

https://sites.google.com/view/ayamgoreng80/halaman-muka

Tujuan

Menampilkan branding & mengarahkan user ke menu.

Grid System

Container: 1140px
12 column layout
Gap 24px
Section spacing 80px

HALAMAN MENU / KATALOG

Tujuan

Menampilkan semua produk dengan filter.

Komponen

SidebarFilter
ProductCard (hover effect)
Pagination
Sorting Dropdown

DESIGN SYSTEM (Desktop Web)

📐 Layout

Max-width: 1200px
Container centered
Section spacing 60–80px
Grid 12 column

🎨 Warna

Primary: #FF6B00 (Food tone)
Secondary: #1F2937
Background: #F9FAFB
Success: #10B981

🖱 Interaction

Hover effect pada card
Transition 0.3s
Button shadow ringan
Sticky cart icon

https://www.extwebtech.com/blog/front-end-vs-back-end-web-development/

Link https://chatgpt.com/c/699d4ea2-9614-8320-a5d6-2047538f05b7

Front End Web Developer adalah pengembang perangkat lunak yang bertanggung jawab membangun antarmuka pengguna (user interface) sebuah situs web atau aplikasi, memastikan tampilan visual (HTML, CSS) dan interaktivitas (JavaScript) berjalan lancar. Mereka mengubah desain UI/UX menjadi kode fungsional agar pengalaman pengguna menjadi menarik dan mudah digunakan.

Tugas Utama Front End Developer:

Mengembangkan UI: Mengubah mockup desain (Figma/Adobe XD) menjadi kode HTML/CSS.
Interaktivitas: Membuat elemen interaktif seperti tombol, slider, dan menu menggunakan JavaScript.
Responsive Design: Memastikan situs web tampil optimal di berbagai perangkat (desktop, tablet, mobile).
Optimalisasi Performa: Memastikan situs dimuat dengan cepat dan lancar.
Kolaborasi: Bekerja sama dengan UI/UX Designer dan Backend Developer.

Skill Wajib Front End Developer:

Dasar: HTML5, CSS3, JavaScript (ES6+).
Framework/Library: React.js, Vue.js, atau Angular.
Tools: Git, VS Code, Webpack, NPM.
CSS Preprocessor: Tailwind CSS, Bootstrap, atau SASS

🎯 MASTER PROMPT

Langkah-Langkah Membuat Aplikasi Web (Front-End)

Dari Requirement Sampai Implementasi

Silakan copy dan gunakan prompt ini ke AI atau jadikan sebagai panduan pengembangan.

🧠 1️⃣ PHASE 1 — REQUIREMENT ANALYSIS

✅ Prompt:

Bertindaklah sebagai System Analyst dan Front-End Architect.
Bantu saya mengidentifikasi kebutuhan aplikasi web bagian front-end berdasarkan studi kasus berikut:
[Tuliskan studi kasus di sini]
Identifikasi:
User Persona
User Journey
Functional Requirements
Non-Functional Requirements
Pain Points
UI/UX Goals
Sajikan dalam format tabel dan penjelasan terstruktur.

🎓 Output yang Diharapkan:

Problem Statement
Business Goal
Target User
Fitur utama UI
Performance requirement

🧩 2️⃣ PHASE 2 — FEATURE BREAKDOWN & USER STORY

✅ Prompt:

Ubah requirement di atas menjadi:
User Stories (format: As a ___, I want ___, so that ___)
Acceptance Criteria
Prioritas fitur (MoSCoW method)
Buatkan juga breakdown komponen front-end yang dibutuhkan.

🎓 Output:

Backlog Front-End
Struktur fitur modular
Roadmap sprint

🎨 3️⃣ PHASE 3 — UI/UX DESIGN PLAN

✅ Prompt:

Bertindaklah sebagai UI/UX Designer.
Buatkan:
Sitemap aplikasi
Wireframe deskripsi tiap halaman
Komponen UI utama
Design System (color, typography, spacing)
UX Flow diagram penjelasan
Fokus pada usability dan responsive design.

🎓 Output:

Struktur halaman
Navigasi
Layout logic
Konsistensi UI

🏗 4️⃣ PHASE 4 — FRONT-END ARCHITECTURE

✅ Prompt:

Bertindak sebagai Front-End Software Architect.
Tentukan:
Struktur folder project
Arsitektur (MVC / Component-Based / SPA)
State management strategy
API integration pattern
Reusable component strategy
Security di sisi front-end
Gunakan pendekatan best practice modern.

🎓 Output:

Contoh struktur:


src/
 ├── components/
 ├── pages/
 ├── services/
 ├── utils/
 ├── assets/
 ├── styles/
 └── hooks/

💻 5️⃣ PHASE 5 — TECHNOLOGY STACK DECISION

✅ Prompt:

Rekomendasikan teknologi front-end terbaik untuk aplikasi ini dengan mempertimbangkan:
Skalabilitas
Kemudahan maintenance
Kebutuhan performa
Tim developer kecil
Bandingkan:
HTML/CSS/JS Vanilla
Bootstrap
React
Vue
Next.js
Buatkan tabel perbandingan dan rekomendasi final.

🧪 6️⃣ PHASE 6 — PROTOTYPING & IMPLEMENTATION PLAN

✅ Prompt:

Buatkan langkah implementasi front-end secara bertahap:
Setup project
Install dependency
Buat layout utama
Buat reusable components
Integrasi API
Error handling
Loading state
Responsive testing
Sertakan contoh kode struktur dasar.

🔍 7️⃣ PHASE 7 — TESTING & OPTIMIZATION

✅ Prompt:

Buatkan checklist testing front-end meliputi:
Functional testing
UI testing
Responsive testing
Accessibility testing
Performance optimization
SEO basic
Sertakan tools yang direkomendasikan.

🚀 8️⃣ PHASE 8 — DEPLOYMENT

✅ Prompt:

Jelaskan langkah deployment front-end ke:
GitHub Pages
Vercel
Netlify
Firebase Hosting
Sertakan best practice CI/CD sederhana.

🔥 BONUS – PROMPT ENTERPRISE LEVEL

Jika ingin lebih advance (cocok untuk mahasiswa tingkat akhir):

Tambahkan:
Clean code practice
Component documentation
Git branching strategy
Code review checklist
UI scalability strategy
Front-end security best practice

🎓 Jika Digunakan Untuk Mengajar

Struktur ini bisa dijadikan:

Pertemuan	Topik
1	Requirement & User Story
2	UI/UX Design
3	Arsitektur Front-End
4	Setup & Layout
5	Component Development
6	API Integration
7	Testing
8	Deployment

🧠 Insight Penting untuk Mahasiswa

Tekankan bahwa:

Front-End bukan hanya soal tampilan,
tetapi tentang:
Struktur
Arsitektur
Experience
Maintainability
Scalability

Kalau Bapak mau, saya bisa lanjutkan menjadi:

📘 Modul kuliah 100+ halaman
📊 Slide presentasi 15–20 slide
🧪 Studi kasus UMKM / Marketplace SMK
💻 Contoh project lengkap React / Bootstrap
📑 RPS 16 pertemuan khusus Front-End Engineering

1️⃣ Sistem Pemesanan Makanan UMKM

🎯 Latar Belakang

Sebuah UMKM ayam goreng ingin menerima pesanan online tanpa marketplace.

👥 Target User

Pelanggan
Admin UMKM

🧩 Fitur Front-End

Landing page produk
Keranjang belanja
Checkout form
Status pesanan
Dashboard admin sederhana

🚀 Tantangan

Validasi form
State management keranjang
UI mobile-friendly

2️⃣ Marketplace Produk Siswa SMK

🎯 Latar Belakang

Sekolah ingin menampilkan produk hasil karya siswa secara online.

👥 Target User

Pembeli
Siswa (seller)
Admin sekolah

🧩 Fitur Front-End

Katalog produk
Filter kategori
Detail produk
Rating & review
Form upload produk

🚀 Tantangan

Dynamic rendering data
Component reusable card
Pagination

3️⃣ Sistem Absensi Online Sekolah

🎯 Latar Belakang

Sekolah ingin absensi berbasis web tanpa kertas.

👥 Target User

Siswa
Guru
Admin

🧩 Fitur Front-End

Login
Dashboard siswa
Form absensi
Rekap kehadiran
Grafik statistik

🚀 Tantangan

Role-based UI
Chart integration
Session handling (front-end side)

4️⃣ Aplikasi Manajemen RT/RW Digital

🎯 Latar Belakang

Lingkungan RT ingin sistem pengelolaan data warga dan iuran.

👥 Target User

Warga
Ketua RT
Bendahara

🧩 Fitur Front-End

Data warga
Input pembayaran iuran
Pengumuman
Laporan keuangan sederhana

🚀 Tantangan

Dashboard interaktif
Filter data
UI tabel kompleks

5️⃣ Sistem Booking Lapangan Futsal

🎯 Latar Belakang

Pengelola lapangan ingin sistem booking online.

👥 Target User

Customer
Admin

🧩 Fitur Front-End

Kalender jadwal
Pilih jam booking
Pembayaran simulasi
Notifikasi booking

🚀 Tantangan

Kalender interaktif
Slot time validation
Responsive layout

6️⃣ Portal Lowongan Kerja Lulusan SMK

🎯 Latar Belakang

Sekolah ingin mempertemukan alumni dengan industri.

👥 Target User

Alumni
HRD perusahaan
Admin

🧩 Fitur Front-End

List lowongan
Filter berdasarkan bidang
Detail lowongan
Upload CV
Profil kandidat

🚀 Tantangan

File upload UI
Card layout profesional
Search & filter realtime

7️⃣ Sistem E-Learning Sederhana

🎯 Latar Belakang

Guru ingin membagikan materi dan tugas secara online.

👥 Target User

Siswa
Guru

🧩 Fitur Front-End

Daftar kelas
Video pembelajaran
Upload tugas
Progress bar
Quiz interaktif

🚀 Tantangan

State progress
UI interaktif
UX sederhana untuk siswa

8️⃣ Aplikasi Event Organizer Sekolah

🎯 Latar Belakang

Sekolah sering mengadakan event dan butuh sistem pendaftaran online.

👥 Target User

Peserta
Panitia

🧩 Fitur Front-End

Landing page event
Form registrasi
Ticket preview
QR code preview
Dashboard peserta

🚀 Tantangan

Form validation kompleks
UI menarik & modern
Countdown timer

9️⃣ Sistem Inventory Barang Sekolah

🎯 Latar Belakang

Sekolah ingin mendigitalisasi pencatatan aset.

👥 Target User

Admin inventaris
Kepala sekolah

🧩 Fitur Front-End

Tabel data barang
Filter kategori
Input barang baru
Grafik kondisi barang

🚀 Tantangan

Data table kompleks
Sorting & filtering
UI dashboard clean

🔟 Aplikasi Personal Finance Sederhana

🎯 Latar Belakang

Mahasiswa ingin mencatat pemasukan dan pengeluaran.

👥 Target User

Mahasiswa / individu

🧩 Fitur Front-End

Input transaksi
List transaksi
Filter bulanan
Grafik pengeluaran
Summary saldo

🚀 Tantangan

Chart integration
Local storage
UX minimalis

🎓 Jika Digunakan untuk Perkuliahan

Bisa dibuat skema:

Tingkat	Studi Kasus
Dasar	Absensi, UMKM
Menengah	Booking, Inventory
Lanjut	Marketplace, Job Portal

Jika Bapak mau, saya bisa lanjutkan menjadi:

📘 Detail requirement lengkap salah satu studi kasus
📊 Breakdown user story + backlog
💻 Desain arsitektur front-end

Senin, 23 Februari 2026

Tujuan

Grid System

Tujuan

Komponen

DESIGN SYSTEM (Desktop Web)

📐 Layout

🎨 Warna

🖱 Interaction

🎯 MASTER PROMPT

Langkah-Langkah Membuat Aplikasi Web (Front-End)

Dari Requirement Sampai Implementasi

🧠 1️⃣ PHASE 1 — REQUIREMENT ANALYSIS

✅ Prompt:

🎓 Output yang Diharapkan:

🧩 2️⃣ PHASE 2 — FEATURE BREAKDOWN & USER STORY

✅ Prompt:

🎓 Output:

🎨 3️⃣ PHASE 3 — UI/UX DESIGN PLAN

✅ Prompt:

🎓 Output:

🏗 4️⃣ PHASE 4 — FRONT-END ARCHITECTURE

✅ Prompt:

🎓 Output:

💻 5️⃣ PHASE 5 — TECHNOLOGY STACK DECISION

✅ Prompt:

🧪 6️⃣ PHASE 6 — PROTOTYPING & IMPLEMENTATION PLAN

✅ Prompt:

🔍 7️⃣ PHASE 7 — TESTING & OPTIMIZATION

✅ Prompt:

🚀 8️⃣ PHASE 8 — DEPLOYMENT

✅ Prompt:

🔥 BONUS – PROMPT ENTERPRISE LEVEL

🎓 Jika Digunakan Untuk Mengajar

🧠 Insight Penting untuk Mahasiswa

1️⃣ Sistem Pemesanan Makanan UMKM

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

2️⃣ Marketplace Produk Siswa SMK

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

3️⃣ Sistem Absensi Online Sekolah

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

4️⃣ Aplikasi Manajemen RT/RW Digital

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

5️⃣ Sistem Booking Lapangan Futsal

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

6️⃣ Portal Lowongan Kerja Lulusan SMK

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

7️⃣ Sistem E-Learning Sederhana

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

8️⃣ Aplikasi Event Organizer Sekolah

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan

9️⃣ Sistem Inventory Barang Sekolah

🎯 Latar Belakang

👥 Target User

🧩 Fitur Front-End

🚀 Tantangan