Teachers

Week 12 Overview

This week covers the patterns for apps that are more dynamic - tracking who the user is, remembering what they've done, and responding to their actions before the server has a chance to reply.

TanStack Query replaces the manual useEffect + useState fetching pattern with a data layer that handles caching, background refresh, deduplication, and loading states automatically. Optimistic updates extend that further: the UI updates immediately when a user does something, then confirms or rolls back once the server responds. Authentication introduces JWTs - how they're structured, how the login flow works, and where to store a token. And localStorage gives you a way to remember things across page loads - preferences, drafts, session state - along with clear rules for what belongs there and what doesn't.

Learning goals

Fetch data with TanStack Query - replace manual loading state with cached, keyed queries
Mutate data with TanStack Query - trigger writes and invalidate affected queries on success
Apply optimistic updates - update the UI before the server responds and roll back on failure
Implement a JWT login flow - store the token, attach it to requests, and gate routes on auth state
Persist data in localStorage - read and write safely, and decide what belongs there
Avoid common frontend security pitfalls - XSS, CSRF, CORS, and leaking secrets through the client bundle

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

CC BY-NC-SA 4.0 Icons

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.