{"id":31588540,"url":"https://github.com/irfandwisamudra/personal-notes-app","last_synced_at":"2026-05-05T19:32:37.330Z","repository":{"id":314503488,"uuid":"1055782620","full_name":"irfandwisamudra/personal-notes-app","owner":"irfandwisamudra","description":"Aplikasi Catatan Pribadi berbasis React (Vite) untuk menambah, mencari, mengarsipkan/menon-arsipkan, dan menghapus catatan. Proyek ini merupakan Submission Proyek Akhir: Membangun Aplikasi Catatan Menggunakan React pada kelas \"Belajar Membuat Aplikasi Web dengan React\" di Dicoding.","archived":false,"fork":false,"pushed_at":"2025-09-12T19:58:00.000Z","size":512,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T02:24:43.945Z","etag":null,"topics":["components","dicoding","frontend","hooks","javascript","jsx","notes-app","personal-notes","react","reactjs","responsive-ui","submission","vite"],"latest_commit_sha":null,"homepage":"https://personal-notes-react-app.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/irfandwisamudra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-12T19:50:55.000Z","updated_at":"2025-09-13T08:55:23.000Z","dependencies_parsed_at":"2025-09-12T22:11:34.558Z","dependency_job_id":"74836103-85b7-499a-bc1c-d8bc82e91410","html_url":"https://github.com/irfandwisamudra/personal-notes-app","commit_stats":null,"previous_names":["irfandwisamudra/personal-notes-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/irfandwisamudra/personal-notes-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irfandwisamudra%2Fpersonal-notes-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irfandwisamudra%2Fpersonal-notes-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irfandwisamudra%2Fpersonal-notes-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irfandwisamudra%2Fpersonal-notes-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/irfandwisamudra","download_url":"https://codeload.github.com/irfandwisamudra/personal-notes-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irfandwisamudra%2Fpersonal-notes-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32664901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","dicoding","frontend","hooks","javascript","jsx","notes-app","personal-notes","react","reactjs","responsive-ui","submission","vite"],"created_at":"2025-10-06T02:10:36.530Z","updated_at":"2026-05-05T19:32:37.311Z","avatar_url":"https://github.com/irfandwisamudra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Personal Notes App\n\nAplikasi catatan pribadi modern dan **responsif** berbasis **React (Vite)** untuk **menambah**, **mencari**, **mengarsipkan/memindahkan**, dan **menghapus** catatan.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/screenshot-light.png\" alt=\"Light\" width=\"49%\"/\u003e\n  \u003cimg src=\"./docs/screenshot-dark.png\" alt=\"Dark\" width=\"49%\"/\u003e\n\u003c/p\u003e\n\n\u003e Proyek ini dibuat untuk memenuhi _Submission Proyek Akhir: Membangun Aplikasi Catatan Menggunakan React_ pada kelas **Belajar Membuat Aplikasi Web dengan React** di platform **Dicoding**.  \n\u003e Seluruh **kriteria wajib** \u0026 **opsional** dipenuhi: pencarian, batas 50 karakter judul, serta fitur arsip.\n\n---\n\n## ✨ Fitur\n\n- **Tambah catatan** (judul maksimal **50** karakter) \u0026 **konten** menggunakan **controlled component**.\n- **Arsipkan / Pindahkan (Unarsip)** catatan — daftar **Aktif** dan **Arsip** terpisah.\n- **Hapus** catatan.\n- **Pencarian** berdasarkan judul (real‑time filter).\n- **Empty state** yang jelas saat daftar kosong.\n- **Dark / Light mode** dengan toggle dan **persist** via `localStorage` + auto‑detect preferensi OS.\n- **Responsif**: navbar/header, form, dan grid kartu menyesuaikan layar mobile—search bar melebar penuh, tombol mudah disentuh.\n- **Tombol berikon**: Arsip/Pindahkan \u0026 Hapus menggunakan **inline SVG** (ikon + teks, aksesibel).\n- Tanpa state management eksternal — cukup **state lokal** untuk menjaga kesederhanaan.\n\n\u003e Data catatan disimpan **di memori** (hilang saat refresh) sesuai ruang lingkup kelas.\n\n---\n\n## 🧱 Teknologi\n\n- **React 18+** dengan **Vite**\n- **CSS murni** (CSS Custom Properties/variables + media queries)\n- Tanpa framework UI / router / Redux (mudah ditambahkan bila dibutuhkan)\n\n---\n\n## 📁 Struktur Proyek\n\n```\npersonal-notes-app/\n├─ docs/\n│  ├─ screenshot-dark.png\n│  └─ screenshot-light.png\n├─ public/\n│  └─ favicon.svg\n├─ src/\n│  ├─ components/\n│  │  ├─ EmptyState.jsx\n│  │  ├─ Header.jsx\n│  │  ├─ NoteCard.jsx\n│  │  ├─ NoteInput.jsx\n│  │  ├─ NoteList.jsx\n│  │  ├─ SearchBar.jsx\n│  │  ├─ Section.jsx\n│  │  └─ ThemeToggle.jsx\n│  ├─ hooks/\n│  │  └─ usePrefersDark.js\n│  ├─ utils/\n│  │  └─ index.js          # data awal \u0026 helper tanggal\n│  ├─ App.jsx              # komposisi halaman utama\n│  ├─ index.css            # gaya global \u0026 variabel tema\n│  └─ main.jsx             # entry ReactDOM\n├─ .gitignore\n├─ index.html\n├─ package-lock.json\n├─ package.json\n├─ README.md\n└─ vite.config.js\n```\n\n\u003e Komponen dipisah **sekecil mungkin** (single responsibility) agar mudah dirawat \u0026 di‑uji.\n\n---\n\n## 🧩 Model Data\n\n```ts\ntype Note = {\n  id: number | string; // unik (disarankan: timestamp +new Date())\n  title: string; // dibatasi 50 karakter (dengan counter)\n  body: string;\n  archived: boolean; // true = diarsip\n  createdAt: string; // ISO date string\n};\n```\n\nData awal tersedia pada **`src/utils/index.js`**.\n\n---\n\n## 🚀 Menjalankan Proyek\n\n### Prasyarat\n\n- **Node.js** ≥ 18 (LTS disarankan)\n- **npm** ≥ 9 (atau pnpm/yarn)\n\n### Instalasi \u0026 Development\n\n```bash\nnpm install\nnpm run dev\n```\n\nBuka alamat yang dicetak oleh Vite (default: `http://localhost:5173`).\n\n### Build \u0026 Preview Production\n\n```bash\nnpm run build\nnpm run preview\n```\n\n---\n\n## 🔧 Komponen Kunci\n\n- **Header** – Branding, **SearchBar**, dan **ThemeToggle**. Pada mobile, search otomatis melebar \u0026 turun ke baris berikutnya.\n- **SearchBar** – Controlled input untuk pencarian judul (client‑side filter).\n- **ThemeToggle** – Mengubah atribut `data-theme` pada `html`, persist ke `localStorage`, dan memanfaatkan **`usePrefersDark`** untuk mengikuti preferensi OS.\n- **NoteInput** – Form tambah catatan: **counter judul** (50‑N), validasi sederhana, dan submit yang jelas.\n- **NoteList** – Menampilkan kumpulan **catatan aktif** / **arsip**; memuat **EmptyState** jika kosong.\n- **NoteCard** – Kartu catatan dengan aksi **Arsip/Pindahkan** dan **Hapus** (ikon + teks).\n- **Section** – Pembungkus berjudul untuk memisahkan “Catatan Aktif” dan “Arsip”.\n- **EmptyState** – Ilustrasi/pesan saat tidak ada catatan atau hasil pencarian.\n\n---\n\n## ♿ Aksesibilitas\n\n- Ikon bersifat **dekoratif**, tombol tetap memiliki **label teks**.\n- **Focus ring** terlihat jelas; warna diuji kontrasnya pada dua tema.\n- Target interaksi mengikuti **ukuran sentuh** yang memadai.\n\n---\n\n## 🧪 Checklist Uji Manual\n\n- Menambah catatan: counter judul berhenti di 50 \u0026 menampilkan sisa karakter.\n- Pencarian menyaring judul baik di **Aktif** maupun **Arsip**.\n- Arsipkan lalu pindahkan (unarsip) – kartu berpindah antar‑bagian.\n- Hapus berfungsi di kedua bagian.\n- Ganti dark/light, **refresh**: preferensi tetap sama.\n- Coba lebar ≤ 640px – navbar/search rapi \u0026 mudah disentuh.\n\n---\n\n## 📦 Skrip npm\n\n- `dev` – jalankan server pengembangan Vite\n- `build` – build produksi\n- `preview` – pratinjau hasil build secara lokal\n\n---\n\n## 🌐 Deployment\n\n- **Vercel / Netlify** (preset **Vite**):\n  - Build Command: `npm run build`\n  - Publish Directory: `dist`\n\n---\n\n## 👤 Penulis\n\n- GitHub: **https://github.com/irfandwisamudra**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firfandwisamudra%2Fpersonal-notes-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firfandwisamudra%2Fpersonal-notes-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firfandwisamudra%2Fpersonal-notes-app/lists"}