AstroViews is a captivating application that showcases the wonders of the universe. Built with React.js, this app fetches and displays the Astronomy Picture of the Day from NASA's APOD API, along with the title and detailed information about the image. It's an engaging way to explore space through stunning photographs and educational descriptions.
- 🖼️ Astronomy Picture of the Day: Automatically fetches and displays NASA's Astronomy Picture of the Day.
- 📛 Picture Title: Displays the title of the picture to provide context.
- 📖 Detailed Information: Shows a detailed description of the image, offering educational insights and background.
- 🔄 Daily Updates: The app updates daily to show the latest APOD.
- 📅 Date Selection: Allows users to select a specific date to view the APOD for that day.
- 🌠 High-Quality Images: Presents high-quality images that can be enlarged for a better view.
- 📂 Download Options: Users can download images as JPEG files and information as text files.
- ⚛️ React.js: The core framework used for building the application, ensuring a dynamic and responsive user experience.
- 🎨 CSS: For styling the application, providing a visually appealing interface.
- 🌐 NASA APOD API: The source of the Astronomy Picture of the Day, including its title and detailed information.
- View Today’s APOD: Open the app to see today’s Astronomy Picture of the Day along with its title and description.
- Read Detailed Information: Click on the about to read more about the picture, including scientific and historical context.
- Download The Images and Information: Click on the download to download the images or information on text file.
- Clone the Repository:
git clone https://github.com/ranulgamage/AstroViews-NASA-Astronomy-Picture-of-the-Day-Web-Application - Navigate to the Directory:
cd React-NASA-WebApp - Install Dependencies:
npm install,npm install react-loading - Run the Application:
npm run dev
The application will be available at http://localhost:5173.
- App.js: The main component that contains the structure of the app.
- APOD.js: A component that fetches and displays the Astronomy Picture of the Day.
- DateSelector.js: A component for selecting a specific date to view the APOD.
- APODDetails.js: A component that shows the detailed information about the selected picture.
- App.css: The stylesheet for the application, ensuring a cohesive and appealing design.
- 🔍 Search Functionality: Add the ability to search for APODs by keywords.
- 📅 Calendar View: Provide a calendar view to quickly navigate and select different dates.
- 💬 User Comments: Enable users to leave comments and discuss the pictures.
- 📈 Statistics: Display interesting statistics about the APODs, such as the most viewed or liked pictures.