Technology
Backend
- The backend runs on Node.js and Express.
- Cloudinary (free tier) is used for image storage.
- Images are uploaded using the signed-uploads method of the Cloudinary upload widget.
- Image transformations are performed using the Cloudinary SDK for Node.js direct URL building helper method.
- The database for all image and album data is hosted on MongoDB Atlas (free tier). The database serves as the single point of truth.
Frontend
- The frontend uses vanilla JavaScript, EJS Embedded JavaScript Templating, and Bootstrap.
- The Masonry layout in the view album page is achieved using Desandro Masonry inside Bootstrap.
- The live rearranging of images in the masonry layout while resizing the browser window is achieved using Desandro imagesLoaded.
- Text animations (annotations) in the landing page are achieved using Rough Notation.
- Images are auto-resized and delivered in the image-auto format based on the client’s device and screen size.
- The image carousel uses the Cloudinary Product Gallery widget.
Deployment
The app is hosted on AWS using Elastic Beanstalk on a custom domain with SSL.
Components
The app has four main components. Please refer to the Features section for visuals of the app.
- Welcome page: Only shown when no albums exist.
- NavBar Menu: Visible on all pages.
- Landing Page: Shows cards of existing albums.
- View Album Page: Shows images inside the album in a masonry layout (resize the window to see the magic).
Please refer to the Features section for visuals of the app.
Welcome Page
This is the first page that shows when the app is opened. It contains a short description of the app and an action prompt button to create the first album.
:::[tip Did you know?]
After an album is created, this page is not shown again. You can use the View Welcome Page link in the footer to go to this page.
:::
Navbar
The navbar menu is the heart of this app. Almost all actions can be performed here.
| Action | NavBar Menu (all pages) | Landing Page Cards | View Album Page |
|---|---|---|---|
| List of albums | x | x | |
| Count of images inside album | x | x | |
| Click album name to view album | x | x | |
| Create new album | x | ||
| Upload image(s) | x | ||
| Delete album | x | ||
| Delete image | x | ||
| User-set album cover image | x |
Landing Page
- If no albums exist, the ‘welcome page’ is shown instead.
- The landing page shows existing albums displayed as cards.
- The album cards show the album cover image, the name of the album, and the count of images inside the album.
- Each card is clickable to go to the particular view album page.
- The album name is overlaid using Cloudinary text transformation.
- The count of images inside the album is overlaid using EJS and CSS.
- The cover image is, by default, the first image uploaded to the album. The user can change this by clicking the radio button on the image in the view album page.
View Album Page
- Shows all images inside the album in a beautiful masonry layout (resize the window to see the magic).
- Each image has a radio button to set it as the album cover image.
- Each image has a button to delete it.
- Each image is clickable to open the full-size image.
- Each image has a caption overlaid using Cloudinary text transformation.
Lightbox Page
- Shows a carousel of the images inside the album using the Cloudinary Product Gallery widget.
Process Flows
:::[tip Finished is better than perfect] The unreadable, low-quality images below will soon be replaced with high-quality images. :::
Create New Album
Image Upload Widget
Image uploads can be triggered in two ways:
- During the ‘Create new album’ process.
- By clicking on the ‘add images’ icon on an existing album.
1. Image Upload from Create New Album
The flow below is started immediately after creating a new album, i.e., it is the last part of the create new album process. Signature options are prepared in advance and then wait for the user to click ‘Add Images To Album xyz’ to open the widget. No delay is experienced when opening the widget. Signature pre-loading is possible because we already know the album name at this point.
2. Image Upload for Existing Album
In the flow below, there is a noticeable delay before the widget opens. This is because the signature options are not prepared in advance. Currently, we cannot pre-load the signature because the folder name must be known in advance. In this flow, we only know the album name when the user clicks on it.
Set Cover Image
By default, the first image uploaded to an album is set as the album cover image. The user can change this by clicking the radio button on the image in the view album page. The flow below shows the process.
Delete Image
Delete Album