Schemetastic Renders - Free 3D renders for your next project
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-13 04:55:00

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast.*


## What I Built
<!-- Share an overview about your project. -->
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
<!-- Share a link to your Netlify app and include some screenshots here. -->
[✨ Link to Schemetastic Renders ✨](https://schemetastic-renders.netlify.app/)

The renders app page:
![User interface screenshot of the web app Schemetastic Renders, on the left side there is a column that shows a gallery layout with a 3D render of a developer girl with glasses and thumbnails of its variants, on the right side contains download options for that design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeu2uw5xn87j296dvnvq.png)
[✨ Try this by yourself!](https://schemetastic-renders.netlify.app/render/?design=dev-girl)

Home page:

![Screenshot of the home page of Schemetastic Renders, It shows its logo that contains the words “Renders by Schemetastic” in dark purple color and a sphere on its left size. Below there is an image of 3 renders of plants in soil with different colors and below it a button that says “Get designs”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqaq28n6o7tw25yfnaxu.png)



## Platform Primitives
<!-- Tell us how you leveraged the Netlify Image CDN. -->
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.
![A gallery of images that shows the 3D render of a plant in soil, you can see the image in large size and thumbnails of its variations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uon6d7cgamig0qgmmtxo.png)

Also, the generated downloads are fetched with a request to the Netlify Image CDN based on the user preferences.
![A list of download options for the images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/noosnipggb2jtnoro7hk.png)

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.
![A gallery of 3D renders generated with AI that shows several designs, some look in color and some look white](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00fu05s4dhitks4etwnv.png)



<!-- Did you implement additional platform primitives like Netlify Blobs or Cache Control? Tell us about that too! You may qualify for more than one prompt. -->

### Implementation of Blobs for analytics
I implemented blobs with Netlify edge functions to keep track of how many times each design is downloaded.

![A page that shows the analytics page of Schemetastic Renders, it has a label that says “Total downloads: 17” and also shows the 3D render of a cookie with download analytics data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw6lucxw7jcajla1in40.png)

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 ✨](https://schemetastic-renders.netlify.app/analytics/)


<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->


<!-- Don't forget to add a cover image (if you want). -->


---

## 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.
![An animated image that shows the screen of someone navigating through the user interface of Schemetastic Renders with its keyboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dkkstmvo253n14hjezb.gif)

### Lots of alt attributes on 90+ images
Variants has their own alt text, and thumbnail images alt text is also prefixed with “thumbnail of” 
![Samples of two 3D renders of a Developer girl with a beanie, one has a black beanie with yellow t-shirt and dark skin tone and another has pink clothes with Asian appearance, both showcase an HTML code that shows a descriptive “alt” attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auui8362w1u92k8dinpr.png)

### ARIA attributes

![Different samples of how HTML aria attributes are used in Schemetastic Renders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpuzcd8gd53qxgmrupsd.png)

---

## 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:


![An animated image of someone coloring sprinkles of a 3D render of a donut in a graphic design software, then are shown 3 examples of the same donut in different colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khu964iiugexj60xe760.gif)


![Animated image of someone using a graphic design software where it's editing the 3D render of a plant in soil, as the image advance you can see how it colors different parts of the 3D render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfs00a3klx3qaf41mks4.gif)



<!-- Thanks for participating! -->
---

**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](https://twitter.com/schemetastic), [Instagram](https://www.instagram.com/schemetastic/), I do also use [Product Hunt](https://www.producthunt.com/@schemetastic). 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!**