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

That sounds like a fun challenge! Let's break it down into steps:

Set Up Your Development Environment: Make sure you have Node.js and npm installed on your system. You'll also need a code editor like Visual Studio Code.
Create a New Project: Initialize a new project using npm or yarn. You can use npm init or yarn init to create a new package.json file.
Install Dependencies: You'll need to install necessary dependencies like Express.js for your backend and any frontend libraries like React or Vue.js if you plan to use them.
Set Up Netlify: Sign up for a Netlify account if you haven't already. Create a new site from your Git repository.
Fetch Mars Photos: You can use the NASA API to fetch photos taken by various Mars rovers. Check out the Mars Rover Photos API documentation to see how to make requests.
Build Your Frontend: Design a simple front end interface where users can view and interact with the Mars photos. You can use HTML, CSS, and JavaScript for this.
Display Photos Dynamically: Use JavaScript to fetch photos from the NASA API and display them on your website. You can use tools like Axios for making HTTP requests.
Deploy Your Site to Netlify: Once your site is ready, deploy it to Netlify. Netlify makes it easy to deploy static sites and also offers serverless functions if you need backend functionality.
Test Your Site: Make sure everything is working as expected by testing your site on different devices and browsers.
Add Extra Features: If you have time, consider adding extra features like search functionality, filters for viewing photos from different rovers or sols (Martian days), or a photo of the day feature.

Good luck with my Mars mission photo web app!

Sure, here's a simplified example of how you might implement a basic Mars mission photo web app using JavaScript and Express.js for the backend. For simplicity, I'll skip setting up Netlify and focus on the code to fetch photos from the NASA API and display them on the front end.

First, make sure you have Node.js and npm installed. Then, create a new directory for your project and initialize a new Node.js project:

bash

mkdir mars-photo-app
cd mars-photo-app
npm init -y
Next, install Express.js and Axios:

bash

npm install express Axios
Now, create an index.js file for your backend:

javascript

// index.js

const express = require('express');
const axios = require('axios');

const app = express();
const PORT = process.env.PORT || 3000;

// Endpoint to fetch Mars photos
app.get('/mars-photos', async (req, res) => {
try {
const apiKey = 'YOUR_NASA_API_KEY'; // Replace this with your NASA API key
const sol = req.query.sol || 1000; // Default to sol 1000 if not provided
const rover = req.query.rover || 'curiosity'; // Default to Curiosity rover if not provided
const url = https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${sol}&api_key=${apiKey};

const response = await Axios.get(url);
const photos = response. data.photos;

res.json(photos);

} catch (error) {
console.error('Error fetching Mars photos:', error.message);
res.status(500).json({ error: 'Failed to fetch Mars photos' });
}
});

app.listen(PORT, () => {
console.log(Server is running on http://localhost:${PORT});
});
Replace 'YOUR_NASA_API_KEY' with your actual NASA API key.

Now, let's create a simple HTML file for the frontend:

HTML

<!DOCTYPE html>

Mars Photo App

<br> async function fetchMarsPhotos() {<br> try {<br> const response = await axios.get('/mars-photos');<br> const photos = response.data;</p> <div class="highlight"><pre class="highlight plaintext"><code> const photosContainer = document.getElementById('photos'); photosContainer.innerHTML = ''; photos.forEach(photo => { const img = document.createElement('img'); img.src = photo.img_src; img.alt = 'Mars Photo'; photosContainer.appendChild(img); }); } catch (error) { console.error('Error fetching Mars photos:', error.message); } } fetchMarsPhotos(); </code></pre></div> <p>

This HTML file fetches Mars photos from the /mars-photos endpoint of our backend and displays them on the webpage.

Finally, start your server:

bash

node index.js
Now, if you open your browser and navigate to http://localhost:3000, you should see Mars photos displayed on the webpage.

Blog

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

Robina

Mars Photo App

Join Our Newsletter. No Spam, Only the good stuff.

Related