MagPies - An Image sharing app built using Rasengan.js and Netlify CDN Image.
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-12 20:54:29

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


## What I Built

I develop a web application similar to [Pinterest](https://pinterest.fr) or [Pexels](https://www.pexels.com) that I decided to called **MagPies**. In this application everyone can explore or browse images, download them in different format *(PNG, JPG, WEBP, AVIF)*, and only the authenticated user can share their photos into the platform. 😍 

Based on the challenge requirements, I used the **Netlify CDN Image** in order to apply some operations on images like: 

- Resizing the image (width and height)
- Changing the quality
- Changing the image fit value (cover, fill and contain)
- Downloading into different format of image.

All these features are nicely implemented using [Rasengan.js](https://rasengan.dev) my own REACT FRAMEWORK 😁😁 and Tailwind CSS for styling.

## Demo
Link of the app: [magpies.dilane3.com](https://magpies.dilane3.com)

Demo video: [Video](https://drive.google.com/file/d/1OuzTZ1yXiL9SVk70AGba5V75Pq0nnyYV/view?usp=sharing)

Some screenshots:

- Home

![Home section 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wajx7bk2rqe90bvgmvb.png)


![Slider of images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qqnehprvuyymfi5vqx9.png)

- Gallery 

![Gallery of images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4f1slqaziukmg23argz.png)

![Search bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/000072lwm64kq69qsmzs.png)

- Create photo

![Create photo form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zehfqupgsrtvhvumtlk8.png)

- Profile

![Profile section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlzqt1a0c1vt336hn4d3.png)

- Image Preview and transformation

![Image preview and transformation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnunh6svns93tvv3sjbh.png)


## Platform Primitives

To use the Image CDN, I decided to create another simple app using just and html file and hosted it on netlify. As all the websites hosted on netlify benefit from the **/.netlify/images** edge function to apply all the available transformation on images, I decided to use the website as an API.

Here is the code snippet that I write to integrate the Image CDN into my application.

![Code snippet of the CDN Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl44162qvtp39c78uwam.png)

I started working on the Netlify Blobs in order to save for example:

- Recent search query of users
- Photo saved by the user

But I didn't have time to finish it, that because I was dealing during the 4 first days into the integration of my React framework and Netlify in order to host any web application built with Rasengan.js to Netlify... And after 4 days, I find a way by creating a serverless function that respond to any incoming request, this because Rasengan.js is based on a SSR logic.

I'm so glad to having participated to this challenge, it was very nice. I got an opportunity to enhance my React Framework to support Netlify, I learn about how to integrate Netlify Image CDN into apps... sooo good. Thanks a lot.

I hope, what I did will impress you.