Night-SKY
NASA Astronomy Picture of the Day Viewer
Overview
This responsive web application allows users to explore NASA's Astronomy Picture of the Day (APOD) by entering a non-future date. The app retrieves and displays the image, title, date, and explanation using NASA's APOD API. Users can view a high-definition version of the image, save their favorite pictures to local storage, and manage their saved collection.
Tools
-
Figma
-
Visual Studio Code
HTML, CSS, JavaScript: Core structure, styling, and functionality. -
Fetch API: For making API requests asynchronously.
-
Bootstrap: For responsive design and styling.
-
Local Storage: To persist user favorites across sessions.
 Image by Nathan Anderson |  Image by Gary Scott |
|---|---|
 Image by NASA |  Image by History in HD |
 Image by nate rayfield |  Image by Casey Horner |
 Image by Tyler van der Hoeven |  Image by Diego PH |
 Image by SpaceX |  Image by Marcelo Quinan |
 Image by Doug Walters |  Image by Matt Nelson |
 Image by NASA |  Image by Ian Parker |
 Space |
Design Process: Figma
The design process began with identifying the core functionalities of the APOD Viewer, focusing on usability and a visually engaging experience. Using Figma, I created high-fidelity mockups that emphasize clarity and intuitive navigation.
​
Key design choices included:
A space-themed background to immerse users in the app's subject matter. Clean typography is used to present critical information, such as the image title, date, and explanation. A responsive grid layout for the saved gallery, ensuring scalability across devices. Contrasting buttons and inputs for easy interaction with the form and saved images.
​
The design reflects a balance between aesthetics and functionality, ensuring users can easily explore NASA's APOD while managing their favorite images seamlessly.
Goals
-
Create a seamless, interactive experience for exploring NASA's APOD.
-
Implement efficient API handling with Fetch for asynchronous data retrieval.
-
Allow users to manage their favorite APOD images intuitively.
-
The web application should be responsive.
Challenges
Developing this application came with several technical and design hurdles. Ensuring robust date validation required careful handling of user input to avoid errors and prevent future-date submissions. Creating a responsive UI involved designing layouts that adapt seamlessly across devices while maintaining visual appeal and functionality. Additionally, managing local storage presented challenges in synchronizing user actions, such as adding or deleting favorites, without refreshing the page, all while ensuring data integrity and a smooth user experience.
Takeaways
This project deepened my understanding of API integration and asynchronous programming using the Fetch API. I refined my skills in creating dynamic, user-centric interfaces that adapt to different devices through responsive design. Managing local storage for saving and deleting user favorites taught me how to handle client-side data effectively without page refreshes, ensuring a smooth and intuitive user experience. Additionally, the challenges of date validation and maintaining a consistent UI strengthened my problem-solving abilities and attention to detail.
