Item Viewer

Overview

Item Viewer is a web app that uses the Real Items API to display items and memories that have been created via the API.

https://dxcaoh07fo39r.cloudfront.net/dxcaoh07fo39r.cloudfront.net

Home page

On the home page, there is an input field for entering an item ID. Clicking on VIEW ITEM takes the user to a detailed view of the item associated with that ID.

In the item view, the getItem query is called and the response data is used to populate the view.

https://dxcaoh07fo39r.cloudfront.net/48094d2d-0cfd-47f5-b7f2-b24b570fb15fdxcaoh07fo39r.cloudfront.net

Item view

If there are memories associated with an item, click VIEW MEMORIES to display them. This calls the listMemoriesByItemId query to retrieve memories associated with the item ID.

Here are some sample item IDs you can use to explore the app:

48094d2d-0cfd-47f5-b7f2-b24b570fb15f
96c498ec-6f1c-42ce-936a-4c110ca43a36
b0348cf3-e76b-4327-80fb-8a720d4c88e7

The demo app can only view items that were created by the API key that was used when building the app.

Source Code

The code used for this demo is split into two parts: backend and frontend. They are available on Github.

https://github.com/realitems/item-viewer-backendgithub.com

https://github.com/realitems/item-viewer-frontendgithub.com

Follow the README instructions on each repo to get started.

Note that the repos are provided for demo purposes only. for production use, make sure that you take additional steps to secure your API key and prevent unauthorized access to your application, depending on your use case.

QR Codes

Since item IDs are unique, the URL for each item can be used to create QR codes.

https://dxcaoh07fo39r.cloudfront.net/48094d2d-0cfd-47f5-b7f2-b24b570fb15f
https://dxcaoh07fo39r.cloudfront.net/96c498ec-6f1c-42ce-936a-4c110ca43a36
https://dxcaoh07fo39r.cloudfront.net/b0348cf3-e76b-4327-80fb-8a720d4c88e7

Generate QR codes using a QR code generator library or an online QR code service.