---
title: "Introduction"
url: https://docs.catalyst.zoho.com/en/tutorials/photo-store-app/nodejs/introduction/
description: "Build a React gallery app to upload images to a bucket in Stratus, and shre these images with other registered users. Host the app on AppSail and sync with GitHub and deploy the app usiong Pipelines."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Project Directory Structure"
    url: /en/cli/v1/project-directory-structure/introduction/
  - name: "Upload Object to Bucket"
    url: /en/cloud-scale/help/stratus/objects/upload-object/
  - name: "Stratus SDK"
    url: /en/sdk/nodejs/v2/cloud-scale/stratus/overview/
  - name: "Stratus API"
    url: /en/api/code-reference/cloud-scale/stratus/get-all-buckets/#GetAllBuckets
---

# PhotoStore App

### Introduction

This tutorial will help you build a React web application called **PhotoStore App**, which will 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, such as 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:
![catalyst_tutorials_photostore_app_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_app_first_look.webp)

The logic of this application is coded employing the following Catalyst services and its respective components:
1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/en/serverless/):
   - [**AppSail**](https://docs.catalyst.zoho.com/en/serverless/help/appsail/introduction/): You will be bundling the front end and client code together and deploying it on *AppSail*, to host the entire application.

2. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/en/cloud-scale/):
    - [**Authentication**](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/introduction/): To add end users to the application. You will be implementing the [Hosted Authentication](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/) type to handle the authentication requirement.
    - [**Data Store**](https://docs.catalyst.zoho.com/en/cloud-scale/help/data-store/introduction/): To store the various details of the images that are present in the application.
    - [**ZCQL**](https://docs.catalyst.zoho.com/en/cloud-scale/help/zcql/introduction/): To post and fetch data from the *Data Store*.
    - [**Stratus**](https://docs.catalyst.zoho.com/en/cloud-scale/help/stratus/introduction/): To store the images that are being uploaded through the application.

3. [**Catalyst Pipelines**](https://docs.catalyst.zoho.com/en/pipelines/help/pipelines/introduction/): To maintain the entire project seamlessly in your [GitHub](https://github.com/) repository without ever missing a development lifecycle. More importantly, using Pipelines to deploy this Catalyst application allows us to use the [Sharp](https://www.npmjs.com/package/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](https://console.catalyst.zoho.com/) and the [Catalyst Command Line Interface](https://docs.catalyst.zoho.com/en/cli/v1/cli-command-reference/) (CLI) to build this application.

> **Note:** You will be given the code for the files to be included in the function and client components in this tutorial. You will just need to copy the provided code and paste it into the appropriate files as directed.

### 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](https://docs.catalyst.zoho.com/en/cloud-scale/help/stratus/objects/introduction/#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*.

![catalyst_tutorials_photostore_deployment_flow](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/PhotoStoreApp-AppArchitecture-updated.webp)

#### Deployment Flow

![catalyst_tutorials_photostore_app_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/PhotoStoreApp-DeploymentFlow.webp)