Just an app that loads some of my favorite Portland eateries from the Yelp GraphQL API.
This was an interview exercise project that I chose to continue improving. The version I sent to the company is tagged at 0.1.0
.
- UI Build - Vite
- UI Framework - React
- Types - TypeScript
- CSS - Sass, BEM, Themes, Custom Properties (Variables)
- Cache - TanStack Query
- Routing - React Router
- State - React Router loaders
- Repo / Automation - You guessed it... Github / Actions
- Deployment - Cloudflare Worker Site using Wrangler
The app fetches basic data from Yelp of some hard-coded eateries (using their alias IDs). This loads a list into the UI's homepage. Clicking on an item loads a 'Fav' page which queries Yelp for more data about the eatery (reviews, rating, address, etc). The reviews panel has a refresh button that invalidates the cache for that page and refetches it. The plan here was to see updates in the reviews list but they don't come in frequently enough. 🫤
Oh and it's set up to use your browser-preferred color theme (light, dark). So give your browser theme settings a toggle to check it out.
install dependencies:
npm run install
Things you'll need to run:
-
A Yelp API Key with Developer Beta
-
A
.env.development.local
env file inapp/src
. This allows Vite dev server to pick up the needed env variables. It should have:VITE_YELP_API_KEY=<Your API Key> VITE_YELP_API_ENDPOINT=/graphql
-
a
.dev.vars
env file in the project root. This is to make the API Key avaiable to the Worker when it's running locally. It should have:VITE_YELP_API_KEY=<Your API Key>
The Worker serves static assets and also makes the /graphql
queries. To run using Wrangler:
npm run dev
Vite server serves assets and proxies /graphql
queries. To run using Vite:
npm run app
The UI posts queries to the server (no CORS issues or exposed secrets) and then does fun stuff.
- Add SubPub to Yelp webhooks and send updates to UI via Server Sent Events
- Add similar places based on the active favorite (same categories, location, rating)
- Integrate a map and button to trigger driving directions
- Add Cloudflare binding to D1 to store favorites, and add or remove them
- Any GraphQL mutations... nothing I saw in Yelp API for updating user profile or posting reviews...
- Accessibility
- Make it AA/AAA compliant (color contrast, keyboard access, ARIA properties, target size ... to start)
- Tests (more of a 'must' than a 'like')
- Started on the this but couldn't get the configuration done fast enough
- Want to use Mock Service Worker and Testing Library, but combined with GraphQL queries and React Router loaders, it was just too much to tackle in a short amount of time 😞
- Rebuild of Vite on file changes doesn't trigger Wrangler dev restart (workaround: saving toml file triggers the Wrangler build)
- Not sure I've I'm catching all my errors and rejected promises... saw at least one UI blow-up when I hit the Yelp daily rate limit