PhotoStore App

Introduction

This tutorial will help you build a React web application called PhotoStore App. This application will essentially allow you to upload and download images from your client. It will also feature the following functionalities:

• All login functionalities.
• You will also be able to view the uploaded images in different views like thumbnail, list and full-size.
• You will be able to adjust your dashboard view in a Grid or List view.
• You will be able to share your uploaded images with other users that have signed on to the application.
• There will be two dashboards presented to you:
  • Your Gallery: To showcase images uploaded by you.
  • Shared Gallery: To showcase images that were shared to you by other registered users.
• You will also have the option to manage users’ access to the images you had previously shared with them.

The client side of the application will look like this:

The logic of this application is coded employing the following Catalyst services and its respective components:

1. Catalyst Serverless:

   • AppSail: You will be bundling the front end and client code together and deploying it on AppSail, to host the entire application.

2. Catalyst CloudScale:

   • Authentication: To add end users to the application. You will be implementing the Hosted Authentication type to handle the authentication requirement.
   • Data Store: To store the various details of the images that are present in the application.
   • ZCQL: To post and fetch data from the Data Store.
   • Stratus: To store the images that are being uploaded through the application.

3. Catalyst Pipelines: To maintain the entire project seamlessly in your GitHub repository without ever missing a development lifecycle. More importantly, using Pipelines to deploy this Catalyst application allows us to use the Sharp, a platform dependent package, to convert uploaded images to thumbnails. In this manner, Pipelines handles all the dependencies needed to use the package and host it on Catalyst which runs on a Linux machine.

You will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application.

Application Workflow

The workflow of the application occurs as described below:

• An end-user signs up for the application.
• They can either view, download, or upload images in the client.
• If they choose to view the images, by default, the images will be displayed in the thumbnail-view. The details populated to provide more context for the images are handled in the DataStore.
• When a user uploads an image from the client, the image is uploaded to Stratus, and the image will be referred using its Object URL.
• The newly uploaded image will be displayed in a thumbnail size, along with its name, which can be viewed in full-size when a user clicks on it.
• Additionally, any change you make to your application development cycle will be automatically rendered to your application present in your GitHub repository with the help of Catalyst Pipelines.