Loading repository data…
irfandwisamudra / repository
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).
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Aplikasi catatan pribadi berbasis React yang cepat, aksesibel, dan responsif. Fitur utama: tambah catatan, pencarian, arsip/aktifkan, hapus, dan halaman detail, seluruhnya berjalan sebagai Single-Page Application menggunakan React Router.
Proyek ini ditujukan untuk memenuhi Submission Proyek: Membangun Single Page Application dengan React pada kelas Belajar Fundamental Aplikasi Web dengan React (Dicoding). Semua kriteria wajib dan opsional telah dipenuhi.
Daftar Catatan Aktif & Arsip
Pencarian judul (client-side, real-time).
Tambah Catatan Baru
aria-live="polite".Detail Catatan
Arsip / Aktifkan
Hapus Catatan.
404 / Not Found page yang rapi.
Tema Gelap/Terang (opsional) + persist via localStorage.
Aksesibilitas: fokus jelas, label tombol bermakna, live region untuk counter.
Sumber data: file util
local-data.js(sesuai ketentuan submission tanpa modifikasi).
Selected from shared topics, language and repository description—not editorial ratings.
irfandwisamudra /
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.
52/100 health//archives/notes/new/notes/:id*local-data.js.Minimal 2 halaman:
Home (/) – daftar catatan aktif + pencarian.Detail (/notes/:id) – konten penuh + aksi.Menambahkan catatan baru – halaman /notes/new.
Menghapus catatan – dari kartu maupun detail.
Arsip/Unarsip – dari kartu dan detail (opsional → dipenuhi).
React Router – navigasi tanpa reload (SPA).
Property Validation (PropTypes) – diterapkan pada komponen data.
UX:
aria-live="polite".Seluruh kriteria utama & opsional di submission telah terpenuhi.
personal-notes-app-spa/
├─ docs/
│ ├─ screenshot-dark.png
│ └─ screenshot-light.png
├─ public/
│ └─ favicon.svg
├─ src/
│ ├─ components/
│ │ ├─ form/
│ │ │ ├─ Editor.jsx
│ │ │ ├─ FormActions.jsx
│ │ │ ├─ TitleCounter.jsx
│ │ │ └─ TitleInput.jsx
│ │ ├─ status/
│ │ │ ├─ NotFound.jsx
│ │ │ └─ StatusPage.jsx
│ │ ├─ EmptyState.jsx
│ │ ├─ FloatingAddButton.jsx
│ │ ├─ NoteCard.jsx
│ │ ├─ NoteList.jsx
│ │ ├─ SearchBar.jsx
│ │ └─ ThemeToggle.jsx
│ ├─ hooks/
│ │ └─ usePrefersDark.js
│ ├─ pages/
│ │ ├─ Add.jsx
│ │ ├─ Archive.jsx
│ │ ├─ Detail.jsx
│ │ ├─ Home.jsx
│ │ └─ NotFound.jsx
│ ├─ utils/
│ │ ├─ index.js
│ │ └─ local-data.js # (gunakan file asli dari Dicoding, jangan diubah)
│ ├─ App.jsx
│ ├─ index.css
│ └─ main.jsx
├─ .gitignore
├─ index.html
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ README.md
└─ vite.config.js
type Note = {
id: string; // unik (mis. Date.now().toString())
title: string; // maks 50 karakter
body: string;
archived: boolean;
createdAt: string; // ISO date string
};
Data awal & helper tersedia pada
src/utils/local-data.jsdansrc/utils/date.js.
npm install
npm run dev
Buka URL yang dicetak Vite (biasanya http://localhost:5173).
npm run build
:focus-visible).Netlify / Vercel (preset Vite):
npm run builddist/* → /index.html.