📑 Aplikasi Catatan Pribadi (Submission Akhir)

📑 Aplikasi Catatan Pribadi (Submission Akhir)

Single Page Application (SPA) React dengan autentikasi pengguna dan integrasi RESTful API untuk mengelola catatan pribadi secara personal dan aman

Submission Akhir - Dicoding Academy React Learning Path
Implementasi lengkap dengan autentikasi, RESTful API, dan fitur advanced React Hooks & Context
Memenuhi semua kriteria utama dan opsional submission akhir

✨ Fitur Lengkap Submission Akhir

🎯 KRITERIA UTAMA SUBMISSION AKHIR - Semua Terpenuhi ✅

1. 🌐 RESTful API Integration

• ✅ API Endpoint: https://notes-api.dicoding.dev/v1
• ✅ Authentication API: Login & Register menggunakan JWT Token
• ✅ Notes Management: Create, Read, Update, Delete via API
• ✅ Archive Management: Archive/Unarchive catatan via API
• ✅ User-specific Data: Hanya tampilkan catatan milik user yang login
• ✅ API Documentation: Implementasi sesuai dokumentasi resmi

2. 🔐 Sistem Autentikasi Lengkap

• 🔐 Halaman Registrasi (/register)

  • ✅ Input nama lengkap
  • ✅ Input email address
  • ✅ Input password
  • ✅ Input konfirmasi password
  • ✅ Validasi form real-time

• 🔑 Halaman Login (/login)

  • ✅ Input email & password
  • ✅ Error handling untuk kredensial salah
  • ✅ Auto-redirect setelah login berhasil

• 🔒 Protected Routes

  • ✅ Akses catatan hanya untuk user terautentikasi
  • ✅ Auto-redirect ke login jika belum autentikasi
  • ✅ Session management dengan local storage

• 🚪 Logout System

  • ✅ Tombol logout di header
  • ✅ Clear access token dari storage
  • ✅ Redirect ke halaman login

3. 🔒 Route Protection & Security

• ✅ Protected Routes: Semua fitur catatan hanya bisa diakses setelah login
• ✅ ProtectedRoute Component: Wrapper untuk route yang memerlukan autentikasi
• ✅ User Context: State management untuk status autentikasi
• ✅ Token Persistence: Access token tersimpan di local storage
• ✅ Auto-logout: Token expired handling

4. 🎨 Theme System dengan React Context

• 🌙 Dark/Light Mode Toggle
  • ✅ Toggle button di header aplikasi
  • ✅ React Context untuk state management
  • ✅ Persistent storage di local storage
  • ✅ System preference detection

5. 🚀 Modern React Hooks Implementation

• ✅ useState: State management di semua komponen
• ✅ useEffect: Side effects & API calls
• ✅ useContext: Theme & Auth context consumption
• ✅ useParams: Dynamic routing parameters
• ✅ useNavigate: Programmatic navigation
• ✅ useSearchParams: URL search parameters
• ✅ Custom Hooks: useAuth, useTheme, useLocale

6. 📋 Compliance dengan Submission Sebelumnya

• ✅ Multi-Page SPA: Home, Detail, Archive, Auth pages
• ✅ Daftar Catatan: Grid layout dengan data dari API
• ✅ Detail Catatan: Path parameters & direct URL access
• ✅ Tambah Catatan: Form dengan API integration
• ✅ Hapus Catatan: Confirmation & API call
• ✅ PropTypes Validation: Semua komponen tervalidasi

🚀 KRITERIA OPSIONAL SUBMISSION AKHIR - Implementasi Premium ✅

1. 📊 Loading States & UX Enhancement

• ⏳ Loading Indicators
  • ✅ Loading spinner saat fetch data dari API
  • ✅ Loading states untuk login/register
  • ✅ Loading feedback untuk create/delete operations
  • ✅ Skeleton loading untuk better UX

2. 🌍 Multi-language Support dengan React Context

• 🇮🇩 Bahasa Indonesia / 🇺🇸 English Toggle
  • ✅ Toggle button untuk switch bahasa
  • ✅ React Context untuk locale management
  • ✅ Persistent storage di local storage
  • ✅ Complete translation untuk semua text
  • ✅ useLocale custom hook

🏆 FITUR LANJUTAN DARI SUBMISSION SEBELUMNYA

1. 📦 Sistem Arsip Cerdas (Enhanced with API)

• 📦 Archive/Unarchive via API - Persistent di server
• 🔄 Real-time Updates - Sinkronisasi dengan database
• 📊 Empty State - Pesan khusus untuk arsip kosong
• 🎯 User-specific Archives - Hanya arsip milik user

2. 🔍 Pencarian Real-time dengan API Integration

• 🔍 Server-side Search - Filter melalui API calls
• 🌐 Shareable URLs - Search query tersimpan di URL (?keyword=...)
• ⌨️ Controlled Input - State management yang proper
• 🚀 Debounced Search - Optimized API calls

3. 🎨 User Experience Premium

• 📱 Responsive Design - Mobile-first dengan Tailwind CSS
• 🎨 Modern UI/UX - Consistent design system
• ♿ Accessibility - ARIA labels dan keyboard navigation
• 🎭 Character Limit - Counter real-time untuk judul (50 karakter)
• 🌙 Dark/Light Theme - Persistent user preference
• 🌍 Internationalization - Bahasa Indonesia & English

🏆 TEKNOLOGI STACK SUBMISSION AKHIR

• 🔐 Authentication: JWT Token dengan local storage
• 🌐 API Integration: RESTful API dengan fetch
• 🎯 State Management: React Context + Hooks
• 🎨 Styling: Tailwind CSS untuk responsive design
• 🚀 Performance: Optimized dengan Vite build tool
• 🔧 Development: ESLint + modern development workflow

📸 Screenshots & Preview Submission Akhir

🔐 Halaman Autentikasi

Login Page (/login)

• Form login dengan email & password
• Error handling untuk kredensial salah
• Loading state saat proses autentikasi
• Link navigation ke halaman register

Register Page (/register)

• Form registrasi lengkap (nama, email, password, confirm password)
• Real-time validation untuk semua field
• Password strength indicator
• Auto-redirect ke login setelah registrasi berhasil

🏠 Halaman Utama (Protected)

• Grid layout responsif dengan catatan dari API
• Search bar untuk filter real-time dengan debouncing
• Floating action button untuk create catatan baru
• Header dengan profile info, theme toggle, dan logout
• Loading skeleton saat fetch data

📄 Detail Catatan (Enhanced)

• Tampilan full content dengan metadata dari API
• Tombol aksi archive dan delete dengan confirmation
• Breadcrumb navigation untuk better UX
• Protected route - hanya bisa diakses setelah login

📦 Halaman Arsip (API Powered)

• Catatan terarsip dari database user
• Option untuk restore ke aktif via API
• Empty state ketika arsip kosong
• Consistent dengan design system

🎨 Theme & Localization

• Dark/Light mode toggle dengan smooth transition
• Bahasa Indonesia/English switcher
• Persistent preferences tersimpan di local storage
• System preference detection untuk default theme

📱 Mobile Responsive

• Adaptive layout untuk semua device sizes
• Touch-friendly buttons dan navigation
• Optimized untuk mobile experience dengan Tailwind CSS
• PWA-ready dengan proper viewport

💡 Fitur Unggulan Submission Akhir

🔐 Security & Authentication

• JWT Authentication dengan RESTful API notes-api.dicoding.dev
• Protected Routes dengan ProtectedRoute component
• Session Management menggunakan local storage
• Auto-logout pada token expiry
• Form Validation dengan real-time feedback

⚡ Performance & UX Optimized

• Fast Rendering dengan React 18.3.1 dan Vite
• Debounced Search untuk optimized API calls
• Loading States dengan skeleton dan spinners
• Error Boundaries untuk graceful error handling
• Optimistic Updates untuk better user experience

🎨 Modern UI/UX Design dengan Tailwind

• Responsive Design dengan Tailwind CSS utilities
• Dark/Light Theme dengan CSS variables dan Context
• Consistent Design System dengan reusable components
• Smooth Animations untuk hover dan transition effects
• Mobile-first Approach dengan adaptive breakpoints

🌍 Internationalization & Accessibility

• Multi-language Support (Indonesia/English) dengan Context
• Persistent Preferences tersimpan di local storage
• ARIA Labels untuk screen reader compatibility
• Keyboard Navigation support
• Semantic HTML structure

🔧 Developer Experience Enhanced

• Custom Hooks untuk reusable logic (useAuth, useTheme, useLocale)
• React Context untuk global state management
• API Utilities untuk consistent HTTP requests
• Component-based Architecture yang scalable
• Hot Module Replacement untuk smooth development

🚀 Quick Start

# Clone repository
git clone <repository-url>

# Masuk ke directory
cd notes-app-react

# Install dependencies
npm install

# Jalankan development server
npm run dev

🔑 First Time Setup

1. Buka aplikasi di http://localhost:5173
2. Registrasi akun baru di /register dengan data valid
3. Login menggunakan kredensial yang baru dibuat
4. Mulai membuat catatan dan explore semua fitur!

🌐 API Information

• Base URL: https://notes-api.dicoding.dev/v1
• Documentation: Lihat dokumentasi lengkap di endpoint base UR...

Submission 1: Kelas Belajar Fundamental Aplikasi Web dengan React

📑 Aplikasi Catatan Pribadi

Single Page Application (SPA) React untuk mengelola catatan pribadi dengan fitur lengkap pencarian, arsip, dan routing modern

Submission Project - Dicoding Academy React Learning Path
Memenuhi semua kriteria utama dan opsional dengan implementasi best practices

✨ Fitur Lengkap

🎯 KRITERIA UTAMA - Semua Terpenuhi ✅

1. Multi-Page SPA dengan React Router

• 🏠 Halaman Utama (/) - Daftar catatan aktif
• 📄 Detail Catatan (/notes/:id) - Tampilan detail dengan path parameter
• 📦 Halaman Arsip (/archived) - Daftar catatan terarsip
• ❌ 404 Page - Halaman tidak ditemukan

2. Manajemen Catatan Lengkap

• ✅ Daftar Catatan - Tampilan grid responsif dengan data awal
• ✅ Detail Catatan - Akses langsung via URL dengan ID parameter
• ✅ Tambah Catatan - Form dengan controlled components
• ✅ Hapus Catatan - Konfirmasi visual di list dan detail
• ✅ PropTypes Validation - Semua komponen tervalidasi

3. Data Structure Compliance

{
  id: 'notes-1',
  title: "Babel",
  body: "Babel merupakan tools open-source...",
  archived: false,
  createdAt: '2022-04-14T04:27:34.572Z'
}

🚀 KRITERIA OPSIONAL - Implementasi Premium ✅

1. Sistem Arsip Cerdas

• 📦 Arsip/Unarsip - Toggle dengan animasi smooth
• 🔄 Automatic Filtering - Pemisahan otomatis catatan aktif/arsip
• 📊 Empty State - Pesan khusus untuk arsip kosong

2. Pencarian Real-time dengan URL Parameters

• 🔍 Live Search - Filter berdasarkan judul tanpa reload
• 🌐 Shareable URLs - Search query tersimpan di URL (?keyword=...)
• ⌨️ Controlled Input - State management yang proper

3. User Experience Premium

• 📱 Responsive Design - Mobile-first dengan breakpoints optimal
• 🎨 Modern UI/UX - Glassmorphism dengan CSS variables
• ♿ Accessibility - ARIA labels dan keyboard navigation
• 🎭 Character Limit - Counter real-time untuk judul (50 karakter)

🏆 FITUR BONUS

• 🎨 Dark Mode Support - Auto-detect sistem preference
• 🚀 Smooth Animations - Hover effects dan transitions
• 📊 Loading States - Visual feedback untuk interaksi
• 🔗 Modern Routing - React Router v7 dengan latest features

📸 Screenshots & Preview

Halaman Utama

• Grid layout responsif dengan catatan aktif
• Search bar untuk filter real-time
• Form input untuk menambah catatan baru
• Modern glassmorphism design

Detail Catatan

• Tampilan full content dengan metadata
• Tombol aksi archive dan delete
• Breadcrumb navigation
• Typography hierarchy yang jelas

Halaman Arsip

• Catatan yang telah diarsipkan
• Option untuk restore ke aktif
• Empty state ketika arsip kosong
• Consistent dengan design system

Mobile Responsive

• Adaptive layout untuk semua device
• Touch-friendly buttons dan navigation
• Optimized untuk mobile experience

💡 Fitur Unggulan

⚡ Performance Optimized

• Fast Rendering dengan React 18.3.1
• Vite Build Tool untuk development yang super cepat
• Minimal Bundle Size dengan tree-shaking otomatis
• CSS Variables untuk theming yang efisien

🎨 Modern UI/UX Design

• Glassmorphism Effect dengan backdrop-blur modern
• Gradient Accents pada buttons dan cards
• Micro-interactions untuk better user experience
• Consistent Design System dengan CSS custom properties

🔧 Developer Experience

• Hot Module Replacement untuk development yang smooth
• ESLint Configuration untuk code quality
• PropTypes Validation untuk type safety
• Component-based Architecture yang scalable

🚀 Quick Start

# Clone repository
git clone <repository-url>

# Masuk ke directory
cd notes-app-react

# Install dependencies
npm install

# Jalankan development server
npm run dev

Buka http://localhost:5173 di browser Anda.

📁 Struktur Project

notes-app-react/
├── public/                     # 🌐 Static assets
│   └── notepad.svg            # App icon
├── src/
│   ├── components/            # 🧩 React Components
│   │   ├── Elements/          # 🔧 Reusable UI elements
│   │   │   ├── Button.jsx     # Custom button component
│   │   │   └── Input.jsx      # Input form component
│   │   ├── Fragments/         # 🧱 Composite components
│   │   │   └── Notes/         # 📝 Note-related components
│   │   │       ├── NoteBody.jsx  # Note content wrapper
│   │   │       ├── NoteInput.jsx # Create new note form
│   │   │       ├── NoteItem.jsx  # Individual note card
│   │   │       └── NoteList.jsx  # Notes grid layout
│   │   └── Layouts/           # 🏗️ Layout components
│   │       ├── Footer.jsx     # App footer
│   │       ├── Header.jsx     # Header with search
│   │       └── MainLayout.jsx # Main page wrapper
│   ├── pages/                 # 📄 Page components (Routes)
│   │   ├── HomePage.jsx       # Home page (/)
│   │   ├── DetailNote.jsx     # Detail page (/notes/:id)
│   │   └── NotFoundPage.jsx   # 404 page
│   ├── routes/                # 🛣️ Routing configuration
│   │   └── index.jsx          # Routes definition
│   ├── styles/                # 🎨 CSS Styles
│   │   └── style.css          # Main stylesheet
│   ├── utils/                 # 🛠️ Utility functions
│   │   └── data.js            # Data management functions
│   ├── App.jsx                # 🏠 Main app component
│   └── main.jsx               # 🚀 App entry point
├── package.json               # 📦 Dependencies
├── vite.config.js             # ⚡ Vite configuration
└── README.md                  # 📖 Documentation

🎯 Implementasi Kriteria Submission

✅ KRITERIA UTAMA (Semua Terpenuhi)

1. Minimal 2 Halaman Berbeda

• ✅ Halaman 1: Daftar catatan aktif (/) dan arsip (/archived)
• ✅ Halaman 2: Detail catatan tunggal (/notes/:id)
• ✅ Bonus: 404 Page untuk route tidak valid

2. Daftar Catatan

• ✅ Menampilkan data awal dari getInitialData()
• ✅ Tampilkan title, createdAt, dan body
• ✅ Conditional rendering: "Tidak ada catatan" saat list kosong

3. Detail Catatan

• ✅ Tampilkan catatan tunggal berdasarkan id parameter
• ✅ Menggunakan useParams() untuk mengambil ID dari URL
• ✅ Direct access via URL /notes/notes-1
• ✅ Fallback ke 404 jika catatan tidak ditemukan

4. Menambahkan Catatan Baru

• ✅ Controlled components dengan useState hooks

• ✅ Data tersimpan di memori (hilang saat refresh)

• ✅ Struktur data sesuai requirement:

  {
    id: `notes-${+new Date()}`,    // Unique timestamp ID
    title: "Judul Catatan",
    body: "Isi catatan...",
    archived: false,
    createdAt: new Date().toISOString()
  }

• ✅ Auto-clear form setelah submit berhasil

5. Menghapus Catatan

• ✅ Tombol hapus tersedia di NoteItem dan DetailNote
• ✅ Instant removal dari state dengan filter
• ✅ Visual feedback dengan animasi

6. Validasi PropTypes

• ✅ Semua komponen memiliki PropTypes validation
• ✅ No warnings di console development

🚀 KRITERIA OPSIONAL (Semua Diimplementasi)

1. Arsip Catatan

• ✅ Halaman terpisah untuk catatan terarsip (/archived)
• ✅ Toggle archive/unarchive dengan satu klik
• ✅ Conditional rendering: "Arsip kosong" saat tidak ada data
• ✅ Visual distinction dengan icons berbeda

2. Pencarian Catatan

• ✅ Real-time search berdasarkan judul catatan
• ✅ Search parameters menggunakan useSearchParams
• ✅ Shareable URLs: /archived?keyword=react
• ✅ Controlled input dengan proper state management

3. 404 Pages

• ✅ NotFoundPage component untuk route tidak dikenal
• ✅ Consistent styling dengan tema aplikasi

🎨 Tech Stack & Architecture

Kategori	Teknologi	Versi	Fungsi
Frontend	React	18.3.1	UI library dengan function components
Routing	React Router	7.6.1	SPA routing dengan modern hooks
Build Tool	Vite	6.0.5	Fast development server & build
Validation	PropTypes	15.8.1	Runtime type checking
Icons	React Icons	5.4.0	Consistent icon library
Styling	CSS3	-	Modern CSS dengan variables & animations
Linting	ESLint	9.17.0	Code quality & consistency

🏗️ Arsitektur Komponen

// State Management Pattern
const [notes, setNotes] = useState(getInitialData());
const [searchQuery, setSearchQuery] = useState("");

// Filtering Logic
const filteredNotes = notes.filter((note) =>
  note.title.toLowerCase().includes(searchQuery.toLowerCase())
);

// Separation of Concerns
const activeNotes = filteredNotes.filter((note) => !note.archived);
const archivedNotes = filteredNotes.filter((note) => note.archived);

...

Submission Kelas : Belajar Membuat Aplikasi Web dengan React

📑 Aplikasi Catatan Pribadi

Aplikasi web React modern untuk mengelola catatan pribadi dengan fitur pencarian dan arsip

✨ Fitur Utama

🎯 Kriteria Utama

• 📋 Menampilkan Daftar Catatan - Tampilkan semua catatan dengan data awal
• ➕ Menambah Catatan Baru - Form input dengan controlled components
• 🗑️ Menghapus Catatan - Hapus catatan dengan konfirmasi visual

🚀 Fitur Premium

• 🔍 Pencarian Real-time - Cari catatan berdasarkan judul
• 📏 Limit Karakter - Pembatasan 50 karakter untuk judul dengan counter
• 📦 Sistem Arsip - Arsipkan dan restore catatan dengan mudah

🚀 Quick Start

# Clone repository
git clone https://github.com/username/notes-app-react.git

# Masuk ke directory
cd notes-app-react

# Install dependencies
npm install

# Jalankan development server
npm run dev

Buka http://localhost:5173 di browser Anda.

📁 Struktur Project

notes-app-react/
├── public/                  # 🌐 Static assets
├── src/
│   ├── components/          # 🧩 React Components
│   │   ├── Header/          # 📋 Header with search
│   │   ├── Input/           # ⌨️ Input components
│   │   └── Notes/           # 📝 Note-related components
│   │       ├── NoteBody.jsx # Note content wrapper
│   │       ├── NoteInput.jsx# Create new note form
│   │       ├── NoteItem.jsx # Individual note card
│   │       └── NoteList.jsx # Notes grid layout
│   ├── styles/              # 🎨 CSS Styles
│   ├── utils/               # 🛠️ Utility functions
│   ├── App.jsx              # 🏠 Main app component
│   └── main.jsx             # 🚀 App entry point
├── package.json             # 📦 Dependencies
└── README.md                # 📖 Documentation

🎯 Fitur Detail

📝 Membuat Catatan

1. Judul dengan limit 50 karakter dan real-time counter
2. Konten unlimited di textarea
3. Auto-clear form setelah submit berhasil
4. Timestamp otomatis menggunakan +new Date()

🔍 Pencarian

• Real-time filtering berdasarkan judul catatan
• Case-insensitive search untuk kemudahan penggunaan
• Instant results tanpa perlu reload

📦 Sistem Arsip

• Toggle archive/unarchive dengan satu klik
• Separated views untuk catatan aktif dan arsip
• Visual indicators dengan icons yang berbeda

🎨 Tech Stack

Kategori	Teknologi	Versi	Alasan Pemilihan
Frontend	React	18.3.1	Modern UI library dengan hooks
Build Tool	Vite	6.0.5	Fast build dan HMR
Icons	React Icons	5.4.0	Consistent icon library
Styling	CSS3	-	Custom CSS dengan modern features
Linting	ESLint	9.17.0	Code quality enforcement

🔧 Development

Available Scripts

Command	Fungsi
npm run dev	🚀 Start development server
npm run build	📦 Build for production
npm run preview	👀 Preview production build
npm run lint	🔍 Check code quality

State Management

const [searchQuery, setSearchQuery] = useState(""); // Kata kunci pencarian
const [notes, setNotes] = useState(getInitialData()); // Array semua catatan

// Filter catatan berdasarkan search query
const filteredNotes = notes.filter((note) =>
  note.title.toLowerCase().includes(searchQuery.toLowerCase())
);

// Pisahkan catatan aktif dan arsip
const activeNotes = filteredNotes.filter((note) => !note.archived);
const archivedNotes = filteredNotes.filter((note) => note.archived);

📖 Usage Guide

Membuat Catatan Baru

1. Ketik judul catatan (max 50 karakter)
2. Tulis konten di textarea
3. Klik tombol "Buat Catatan 📝"
4. Form akan otomatis ter-reset

Mengarsip Catatan

1. Klik icon arsip (📦) pada catatan
2. Catatan akan pindah ke section "Catatan Arsip"
3. Untuk unarchive, klik icon restore (📤)

Mencari Catatan

1. Gunakan search box di header
2. Ketik judul catatan yang dicari
3. Results akan muncul real-time

🎨 UI/UX Features

Design System

• Modern glassmorphism dengan backdrop blur
• Consistent color scheme dengan CSS variables
• Responsive grid layout yang adaptive
• Clean typography dengan Inter font
• Interactive animations pada hover states

User Experience

• Instant feedback untuk semua actions
• Loading states yang smooth
• Error handling yang user-friendly
• Mobile-first responsive design

✅ Best Practices

Code Quality

• Controlled Components untuk form inputs
• Proper key props untuk list rendering
• ES6+ syntax (destructuring, arrow functions, etc.)
• Descriptive naming untuk variables dan functions
• Component separation yang logical

Performance

• Efficient filtering dengan array methods
• Minimal re-renders dengan proper state management
• Lightweight components tanpa over-engineering

Accessibility

• Semantic HTML structure
• Color contrast yang baik
• Keyboard navigation support

🤝 Contributing

Kontribusi selalu welcome! Silakan:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Author

Aditya Pratama

• GitHub: @aditypraa
• Email: aditypraa@gmail.com

🙏 Acknowledgements

• React
• Vite
• React Icons
• Dicoding Academy

---

⭐ Jangan lupa kasih star jika project ini membantu kamu!