Cloud Image Gallery

A schema-driven image gallery built with React, GraphQL, and AWS.

📌 Features

• Dynamic Schema-Driven UI – Easily modify layout & actions via JSON schema.
• GraphQL API – Optimized image queries and mutations.
• AWS Cloud Integration – S3 for image storage, DynamoDB for metadata, EC2 for backend.

Live Version

You can access the live version of the gallery hosted on AWS at the following URL: Cloud Image Gallery

Run Locally (Development setup)

Prerequisites Node.js, Yarn

Backend

1. Clone the repo and navigate to server/
2. Install dependencies:

yarn install

3. Start the server:

yarn start

4. Test GraphQL Api at:

http://localhost:4000/graphql

Frontend

1. Navigate to client/
2. Install dependencies:

yarn install

3. Start the frontend:

yarn dev

4. Open http://localhost:5173 in the browser.

Cloud Deployment (AWS)

The application is deployed on AWS using S3, EC2, DynamoDB, and CloudFront.

CI/CD Pipeline

GitHub Actions triggers deploy on every push to main:

• Frontend → Uploaded to S3 + CloudFront cache invalidation.
• Backend → Deployed to EC2 via SSH.

Understanding the Schema-Driven UI

The UI structure is controlled by schema.json, which defines how images are displayed and interacted with.

{
    "layout": {
      "type": "grid",
      "spacing": 4,
      "columns": 3
    },
    "actions": [
      {
        "name": "Like",
        "icon": "Favorite",
        "action": "toggleLike",
        "color": "error"
      },
      {
        "name": "Feature",
        "icon": "Star",
        "action": "toggleFeature",
        "color": "warning"
      },
      {
        "name": "Delete",
        "icon": "Delete",
        "action": "deleteImage",
        "color": "default"
      }
    ]
  }
  

Modifying schema.json changes UI layout & behavior without altering code!

GraphQL and mutations

The GraphQL API enables interaction with the gallery by retrieving image metadata from DynamoDB and updating the stored information.

Queries

query GetImages {
  schema {
    layout {
      type
      spacing
    }
    actions {
      name
      icon
      action
      color
    }
  }
  images {
    id
    src
    alt
    likes
    isFeatured
  }
}

Mutations

mutation AddLike($id: ID!) {
  addLike(id: $id) {
    id
    likes
  }
}

mutation RemoveLike($id: ID!) {
  removeLike(id: $id) {
    id
    likes
  }
}

mutation DeleteImage($id: ID!) {
  deleteImage(id: $id)
}

mutation MarkFeatured($id: ID!) {
  markFeatured(id: $id) {
    id
    isFeatured
  }
}

All mutations update the DynamoDB table, ensuring the metadata remains consistent across sessions.