DEV Community

Cover image for Netlify Dynamic Site Challenge: Building a Mars Mission Photo Web App
Patrick Monteiro
Patrick Monteiro

Posted on • Updated on

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

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

Quasar Nasa Photos

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.

Quasar Nasa Photos in Mobile

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)

Collapse
 
michaeltharrington profile image
Michael Tharrington

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

Collapse
 
philiphow profile image
Philip How

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

Collapse
 
patrickmonteiro profile image
Patrick Monteiro

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

Collapse
 
patrickmonteiro profile image
Patrick Monteiro
Collapse
 
patrickmonteiro profile image
Patrick Monteiro

Oops, I'll check, as they are older missions.

Collapse
 
biancassilva profile image
Bianca

THE BEST

Collapse
 
iagocavalcante profile image
Iago Angelim Costa Cavalcante

Awesome content as always

Collapse
 
renatosiqueira profile image
Renato Siqueira

Excellent article! Thank u for sharing.

Collapse
 
lubien profile image
Lubien

Amazing

Collapse
 
jeffmonteiroo profile image
Jefferson Monteiro

good job

Collapse
 
rafaelsilvar22 profile image
Rafael

Muito bom!!

Collapse
 
patrickmonteiro profile image
Patrick Monteiro

thanks!

Collapse
 
waldenermonteiro profile image
Waldener Monteiro

Fantastic

Collapse
 
hectorgrecco profile image
Hector Grecco

Excellent!!

Collapse
 
patrickmonteiro profile image
Patrick Monteiro

thanks!