Skip to content

redhat-developer-demos/coderland-photo-store

Repository files navigation

Coderland Photo Store

This is a React.js application that is part of an interactive Knative and serverless tutorial called the Compile Driver, a ride at an imaginary theme park called Coderland. This application uses your computer camera to allow you to take a snapshot. The snapshot is then sent to a service that overlays the photo, and the result is sent back to this application and displayed.

To run this demo, you'll need to point it to a service that accepts a JPEG picture as a base64 string in a JSON document and returns a base64 string (for the updated image) in a JSON document.

image-overlay is the service that is used with this application. It is run as a Knative service in OpenShift.

ENVIRONMENT VARIABLES

  • You must set the REACT_APP_OVERLAY_URL environment variable to point to the service that does the image overlay.
  • You must set the REACT_APP_OVERLAY_MESSAGE environment variable. This is the message that appears on the photo, e.g. "Hello from Coderland!"

There are options for running this program:

  1. Run it from the command line
    • npm install
    • REACT_APP_OVERLAY_URL=http://myservice-myproject.mydomain.com REACT_APP_OVERLAY_MESSAGE='Hello from Coderland!' npm start
  2. Run it in a Linux container
    • docker build -t coderland .
    • docker run -p 3000:3000 -e REACT_APP_OVERLAY_URL http://myservice-myprojecct.mydomain.com -e REACT_APP_OVERLAY_MESSAGE 'Hello from Coderland!' coderland
    • Open browser to localhost:3000
  3. Run it in OpenShift

IMPORTANT LINKS

📓 Knative Tutorial Docs

🎁 Knative Tutorial repo

Part 1: Introduction to Serverless with Knative

📄 ARTICLE: Part 1: Introduction to Serverless with Knative

🎬 VIDEO: Part 1: Introduction to Serverless with Knative

🎁 REPO: Image overlay

Part 2: Building a Serverless Service

📄ARTICLE: Part 2: Building a Serverless Service

🎬 VIDEO: Part 2: Building a Serverless Service

🎁 REPO: Photo store

Part 3: Deploying a Serverless Service to Knative

📄ARTICLE: Part 3: Deploying a Serverless Service to Knative

🎬 VIDEO: Part 3: Deploying a Serverless Service to Knative

🎁 REPO: Knative proxy


Coderland 🎢🚀🎡 is a place for learning. Developer Training and Red Hat Software: Red Hat Developer.

About

React.js code that takes a photo, calls a service to overlay the photo, and displays the results. Part of the Coderland series.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •