Manenti Nasa Tonikawa

Since the last devlog, the app moved from a component-level state flow to a centralized app state using Context. This unified picture data, loading/error handling, selected date, favorites, and UI controls in one place, and the app is now wrapped with a global provider. A re-render issue was also addressed during this refactor, making the data flow more predictable.

The biggest feature additions were interaction-focused: users can now pick a specific APOD date, load a random APOD date, favorite items, and download the current image when available. Favorites are persisted in localStorage and surfaced through a dedicated drawer opened from the navbar, including a live favorites counter and quick navigation back to saved dates.

On the presentation side, the experience became more polished and informative. APODCard received animation and richer actions, and a new information panel with info cards was introduced to show metadata like media type, copyright, and HD availability. Overall, this phase focused on turning the project from a static viewer into a more interactive APOD exploration tool.

Since the last update, I moved the project further away from a simple single-screen APOD view and into a more structured interface. The biggest addition was the new APODCard component, which now renders the media, title, date, and explanation in a much more complete layout. It also handles both NASA images and videos, so the app can support whatever type of content the API returns.

I also added reusable UI pieces like Button and Container, which makes the codebase easier to scale and keeps spacing and actions consistent across the app. On top of that, Hero was simplified so it now just handles loading, error, and passing the fetched data into the card instead of containing all the presentation logic itself.

The main decision here was to split the UI into smaller components instead of growing one large hero section. That makes the project cleaner, easier to maintain, and ready for future features like date selection, richer interactions, and better content controls.

Since the last update, I moved the project from a basic APOD display into a more complete presentation layer. The main change was replacing the simple Hero output with a dedicated APODCard component that now handles both images and NASA videos, shows the title, date, and explanation, and gives the page a much stronger visual hierarchy.

I also added a reusable Button component so the action area feels consistent and easier to expand later. Along with that, I introduced a Container component to keep page spacing and width aligned across the app, which makes the layout cleaner and more maintainable as the project grows.

The biggest decision here was to organize the UI around reusable pieces instead of putting everything directly inside the Hero section. That made the code easier to read and set the project up for future features like date picking, richer interactions, and better content actions without turning the main page into a single large component.

So far, I’ve built the foundation of a React + Vite app that displays NASA’s Astronomy Picture of the Day. The project already has a custom space-themed visual identity, with a dark gradient background, branded navigation, and a simple page structure built around a main hero section.

The data flow is split cleanly between a service and a hook: nasaApi handles the request to NASA’s API, while useApod manages loading, error, and success states. The Hero component then renders the APOD title and image once the data is available, which keeps the UI logic simple and easy to extend later.

The main challenges so far have been organizing the code in a way that stays scalable and handling async API data safely from the start. I also made a deliberate decision to focus on a more intentional visual style instead of a plain starter-template look, so the app already feels like a distinct project rather than just boilerplate.