Mars Cam

• Develop a user-friendly interface to browse the vast collection of photos from NASA's Mars Curiosity rover.
• Implement efficient data fetching and caching from a third-party API for a smooth, performant user experience.
• Enable users to filter images by Martian day (sol) and by the specific camera on the rover.
• Create a fully responsive, accessible application that works seamlessly across desktops, tablets, and mobile devices.

• Next.js 15 with App Router for server-side rendering and API route handling.
• TypeScript for type safety and an improved development workflow.
• Tailwind CSS with shadcn/ui for rapid, responsive, and modern UI development.
• TanStack Query (React Query) for robust data fetching, caching, and state management.
• NASA Mars Photos API as the primary data source for all rover imagery.
• React Masonry CSS for a dynamic and visually appealing photo grid layout.
• Lucide React for a lightweight and consistent icon set.
• @use-gesture/react for implementing intuitive swipe gestures in the image carousel.

• Search by Martian Day (Sol): Input a specific sol to view all photos taken on that day.
• Filter by Camera: Dynamically select from a list of available rover cameras to narrow down results.
• Responsive Masonry Gallery: Photos are displayed in a clean grid that adapts to any screen size.
• Full-Screen Image Carousel: Click any photo to open a full-screen modal with easy navigation via clicks or swipe gestures.
• Efficient Pagination: Seamlessly navigate through large sets of photos with a client-side pagination system.
• Optimized Data Handling: Debounced search input and server-side caching reduce API requests and improve load times.

This project was a deep dive into integrating external APIs within a modern Next.js application. I gained valuable experience using TanStack Query for complex data fetching and caching strategies, which significantly improved the app's performance. Implementing the debounced search and dynamic filtering taught me effective state management techniques in React. Building the responsive masonry layout and the intuitive image carousel with swipe gestures enhanced my ability to create engaging and user-friendly interfaces. The final result is a fast, polished, and informative application that successfully makes NASA's incredible Mars data accessible and enjoyable to explore.