Aplikasi expense tracker sederhana untuk melacak pemasukan dan pengeluaran, dibuat dengan React + Redux + Vite.
-
REDUX_GUIDE.md ⭐ WAJIB BACA!
- Penjelasan lengkap apa itu Redux dan mengapa dipakai
- Step-by-step membuat Redux dengan ketik manual
- Penjelasan syntax baris per baris dan kegunaan setiap bagian
- Cara menggunakan Redux di component
- Common mistakes dan debugging tips
-
- Panduan implementasi per person (5 orang)
- Code examples untuk setiap feature
- Pembagian poin per task
-
- Struktur folder dan file lengkap
- Penjelasan kegunaan setiap file
-
- Penjelasan dasar React, Redux, hooks
- Konsep useState, useEffect, useSelector, useDispatch
-
- Git workflow untuk 5 orang tanpa conflict
- Cara branching, commit, merge
npm installnpm run devBuka browser di http://localhost:5173
npm run build| Kriteria | Poin | Person |
|---|---|---|
| Redux | 4 | Person 3 & 4 |
| Redux Thunk | 5 | Person 3 & 4 |
| useState | 3 | Person 2, 3, 4, 5 |
| useEffect | 3 | Person 2, 3, 4 |
| 1 Page | 3 | Person 1, 2, 3, 4, 5 |
| Styling (Optional) | +3 | Semua |
| Person | Page | Features | Poin |
|---|---|---|---|
| Person 1 | Landing + Navbar | Routing, styling | 3 |
| Person 2 | Dashboard | Charts, useEffect | 6 |
| Person 3 | Transactions | Redux + Thunk + CRUD | 18 |
| Person 4 | Categories | Redux + Thunk + CRUD | 18 |
| Person 5 | FAQ | useState accordion | 6 |
src/
├── App.jsx # Router utama + Redux Provider
├── main.jsx # Entry point
├── pages/ # 5 halaman (1 person = 1 page)
│ ├── LandingPage.jsx
│ ├── Dashboard.jsx
│ ├── TransactionsPage.jsx
│ ├── CategoriesPage.jsx
│ └── FAQPage.jsx
├── components/ # Reusable components
│ ├── Navbar.jsx
│ ├── TransactionTable.jsx
│ ├── TransactionForm.jsx
│ ├── CategoryForm.jsx
│ └── ChartCard.jsx
├── store/ # Redux store & slices
│ ├── index.js # Store configuration
│ ├── transactionSlice.js
│ └── categorySlice.js
├── data/ # Dummy JSON data
│ ├── transactions.json
│ └── categories.json
└── utils/ # Helper functions
└── formatters.js
- React 19 - UI library
- Redux Toolkit - State management
- React Router DOM - Client-side routing
- Chart.js - Data visualization
- Tailwind CSS - Utility-first styling
- Vite - Build tool
- Baca REDUX_GUIDE.md dari awal sampai akhir
- Ketik manual semua code Redux (jangan copy-paste!)
- Pahami setiap baris dengan baca penjelasan di guide
- Test dengan Redux DevTools di browser
- Gunakan Redux di component dengan useDispatch dan useSelector
✅ Muscle memory - Tangan terbiasa dengan syntax
✅ Understand deeply - Paham bukan cuma hafal
✅ Spot errors - Bisa debug sendiri kalau ada error
✅ Build confidence - Yakin bisa bikin dari nol
- Install extension: Redux DevTools
- Buka browser DevTools (F12)
- Klik tab "Redux"
- Lihat state tree, action history, dan diff
| Error | Solution |
|---|---|
Cannot read property 'items' |
Cek useSelector path: state.transactions.items |
dispatch is not a function |
Import useDispatch dari react-redux |
store is not defined |
Import store dan wrap dengan <Provider> |
Reducer not found |
Cek export di slice dan daftar di store |
Kalau ada pertanyaan atau stuck:
- Baca Redux Guide dengan teliti
- Cek Redux DevTools untuk lihat state
- Lihat console browser untuk error messages
- Tanya teman satu tim atau instruktur
- File transactionSlice.js selesai diketik manual
- File categorySlice.js selesai diketik manual
- File store/index.js uncomment reducers
- File App.jsx wrap dengan
<Provider> - Redux DevTools menampilkan state
- Landing page styled with features
- Dashboard dengan Chart.js
- TransactionsPage dengan Redux CRUD
- CategoriesPage dengan Redux CRUD
- FAQPage dengan accordion interactive
- Responsive design (mobile-friendly)
- No console errors
- Setiap person punya branch sendiri
- Commit messages jelas
- No merge conflicts
Good luck! 🚀