Upload images. Then, there will be a Masonry gallery website!
A friend who has a Shopify website wanted to have a photo gallery function to display some of her works.
Admin button is at the bottom right corner of the app.
ID: test@test.com
PW: testtest
Create a clean UI masonry gallery that can be managed easily.
- Gather requirements.
- Brainstorm design, build process, and other app features.
- Choose tools.
- Make, test and present.
- Change based on the feedback. Back and forth a few times.
- Check responsive.
| Problems | Solution / Learning Outcome |
|---|---|
| What tool to use storing images? | Google drive came up in my head first, then Imgur and other storage websites. I could use those, however, it was not easy and user-friendly to save and retrieve images from free cloud services. After long hours of research, trial and fail, I found Firebase! |
| Masonry… but with what and how? | Should I use Grid? Or Flex? Set specific height on nth pictures? But each image should keep its ratio. I decided to use the grid for practice and display it in left to right order while keeping each image’s ratio. It was not as easy as I was expecting. Actually, I struggled and I think I made it too complicated, but this is the solution I came up with at that time. One grid div that has a maximum 4 column (280px) with 1px of many rows. Calculate image width and height during upload and give appropriate span. This way we can keep its ratio. |
| Restrict admin page. | Learned private routing. It was an interesting concept. I would like to dive more into authentication and authorization. |
Structuring data flow. Should I have one collection contains image data and image orders? Or two separate collections? |
This took quite a long time to structure and implement. I could not decide where and how to start. The good thing was I did not have to make CRUD API, but setting up firebase and learning syntax took some time. Instead of having an image order array in one document with image data, I made two separate collections because it was easy to manipulate and visualize. Data flow. - When uploading, add images to the Storage. Once images are saved in the Storage, get the URL and create an object that contains other metadata. Third, update image order. - When deleting, instead of deleting by indexes in the Firestore, make state changes then upload the state. |
| Let’s use a library next time. Drag and Drop function on mobile does not work. | I wanted to build everything from scratch, so I used HTML drag and drop API. It felt really good after many obstacles. However, I found that it does not work on mobile! There were many things to consider drag and drop functions to work in mobile. Using lots of libraries is not good, but sometimes it is necessary. |
Poor CSS structuring. I got lost after I came back weeks later... |
Learn BEM, SMACSS, OOCSS. Read articles, but I need to practice more. |
| Lazy loading. | Rendering videos and images are heavy work. Painting multiple contents at once will increase blocking time which means bad site performance. One solution is lazy loading. Instead of loading everything at once, download sections or contents that only what the user needs. Use loading=”lazy” with inline width and height. After defining the width on the line, lazy loading started to work. |