📝 React To-Do List App

🚀 Modern, Responsive To-Do List Application Built with React

Kelola tugas Anda dengan mudah dan efisien menggunakan aplikasi to-do list yang modern dan responsif

---

✨ Features

• ➕ Add Tasks - Tambahkan tugas baru dengan mudah
• ✅ Mark Complete - Tandai tugas sebagai selesai
• ✏️ Edit Tasks - Edit tugas yang sudah ada
• 🗑️ Delete Tasks - Hapus tugas yang tidak diperlukan
• 🔍 Filter Tasks - Filter tugas berdasarkan status (All, Active, Completed)
• 💾 Local Storage - Data tersimpan otomatis di browser
• 📱 Responsive Design - Bekerja sempurna di desktop dan mobile
• 🎨 Modern UI - Interface yang clean dan modern
• ⚡ Fast Performance - Aplikasi yang ringan dan cepat

🎯 Demo

Note: Ganti placeholder di atas dengan screenshot aplikasi Anda yang sebenarnya

🚀 Getting Started

Prerequisites

Pastikan Anda memiliki Node.js dan npm terinstall di komputer Anda:

• Node.js (version 14.0 atau lebih baru)
• npm (biasanya sudah termasuk dengan Node.js)

Installation

1. Clone repository ini

   git clone https://github.com/mchyns/To-DoListApp.git
   cd To-DoListApp

2. Install dependencies

   npm install

3. Jalankan aplikasi

   npm start

4. Buka browser

   Aplikasi akan otomatis terbuka di http://localhost:3000

🏗️ Project Structure

To-Do_List_App/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── TaskInput.js      # Komponen input untuk menambah tugas
│   │   ├── TaskList.js       # Komponen daftar tugas
│   │   ├── TaskItem.js       # Komponen item tugas individual
│   │   └── TaskFilters.js    # Komponen filter tugas
│   ├── App.js               # Komponen utama aplikasi
│   ├── index.js            # Entry point aplikasi
│   └── index.css           # Styling utama
├── package.json
└── README.md

🛠️ Built With

• React - Library JavaScript untuk membangun user interface
• React Hooks - useState, useEffect untuk state management
• CSS3 - Styling dengan gradients dan animasi modern
• Local Storage API - Penyimpanan data lokal

💡 How It Works

State Management

Aplikasi menggunakan React Hooks untuk mengelola state:

• useState untuk menyimpan daftar tugas dan filter aktif
• useEffect untuk loading dan saving data ke localStorage

Data Persistence

Data tugas disimpan di localStorage browser, sehingga tugas Anda tidak akan hilang meskipun browser ditutup.

Task Operations

• Create: Tambah tugas baru dengan timestamp
• Read: Tampilkan semua tugas dengan filter
• Update: Edit teks tugas dan toggle status completed
• Delete: Hapus tugas dengan konfirmasi

🎨 UI/UX Features

• Gradient Background - Background dengan gradient yang menarik
• Card-based Design - Layout berbasis card yang modern
• Smooth Animations - Transisi yang halus untuk interaksi
• Responsive Layout - Otomatis menyesuaikan ukuran layar
• Color-coded Status - Warna berbeda untuk tugas completed/active

📱 Responsive Design

Aplikasi ini dirancang untuk bekerja sempurna di:

• 🖥️ Desktop (1200px+)
• 💻 Laptop (768px - 1199px)
• 📱 Tablet (481px - 767px)
• 📞 Mobile (hingga 480px)

🔧 Available Scripts

Di direktori project, Anda dapat menjalankan:

npm start

Menjalankan aplikasi dalam development mode.
Buka http://localhost:3000 untuk melihatnya di browser.

npm test

Menjalankan test runner dalam interactive watch mode.

npm run build

Membangun aplikasi untuk production ke folder build.
Aplikasi siap untuk di-deploy!

npm run eject

Note: ini adalah operasi satu arah. Sekali Anda eject, Anda tidak bisa kembali!

🚀 Deployment

Deploy ke Netlify

1. Build aplikasi: npm run build
2. Drag & drop folder build ke Netlify

Deploy ke Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel --prod

Deploy ke GitHub Pages

1. Install gh-pages: npm install --save-dev gh-pages
2. Tambahkan script di package.json:

   "homepage": "https://mchyns.github.io/To-DoListApp",
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }

3. Run: npm run deploy

🤝 Contributing

Kontribusi sangat diterima! Untuk berkontribusi:

1. Fork repository ini
2. Buat branch feature Anda (git checkout -b feature/AmazingFeature)
3. Commit perubahan Anda (git commit -m 'Add some AmazingFeature')
4. Push ke branch (git push origin feature/AmazingFeature)
5. Buat Pull Request

🐛 Bug Reports

Jika Anda menemukan bug, silakan buat issue dengan:

• Deskripsi bug yang jelas
• Steps to reproduce
• Expected behavior
• Screenshots (jika diperlukan)

📈 Future Enhancements

• 🌙 Dark/Light mode toggle
• 📅 Due dates untuk tugas
• 🏷️ Categories/Tags untuk tugas
• 🔔 Notifications/Reminders
• ☁️ Cloud sync (Firebase/AWS)
• 👥 Multi-user support
• 📊 Analytics dashboard
• 🎨 Custom themes
• 📱 PWA (Progressive Web App)
• 🔍 Search functionality

📄 License

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

👨‍💻 Author

mchyns

• GitHub: @mchyns
• Project Link: https://github.com/mchyns/To-DoListApp

🙏 Acknowledgments

• React Documentation
• MDN Web Docs
• Create React App
• Emoji Cheat Sheet

---

⭐ Star this repo if you like it! ⭐

Made with ❤️ by mchyns