🌌 Nasa API Astro

A lightweight web app built with Astro that displays real-time astronomical data using NASA's API. Explore space imagery, asteroid information, and other cosmic data in a clean, modern interface.

Features

• Astronomy Picture of the Day (APOD)
• Near-Earth Asteroid data
• Fast, responsive Astro-powered UI
• Minimalist and mobile-friendly design

🛠 Tech Stack

Core

• Astro - Static site generator
• JavaScript - Logic and API interactions
• CSS - Styling and responsive design

Tools & Hosting

• pnpm - Package manager
• Netlify - Deployment and hosting

APIs

• NASA Open APIs - Astronomical data source

API Reference

Base URL

https://api.nasa.gov/

Authentication

All requests require an API key. Use either:

• Your NASA API key (via import.meta.env.NASA_API_KEY)
• Default demo key: DEMO_KEY (rate limited)

Endpoints Used

🌠 Astronomy Picture of the Day (APOD)

• Endpoint: /planetary/apod
• Method: GET

Query Parameters:

Parameter	Type	Description
API_KEY	string	Required. Your NASA API key
count	number	Number of APOD images to return (default: 1)
thumbs	boolean	Return thumbnail URL for videos (default: false)

Example Request:

const res = await fetch(
  `https://api.nasa.gov/planetary/apod?api_key=${API_KEY}&count=4&thumbs=true`
);
const apods = await res.json();

Response:

Returns an array of APOD objects with image/video data, titles, explanations, and dates.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

NASA_API_KEY

Run Locally

Clone the project

  git clone https://github.com/Willpower0304/Nasa_API_Astro.git

Go to the project directory

  cd Nasa_API_Astro

Install dependencies

  pnpm install

Set up environment variables

  NASA_API_KEY=your_api_key_here

Start the server

  pnpm run dev

Open your browser Navigate to http://localhost:4321 to view the application

!Important

If you want to deploy this project on Netlify install the dependencies if not just ignore this part.

Install dependencies

  pnpm add @astrojs/netlify@^6.5.9

🚀 Deployment

This project is configured for easy deployment on Netlify:

Start the server

  pnpm run build

The build output will be in the dist/ folder, ready for deployment. go to https://app.netlify.com/drop to deploy the proyect on netlify.

Documentation

Documentation

Author

• @Willpower0304

Feedback

If you have any feedback, please reach out to us at espinozaw657@gmail.com

🔗 Links