Srikant Sahoo

Posted on May 12

Albums | Apple Vision👓 Concept App using Netlify's Blobs & Next JS

#netlifychallenge #devchallenge #webdev #javascript

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

Demo

This project showcases three key features of Netlify, each feature is specifically demonstrated through a different application that I made:

Link to Demo -

apple-vision-concept-dynamic-site.netlify.app

Home page screenshot

Link to all my submissions

Memories App Concept -

Memories | Apple Vision👓 Concept App using Netlify's Image CDN & Next JS

Srikant Sahoo ・ May 12

#netlifychallenge #devchallenge #webdev #javascript
Albums App Concept - This article
Discover App Concept -

Discover | Apple Vision👓 Concept App using Netlify's Cache revalidation & Next JS SSR

Srikant Sahoo ・ May 12

#netlifychallenge #devchallenge #webdev #javascript

What I Built | Concept/Ideation

Hey👋, I'm Srikant Sahoo. I'm excited to present this project for the Netlify Dynamic Site Challenge. This project is a cutting-edge concept user interface designed for virtual reality devices, taking inspiration from futuristic concepts like Apple Vision👓 to showcase how Netlify's capabilities can be leveraged to create such applications in future for VR use cases.

Side note for your reference - More info on Apple Vision Pro

Apple announces more than 600 new apps built for Apple Vision Pro - Apple

Apple today announced incredible new apps that will be available on Apple Vision Pro beginning Friday, February 2.

apple.com

Why I built this Apple Vision Concept?

The major question that I had was...

How can I use all the 3 themes in one project🤔?

Even though I had this question, I still started with creating a Image Gallery using Image CDN. But then later on during development I figured out that I can instead convert it into a small virtual app called Memories App instead of Gallery App or Photos App, and similarly create more virtual apps for the other 2 prompts.

All Photos view

So, the first thing that came into my mind was to create a mock concept environment for Apple Vision Pro👓 where users can see and interact with the 3 apps while being sitting at the couch. Thats how I proceeded and build the UX and then eventually developed it.

Three apps navigation

Platform Primitives

Below are the details on how I leveraged the Netlify Image CDN, Netlify Blobs storage and Netlify's Cache Revalidation in three different virtual apps.

1. Albums App

This app utilizes Netlify's Blobs storage to store your albums and its contents. Once you land on the page, you are automatically assigned a unique username (kind of a mock authentication).

I have written a clever and complex logic to handle the albums data in blobs. You can also see other users' albums from the Other's Albums tab.

Challenges Faced while developing this `Albums` App

I faced a lot of challenges while implementing this.
Initially the blobs were only working in the netlify dev env and was not working when I was deploying it (which was making it harder to debug). It bugged me for days, I needed to go through all the related documentation to understand and fix it.

But spending 1-2 days on consistent bug fixing and observing the patterns, I finally figured out the way to work with blobs.

I also faced challenges on the below

Implementation of expiration logic of blobs to free up space.
How to tackle multiple users updating the same blob
How to refresh the UI between the Memories and Albums App when anything is updated.
How to setup and use the blobs without using edge functions and instead use the Netlify APIs directly using the use server.
And as mentioned above on deployment part

2. Memories App

This app leverages Netlify's Image CDN capability to display photos in responsive way. You can toggle the below tabs to filter images by date category and see images in different sizes.

Days view

It queries the Image CDN to render the most optimized version for quick loading of the images in an animated way. You can click any photo to see in good resolution.

Fetches the most optimized image using queries like &w=64&q=75

UI on clicking any image

The Netlify's blob storage is used in the Add photos to Albums button. It stores the opened photo to one of your Album (More on this below)

3. Discover App

This app uses Netlify's Cache Revalidation feature to fetch the latest articles from the web (Wikipedia Random API) using Server-Side Rendering technique of Next JS). It highlights how Netlify's Cache Revalidation can ensure users always have access to the most recent information on demand.

Below code -> uses the Next cache headers and tagName to revalidate the cache

I was new to Next JS SSR, so I was initially facing difficulties with the SSR logic, but figured out how to tackle it to render the UI having the wiki article.

Disclaimer

Please note that this project is not associated with any organization and is purely a result of my passion and 💘 for technology and innovation, which I have done both the UX design and developed it in the last 5-6 days.

All the assets, graphics, and icons used in this project have been duly referenced in the project itself for transparency, and you can find the sources in the References section of the project. This project is a testament to my commitment to ethical practices in software development.

This project is a hobby endeavor that I'm proud of, and I hope it helps you to understand the potential of Netlify's capabilities.

It took me more than 5 days to build this. Would really appreciate if you liked it and can like this post (🦄,💘). It will motivate me to create more such kind of creative applications and use Netlify in my future projects😄.

Thank you