Fernando Dorado

NASA Explorer: Unveiling the Cosmos with React and NASA's APIs

As part of my immersive journey in the Software Engineering program at General Assembly in 2023, I had the privilege of designing and developing NASA Explorer, a captivating React app that harnesses the power of NASA's APIs. This innovative application enables users to immerse themselves in a mesmerizing collection of celestial images and videos, offering a unique window into the wonders of the universe.

General Assembly
React App
2023
NASA Explorer: Unveiling the Cosmos with React and NASA's APIs

Process

Key Features

1. Homepage: Astronomy Picture of the Day

The app's homepage showcases NASA's Astronomy Picture of the Day, allowing users to indulge in awe-inspiring visuals. To enhance the browsing experience, a convenient date picker enables users to explore images from previous dates, unlocking a rich archive of captivating astronomical moments.

2. Search: Images and Videos

With a user-friendly search bar integrated into the Images and Videos pages, users can effortlessly discover specific astronomical content of interest. The app instantly displays results, empowering users to delve deeper into the vast cosmos with ease.

3. Full-Size Multimedia

NASA Explorer offers a seamless viewing experience by allowing users to click on thumbnails, unveiling comprehensive asset details. From high-resolution images to immersive embedded videos, users can explore the beauty and grandeur of the cosmos at their fingertips.

Design and Development Process

To ensure an intuitive user experience, I crafted the app's information architecture and design assets, employing a user-centric approach throughout the development journey.

IA and Lo-Fi Wireframes

I developed a well-structured information architecture, defining the app's main navigation comprising Home, Images, Videos, and a theme toggle button for seamless transition between dark and light modes. These choices were guided by a deep understanding of user needs and preferences. You can explore the low-fidelity wireframes and information architecture below.

Hi-Fi Mockups

To bring the app's vision to life, I designed high-fidelity mockups using Figma. Drawing inspiration from the Material Theme Builder plugin, I created dynamic color palettes with light and dark modes, ensuring a visually stunning and immersive experience. Feel free to explore the high-fidelity mockups by clicking here.

Published Project

I am delighted to share that the NASA Explorer app is now available for public viewing at nasa-explorer-app.netlify.app. Take a journey through the cosmos, witness the celestial wonders, and get inspired by the breathtaking beauty of our universe.

I invite you to embark on a cosmic voyage with NASA Explorer, an app designed to ignite curiosity and foster a deeper appreciation for the vastness of our universe.

Outcome

Seamless Exploration of Astronomical Content

With the NASA Explorer app, users can effortlessly dive into a vast collection of captivating images and videos sourced from NASA's APIs. The intuitive search functionality empowers users to quickly discover specific content, while the option to view full-size images and videos provides a rich and immersive experience. By streamlining the exploration process, the app enables users to delve deeper into the wonders of the cosmos.

User-Centric Design

The project prioritized user-centered design principles, ensuring that the app's information architecture and design assets were meticulously crafted to enhance usability and engagement. From low-fidelity wireframes to high-fidelity mockups, the visual elements and interactive features were thoughtfully designed to create an intuitive and visually appealing interface. The Material Theme Builder plugin facilitated the creation of dynamic color palettes, offering users a seamless transition between light and dark themes.

Successful Application of React

The NASA Explorer project leveraged the power of React to create an immersive experience for users to search and view captivating images and videos from NASA's APIs. The intuitive interface allows users to easily navigate through the app, discover content related to astronomy, and explore the wonders of the cosmos.

More work