"The week that connects everything."
Minggu ini kalian belajar menghubungkan React frontend ke backend API, manage state dengan proper, handle authentication, dan prepare for production deployment.
Sebelum mulai Week 4, pastikan kalian udah paham:
- ✅ Week 1: React basics, JSX, components, props
- ✅ Week 2: Hooks (useState, useEffect, useRef), React Router
- ✅ Week 3: Advanced hooks, custom hooks, performance optimization
- ✅ Phase 1: Express API, JWT authentication, database CRUD
Pelajari secara berurutan — setiap materi build on top of the previous one.
| # | Materi | Topik | Durasi |
|---|---|---|---|
| 01 | The State Spectrum | Dari useState sampe server state, lifting state, prop drilling | 45 min |
| 02 | Zustand Fundamentals | State management yang gak bikin pusing, store creation | 60 min |
| 03 | Zustand Advanced | Production-grade patterns, middleware, selectors | 60 min |
| # | Materi | Topik | Durasi |
|---|---|---|---|
| 04 | Data Fetching Patterns | Kenapa useEffect + fetch itu bencana, proper patterns | 45 min |
| 05 | Axios Service Layer | Arsitektur API yang bener, interceptors, error handling | 45 min |
| 06 | React Query CRUD | useQuery, useMutation, queryKey, caching | 75 min |
| 07 | React Query Advanced | Dashboard dengan multiple data sources, optimistic updates | 60 min |
| # | Materi | Topik | Durasi |
|---|---|---|---|
| 08 | Auth JWT Complete | Dari register sampe auto-logout, token rotation | 60 min |
| 09 | Protected Routes | Role-based access control, route guards, auth context | 45 min |
| 10 | Error Handling & UX | Bikin app yang gak malu-maluin pas error | 60 min |
| # | Materi | Topik | Durasi |
|---|---|---|---|
| 11 | Environment Variables & Deploy Prep | Vite env vars, CORS, proxy, production checklist | 45 min |
| 12 | WebSocket — Real-time | WebSocket basics, Socket.IO in React, real-time patterns | 60 min |
| 13 | Testing API Integration | MSW, testing React Query hooks, testing auth flows | 75 min |
| 14 | Soft Skill: API Documentation | Swagger/OpenAPI, Postman, HTTP status codes, rate limiting | 45 min |
| 15 | Week 4 Recap | Decision trees, checklists, top mistakes, Week 5 prep | 30 min |
| # | Quest | Type | Difficulty |
|---|---|---|---|
| 01 | Arcane Bridge — Connect to Phase 1 API | MANDATORY | ⭐⭐⭐ |
| 02 | Arcane Command Center — Real-time Dashboard | Optional | ⭐⭐⭐⭐ |
| 03 | Arcane Scroll — Social Feed | Optional | ⭐⭐⭐⭐ |
| 04 | Arcane Task Guild — Group Project | Group (3-4) | ⭐⭐⭐⭐⭐ |
| 05 | Ujian Week 4 | Exam | ⭐⭐⭐ |
AQ-01 is MANDATORY. Ini bridge antara Phase 1 dan Phase 2. Semua orang HARUS submit.
Practice challenges buat tiap major topic:
| Quiz | Topic | Challenges |
|---|---|---|
| Quiz: State Management | Zustand, Context, state patterns | 8 challenges |
| Quiz: API Integration | React Query, Axios, data fetching | 6 challenges |
| Quiz: Authentication | JWT, protected routes, token handling | 5 challenges |
Day 1 (Mon): Materi 01-03 → Quiz State (partial)
Day 2 (Tue): Materi 04-06 → Start AQ-01
Day 3 (Wed): Materi 07-09 → Quiz API + Quiz Auth
Day 4 (Thu): Materi 10-12 → Continue AQ-01
Day 5 (Fri): Materi 13-15 → Finish AQ-01 → Ujian
| Category | Tools |
|---|---|
| State Management | useState, Context API, Zustand |
| Server State | TanStack React Query v5 |
| HTTP Client | Axios |
| Forms | React Hook Form + Zod |
| Real-time | Socket.IO Client |
| Testing | Vitest + React Testing Library + MSW |
| Deployment | Vercel (FE) + Railway (BE) |
By the end of this week, kalian bisa:
- Choose the right state management solution for any scenario
- Connect a React frontend to a REST API
- Implement JWT authentication with protected routes
- Handle loading, error, and empty states professionally
- Write tests for API integrations
- Deploy a fullstack application to production
- Read API documentation and use professional tools
- TanStack React Query Docs
- Zustand GitHub
- Axios Docs
- Socket.IO Client Docs
- MSW Docs
- Swagger Petstore — practice reading API docs
- HTTP Status Codes Reference
Kalian udah pernah ngerjain flow ini di Phase 0-1, jadi harusnya udah familiar. Tapi gua tulis lagi biar gak ada yang bingung.
Kalian akan melakukan Fork & PR ulang untuk setiap week karena ETHJKT memisahkan 1 Repo = 1 Week.
- Fork repo ini ke GitHub account kalian
- Clone fork kalian ke local
- Kerjain study materials, quizzes, dan arcane quests
- Commit progress kalian (wajib push minimal 1 commit per hari!)
- Push ke fork kalian
- Create Pull Request ke repo ETHJKT ini
- Mentor akan review lewat PR comments
- Untuk pengerjaan selanjutnya, tinggal commit & push aja — PR otomatis ke-update
- 📝 Isi judul PR dengan username/nama kalian
- 📅 Wajib push minimal 1 commit per hari
- 🧹 Code harus clean, typed (TypeScript), dan well-commented
- 📬 Semua submission via Pull Request
- 🚀 Deploy setiap Arcane Quest ke Vercel
Next Week: Week 5 — Capstone Project 🚀