Photo Gallery Service

I've taken an app to render a photo gallery for a website's item listing page and performed a database migration from MongoDB to Cassandra. Firstly, I benchmarked both PostgreSQL and Cassandra performances, moving forward with the NoSQL database due to query times and easier horizontal scalability. I redesigned the schema and created API routes for new queries, as well as simulating production levels of data and achieving a final throughput of 1000 requests per second.

API routes

USE

/rooms/:id

Serves up static files.

GET

/api/rooms/:id/photos

Renders photos of a specific listing.

Returns an array containing JSON objects with data of the form:

[
  {
    photoId: Num,
    listingId: Num,
    photoUrl: String,
    photoDescription: String
  },
    .
    .
    .
  {
    photoId: Num,
    listingId: Num,
    photoUrl: String,
    photoDescription: String
  }
];

POST

/api/rooms/:id/save

Route saves specific listing to the database.

Saves a JSON object to the database in the form:

{
  userId: Num,
  listingId: Num
  username: String,
  firstName: String,
  lastName: String
}

DELETE

/api/rooms/:id/save

Remove a saved listing to be unsaved.

UPDATE

/api/rooms/:id/photos/:id/description

Updates a description of a photo, but only for a user who owns the listing.

Development

Installing Dependencies

From within the root directory:

npm install -g webpack
npm install

Features

Features include:

A preview of the first few photos in the set
- arranged in a grid
- with an on-hover effect that zooms into the photo, and darkens all other photos
- clicking on a photo brings the user to that point in the carousel
- clicking on the 'View Photos' button brings the user to the first photo in the carousel
- clicking the 'Share' button renders a modal that covers the rest of the page, clicking on the 'X' closes it
- clicking the 'Save' button toggles between a saved (filled heart) and unsaved (empty heart) state
A carousel to navigate through the photos
- clicking on either side of the photo, or the arrow buttons, navigates the user in a loop forwards/backwards through the set
- clicking the 'X' button closes the carousel and re-renders the preview
- a description and order number are displayed at the bottom of the photo
- a 'scrollbar' shows thumbnails (that highlight on hover) of photos in the set, and the user can click on one to navigate directly to that photo