Welcome to the NASA APOD Viewer repository! This project is a ReactJS application that fetches and displays NASA's Astronomy Picture of the Day (APOD) using NASA's API. It leverages modern React hooks such as useState and useEffect, utilizes the Fetch API for data retrieval, and is styled with Tailwind CSS for a sleek, responsive design. The application also features a sidebar that appears when you click the info button, providing additional information about the APOD.
Features
- Fetch NASA's APOD: Retrieves and displays the Astronomy Picture of the Day using NASA's API.
- React Hooks: Utilizes useState for state management and useEffect for fetching data on component mount.
- Fetch API: Uses the Fetch API to make asynchronous requests to NASA's APOD API.
- Responsive Design: Styled with Tailwind CSS for a modern and responsive user interface.
- Sidebar: A sidebar with additional information that appears when the info button is clicked.
Technologies Used
- ReactJS: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Fetch API: Modern JavaScript API for making network requests.
- NASA's APOD API: An API provided by NASA to fetch the Astronomy Picture of the Day.
Getting Started
To get a copy of the project up and running on your local machine, follow these simple steps.
Clone the repository:
git clone https://github.com/your-username/nasa-apod-project.git
Navigate to the project directory:
cd nasa-apod-project
Install the dependencies:
npm install
Start the development server:
npm run dev
Usage
- Open the application in your web browser.
- The Astronomy Picture of the Day will be fetched and displayed.
- Click the info button to toggle the sidebar and view additional information about the APOD.
Screenshots
