MovieSearch (React Platform)

MovieSearch is a React SPA that demonstrates the benefits of using Reactive State Management (RSM).

MovieSearch presents a non-trivial UX with requirements for complex filtering, paginated data, computed properties, and custom interactions between two (2) reactive stores.

This React SPA uses Tailwind CSS, CVA stylings, Facades, Presentation components, and View Models to demonstrate the beauty and benefit of SoC in React applications.

Additional features include:

• local data cache persistence,
• bi-directional bookmarks support

This repository contains labs and solutions for implementing Reactive State Management (RSM) within the React MovieSearch application using either:

• @ngneat/Elf: branch store-finish-elf
• Zustand: branch store-finish-zustand

Reactive Stores

Learn more here: Reactive Stores

This CodeLab is the starting point for a hands-on FE coding session. Developers leverage their understandings of Reactive State Management using Elf + custom Stores/Facades.

The repository "start" branch solution uses mock data with a useMovieFacade hook and does not use any reactive state management.

These two 4-hour code jams include lab exercises that enables developers to practice implementing those ideas using concepts-to-practice lab examples. Click links below to open the desired Lab instructions:

Reactive Stores with Zustand

• Lab 1: Implement MovieStore
• Lab 2: Implement Offline Cache and Immutability
• Lab 3: Implement Bookmark features
• Lab 4: Implement Pagination features

Reactive Stores with Elf

• Lab 1: Implement MovieStore
• Lab 2: Implement MovieFacade
• Lab 3: Implement useMovieFacade
• Lab 4: Use freezeStores()

Running Locally

npm i && npm start

License

MIT Thomas Burleson, FE Architect