🚀 Week 19: Advanced Context API, Map Integration & Working with JSON-Server (Fake API)

Week 19 was all about deep practice and real-world implementation.
Instead of just learning new concepts, I focused on applying everything practically — especially Advanced Context API patterns, working with maps, and handling API requests using json-server.

This week felt more like building a real product than just completing exercises.

---

🔥 1. Advanced Context API (Deep Practice)

I revisited Context API, but this time I didn’t just use it — I tried to understand its deeper structure and advanced patterns.

What I Practiced:

• Creating a clean Provider structure
• Separating logic into custom hooks
• Avoiding prop drilling completely
• Managing global state in a scalable way
• Understanding derived state inside context
• Handling side effects properly

Instead of just passing state, I structured context like a mini state management system.

This practice helped me think about:

• Component architecture
• Clean folder structure
• Reusable hooks
• Performance considerations

Now Context API feels less like a tool — and more like a pattern for scalable apps.

---

🗺️ 2. Working with Maps (Leaflet Integration)

This week I also worked on improving map interactions in my project.

Key Improvements:

• Dynamic map center updates
• Handling click events on the map
• Navigating programmatically using coordinates
• Syncing URL parameters with map position
• Rendering dynamic markers

I integrated:

• useNavigate
• useSearchParams
• Custom hooks
• Leaflet map events

This made the application feel much more interactive and realistic.

Working with maps really improves your understanding of:

• External library integration
• Event handling
• State synchronization

---

🌐 3. Working with JSON-Server (Fake API)

To simulate a backend, I used json-server.

Instead of static data, I worked with a fake REST API and practiced:

• Fetching data (GET requests)
• Creating data (POST requests)
• Deleting data (DELETE requests)
• Handling loading state
• Error handling with try/catch

What I Improved:

• Async/Await usage
• Managing loading indicators
• Updating UI optimistically
• Syncing API data with Context state

Using json-server makes frontend development feel real — because now you’re not just managing local state, you’re interacting with an API.

---

📌 Concepts Strengthened This Week

• Advanced Context API patterns
• Custom hooks
• React Router hooks
• Map event handling
• URL-based state management
• Fetch API (GET, POST, DELETE)
• Async state handling

This week was less about new topics and more about depth and confidence.

---

💡 Key Takeaways

• Practice makes architecture clearer.
• Context API becomes powerful when structured properly.
• Working with APIs changes how you think about state.
• Maps and external libraries improve real-world readiness.

---

🔜 What’s Next?

• Even deeper state management patterns
• Cleaner project structure
• Performance optimization
• Moving from fake API to real backend

Week 19 helped me move from learning concepts to thinking like a developer building real applications.

Consistency continues.