Schemetastic Renders - Free 3D renders for your next project

#netlifychallenge #devchallenge #webdev #javascript

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

A web app that allows you to download 3D renders that you can use for free in your projects. You can download them in .png, .webp and .avif in various image qualities and sizes.

Important note: I tried to pay a lot of attention to user accessibility for this project, At the last section of this article I'll talk about it in detail (since this very often is not seen with such an ease).

Demo

✨ Link to Schemetastic Renders ✨

The renders app page:

✨ Try this by yourself!

Home page:

Platform Primitives

The whole website relies heavily on the Netlify image CDN, keeping in mind that all the downloadable render images (90 images) are in .png format at full scale, for example:

In the renders page, all gallery images are loaded dynamically with the Netlify CDN, this helps to get smaller thumbnails in .webp format which saves a lot of bandwidth and resources. Also the preview image is changed dynamically with quality compression in .webp format in a smaller size.

Also, the generated downloads are fetched with a request to the Netlify Image CDN based on the user preferences.

The gallery in the home page that showcase the designs also uses the Netlify Image CDN, each gallery item contains 2 images (one without color and another with color) depending on the device viewport and the layout, some images are loaded in a smaller size. This was achieved storing the /.netlify/images?url data with its queries in CSS variables and changing the background-image values with media queries.

Implementation of Blobs for analytics

I implemented blobs with Netlify edge functions to keep track of how many times each design is downloaded.

Each design has its own key, and it stores as its main value the amount of times that has been downloaded. This value is retrieved every time you access to a specific design page, you can see there how many times that design has been downloaded. But also, as its metadata it stores in which format, quality and size type the image was downloaded, this data is only retrieved in the analytics page, that you can access here:

✨ Downloads Analytics Page ✨

Accessibility

I paid a lot of attention to this, so I'm dedicating a section to it, to explain briefly which accessibility features it has.

You can navigate using your keyboard

Buttons and interactive elements has styles on focus, and you can press them with the enter key.

Lots of alt attributes on 90+ images

Variants has their own alt text, and thumbnail images alt text is also prefixed with “thumbnail of”

ARIA attributes

About the creation of the renders

All images were created using AI, and I manually added color to them, this was one of the most intensive labors of the whole web app, here are just a few samples of the involved work:

If you came all the way down here, and you like the things I build,hey! Why don't we connect here in DEV, or Twitter, Instagram, I do also use Product Hunt. Do you wanna talk? Do you need help in the front-end? Would you like to know what amazing things I will build or what will happen to this project? I'm very friendly, (almost all the time), I promise 😉

BTW, I will add more renders to the project very soon! Stay tuned!

Top comments (10)

Schemetastic (Rodrigo) • May 13

I'm so tired, now I can RIP... but not in death, I mean, jus resting because I achieved this in like 7-8 days I think... I started the past Sunday if I remember correctly.

Hope you enjoy 😉