$ show midudev/aprendiendo-react
This repository is a collection of 14 small to medium React projects, built as part of a popular Spanish YouTube course (midudev). Each project focuses on a specific React concept or real-world pattern: from basic component state and effects (Twitter follow card, tic-tac-toe, mouse follower) to advanced topics like custom hooks, fetching data, complex state management with useReducer and useContext, TypeScript integration, routing (including a custom router), Redux Toolkit, React Query, Zustand, and CSS-in-JS with vanilla-extract. The projects are self-contained, well-structured, and progressively build complexity, making this an excellent learning resource for intermediate React developers. The code quality is professional: modern React (18), functional components, hooks, TypeScript in later projects, and some tests (Playwright, Vitest). The custom router (midu-router) is published as an npm package and demonstrates non-trivial patterns like dynamic route matching with path-to-regexp, lazy loading, and i18n. Other reusable gems include a generic debounce hook, a Redux middleware for optimistic updates with rollback, and a Zustand store with persistence. While not a single production application, the repository serves as a practical textbook of React patterns. Developers can extract individual components or hooks into their own projects with minimal adaptation.
The LLM identified 5 files worth highlighting for reuse:
A lightweight, custom React router that supports dynamic routes (via path-to-regexp), lazy loading, 404 handling, and both declarative (Route children) and imperative (routes prop) API. It listens to pushstate and popstate events to update the current path and renders the matching component. The design is clean, self-contained, and can be extracted as a standalone library (it already is: midu-router on npm).
A link component that intercepts click events, prevents default browser navigation for same-origin links, and uses the History API to perform SPA navigation. It handles modifier keys, target attributes, and scroll-to-top. This component is fully reusable in any React SPA that needs a programmatic navigation helper.
A generic TypeScript debounce hook that delays updating a value until after a specified delay. It correctly cleans up timeouts on unmount and when dependencies change. This pattern is essential for optimizing search inputs, resize listeners, or any high-frequency event. The implementation is minimal, typed, and can be copied into any project.
A Redux store configuration with two custom middlewares: one that persists the entire state to localStorage, and another that simulates a database sync on delete actions, with automatic rollback on failure (using the rollbackUser action). This demonstrates advanced Redux Toolkit patterns: middleware composition, optimistic updates, and error recovery. The rollback logic can be extracted as a generic pattern for any CRUD app.
A Zustand store that manages quiz questions, current question index, and user answers. It uses the persist middleware to save state to localStorage and devtools for debugging. The store includes async data fetching with a local JSON file, shuffling of questions, and actions for selecting answers (with confetti animation), navigating questions, and resetting. The pattern is reusable for any quiz or survey app.