Aplikasi web untuk menjelajahi resep masakan berdasarkan bahan (ingredient) yang tersedia. Dibangun menggunakan Next.js, React, dan TypeScript, serta mengambil data dari TheMealDB API.
- Halaman Utama - Menampilkan featured ingredients pilihan sebagai titik awal eksplorasi.
- Daftar Ingredients - Browse semua bahan masakan yang tersedia.
- Meals by Ingredient - Temukan resep-resep yang menggunakan bahan tertentu.
- Detail Resep - Lihat instruksi memasak lengkap, daftar bahan & takaran, serta video tutorial YouTube.
| Teknologi | Versi |
|---|---|
| Next.js | 16.2.2 |
| React | 19 |
| TypeScript | 5 |
| Tailwind CSS | 4 |
| TheMealDB API | v1 |
Pastikan sudah terinstal di komputer:
- Node.js versi 18 atau lebih baru — https://nodejs.org/
- npm (sudah termasuk dengan Node.js), atau yarn / pnpm
git clone <url-repository>
cd cmlabs-frontend-parttime-test
2. Install Dependencies
npm install
3. Konfigurasi Environment Variable
Buat file .env di root project:
NEXT_PUBLIC_API_BASE_URL=https://www.themealdb.com/api/json/v1/1
File .env sudah tersedia di repository. Jika belum ada, buat manual sesuai contoh di atas.
4. Jalankan Development Server
npm run dev
Buka browser dan akses: http://localhost:3000 (http://localhost:3000)
https://dev-meal-app.vercel.app/