REPOSITORY OVERVIEWLive repository statistics
★ 2Stars
⑂ 0Forks
◯ 0Open issues
◉ 2Watchers
52/100
OPENREPOHUB HEALTH SIGNALMixed signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
30 Community adoption25% weight
5 Maintenance state20% weight
100 License clarity10% weight
100 Project information10% weight
100 This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
Personal Notes App
Aplikasi catatan pribadi modern dan responsif berbasis React (Vite) untuk menambah, mencari, mengarsipkan/memindahkan, dan menghapus catatan.
Proyek ini dibuat untuk memenuhi Submission Proyek Akhir: Membangun Aplikasi Catatan Menggunakan React pada kelas Belajar Membuat Aplikasi Web dengan React di platform Dicoding.
Seluruh kriteria wajib & opsional dipenuhi: pencarian, batas 50 karakter judul, serta fitur arsip.
✨ Fitur
- Tambah catatan (judul maksimal 50 karakter) & konten menggunakan controlled component.
- Arsipkan / Pindahkan (Unarsip) catatan — daftar Aktif dan Arsip terpisah.
- Hapus catatan.
- Pencarian berdasarkan judul (real‑time filter).
- Empty state yang jelas saat daftar kosong.
- Dark / Light mode dengan toggle dan persist via
localStorage + auto‑detect preferensi OS.
- Responsif: navbar/header, form, dan grid kartu menyesuaikan layar mobile—search bar melebar penuh, tombol mudah disentuh.
- Tombol berikon: Arsip/Pindahkan & Hapus menggunakan inline SVG (ikon + teks, aksesibel).
- Tanpa state management eksternal — cukup state lokal untuk menjaga kesederhanaan.
Data catatan disimpan di memori (hilang saat refresh) sesuai ruang lingkup kelas.
🧱 Teknologi
- React 18+ dengan Vite
- CSS murni (CSS Custom Properties/variables + media queries)
- Tanpa framework UI / router / Redux (mudah ditambahkan bila dibutuhkan)
📁 Struktur Proyek
personal-notes-app/
├─ docs/
│ ├─ screenshot-dark.png
│ └─ screenshot-light.png
├─ public/
│ └─ favicon.svg
├─ src/
│ ├─ components/
│ │ ├─ EmptyState.jsx
│ │ ├─ Header.jsx
│ │ ├─ NoteCard.jsx
│ │ ├─ NoteInput.jsx
│ │ ├─ NoteList.jsx
│ │ ├─ SearchBar.jsx
│ │ ├─ Section.jsx
│ │ └─ ThemeToggle.jsx
│ ├─ hooks/
│ │ └─ usePrefersDark.js
│ ├─ utils/
│ │ └─ index.js # data awal & helper tanggal
│ ├─ App.jsx # komposisi halaman utama
│ ├─ index.css # gaya global & variabel tema
│ └─ main.jsx # entry ReactDOM
├─ .gitignore
├─ index.html
├─ package-lock.json
├─ package.json
├─ README.md
└─ vite.config.js
ALGORITHMICALLY RELATEDSimilar Open-Source Projects
Selected from shared topics, language and repository description—not editorial ratings.
Personal Notes App — Single Page Application catatan pribadi berbasis React (Vite) dengan fitur tambah, detail, arsip/unarsip, hapus, pencarian, dan dark/light mode. Dibuat untuk memenuhi Submission Proyek: Membangun Single Page Application dengan React pada kelas Belajar Fundamental Aplikasi Web dengan React (Dicoding).
51/100 healthActive repositoryHas homepage
JavaScriptMIT#components#dicoding#frontend#javascript
⑂ 0 forks◯ 0 issuesUpdated Sep 24, 2025
Project homepage ↗