A demo of Expo Router v3 with API Routes using the Cleveland Museum of Art Open Access API
- Lists categories of artwork
- Lists artwork in each category with a thumbnail
- Loads individual works with their tombstones
- Lets you "clap" for the artwork
- "Clapped" artwork shows up on the Favorites tab
- The works of art themselves are pulled from the Cleveland Museum of Art Open Access API, retrieved using TanStack query, with some use of the query client to cache the image mapping for quick partial loading
- The clapping / favorites functionality is done with Expo Router API routes. Look for the +api files, one to get/ set claps for individual works, and another to read them all back for the Favorites tab.
- A little bit of Reanimated, because I wanted to slow down the "clapping" due to my hacky local storage implementation.
- Bun installed (https://bun.sh/docs/installation)
- Run
bun install
- Run
npx expo start
- The clap data is just wired up with node-persist local data in JSON files. There's no locking of the files or anything, so you can crash it if you try. Was just trying to test routes themselves with something self-contained.
- I didn't notice this the first time, but it turns out the Museum API has been quite slow lately, so this app is a good test of loading spinners. Once you've loaded data, though, it's a good demonstration of TanStack Query's caching. I could reimplement this with their Github data store and it'd probably be fine. the CDN for images seems quite fast.
- The app works on web, but I'm getting intermittant CORS errors. Sometimes the same API call works and sometimes it doesn't.
Not much to these slides, but if it helps, it helps. Slides