Brought to you by NASA's image API.
- Fetch data from one of NASA’s APIs and display the resulting images.
- Display descriptive data for each image (for example: title, date, description, etc.)
- Like an image
- Unlike an image
- Save likes if the user leaves or reloads the page
- Animate the “like” action (might we suggest a heart?)
- Add a loading state while we wait for NASA’s API to return data
I learned and practice more about HTML
, CSS
, JS
, TypeScript
, React.js
, and React Hooks
.
Clone the project
git clone https://github.com/alxmcr/spacestagram-react
Go to the project directory
cd spacestagram-react
Install dependencies
npm install
Start the server
npm run start
To run this project, you will need to add the following environment variables to your .env
file
VITE_NASA_API_KEY
You should put as value the API KEY that you got from NASA's API.
VITE_NASA_API_BASE_URL_APOD
Astronomy Picture of the Day Calendar.
Value: https://api.nasa.gov/planetary/apod
.
VITE_NASA_API_BASE_URL_IMAGES
NASA Image and Video Library.
Value: https://images-api.nasa.gov
.
VITE_NASA_API_RESOURCE_SEARCH
Images Search resource - NASA Image and Video Library
Value: search
.
VITE_NASA_API_RESOURCE_ASSET
Asset resource - NASA Image and Video Library
Value: asset
.
Also we need to add them in global.d.ts
(only vite):
interface ImportMetaEnv {
VITE_NASA_API_KEY: string;
VITE_NASA_API_BASE_URL_APOD: string;
VITE_NASA_API_BASE_URL_IMAGES: string;
VITE_NASA_API_RESOURCE_SEARCH: string;
VITE_NASA_API_RESOURCE_ASSET: string;
}
HTML
, CSS
, JavaScript
, TypeScript
, and React.js
.
Image without like
Image with like
https://the-spacestagram-app.netlify.app/
If you have any feedback, please reach out to me at amcocarojas@gmail.com.