Netlify Dynamic Site Challenge: Building a Mars Mission Photo Web App

#netlifychallenge #devchallenge #webdev #javascript

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

Today technology has taken over not only our planet, but also the planets around us and the universe.
Man has been able to create technologies to explore other planets many light years from ours.
And there's nothing better than using a framework called Quasar to create a project using Netlify's powerful features.

What I Built

Using NASA's photo API, I created a gallery of images from missions to Mars with the rovers: Curiosity, Opportunity and Spirit.

Each rover has its own set of photos stored in the database, which can be queried separately. There are several possible queries that can be made against the API. Photos are organized by the sol (Martian rotation or day) on which they were taken, counting up from the rover's landing date. A photo taken on Curiosity's 1000th Martian sol exploring Mars, for example, will have a sol attribute of 1000.

And with the resources of Netlify Image CDN we can perform various transformations on images such as:

Size
Fit
Position
Quality
Format

To develop the web application, the Quasar Framework was used, a framework based on Vue.js with ready-to-use components, a powerful CLI and the possibility of exporting the application to: SPA, PWA, Mobile with Cordova and capacitor and Desktop with electron.

Demo

You can access the online demonstration through the link: https://quasar-nasa-photos.netlify.app/

Another interesting point is that you can install the app as a PWA on your device. This makes access easier.

Platform Primitives

Netlify's documentation is very smooth and intuitive. It has several examples to base yourself on and use in your application.

After choosing the Sun (accounting for the day from the rover's landing) and the rover executes a request to fetch the images from the NASA API. Using the Netlify Image CDN, we transform images, optimizing size and format, and also taking advantage of the caching feature to speed up queries.

Explanatory video

A video presenting the project and presenting the solution with Netlify Image CDN(pt-br🇧🇷):

Conclusion

I already use netlify for almost all of my personal and professional projects. Now with features such as image transformation using your CDN, I will be able to further optimize my projects.

If I manage to win the prize or the challenge, I will convert part of the money into technology books for the community I am part of in Brazil: DevsNorte

Top comments (24)

Michael Tharrington • May 7

Dang! This is freaking dope. Nicely done, Patrick!

Philip How • May 13

I couldn't get the photos from Opportunity and Spirit to work but the Curiosity photos worked great - great job!

Patrick Monteiro • May 13

I did a little analysis, and it seems that the two missions are not really working currently.
But I guarantee that it used to work, as I tested it in the past.
I'll see if I can find a way to contact them to notify them of the problem. Thanks