This is a submission for the Netlify Dynamic Site Challenge: Clever Caching
Demo
This project showcases three key features of Netlify, each feature is specifically demonstrated through a different application that I made:
Link to Demo -
Home page screenshot
Link to all my submissions
- Memories App Concept -
- Albums App Concept -
- Discover App Concept - This article
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
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 Photosview
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. 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.
2. 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
3. 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.
Daysview
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)
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
Referencessection 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
Link to all my submissions
- Memories App Concept -
- Albums App Concept -
- Discover App Concept - This article
Top comments (0)