This gallery app is a modern, responsive web application built entirely with React and Tailwind CSS, demonstrating the versatility and power of these technologies. With clean navigation enabled by React Router DOM, the app offers users a smooth and intuitive experience for browsing, saving, and managing their favorite photos.
-
Home & Favorites Pages: The app consists of a homepage where users can search for photos and a favorites page to store selected photos. Favorites are saved in local storage, making this app lightweight without needing a backend.
-
Photo Search with Unsplash API: Users can search for photos online through the Unsplash API. The search results are displayed in a dynamic grid layout. Each search query is limited to 30 images per page, but if more images are available, a "Load More" button appears, allowing users to load additional results seamlessly.
-
Infinite Scroll & Lazy Loading: The gallery supports smooth scrolling through search results. As users scroll through the images, additional images load without disrupting the experience. The app intelligently handles loading states with modern animations to keep the user informed.
-
Add to Favorites: Users can add photos they like to the favorites page, and can just as easily remove them. This functionality is stored locally, ensuring user preferences are remembered across sessions.
-
Dark Mode & Light Mode Toggle: The app features a theme toggle, letting users switch between dark and light modes with beautifully styled transitions that enhance the user experience.
-
Modern Animations & Transitions: Every element is thoughtfully styled with smooth transitions and modern animations, providing a visually appealing and interactive experience. Loading states are animated to keep users engaged while data is fetched.
-
Advanced React Hooks: The app showcases the use of powerful React hooks such as
useState,useEffect,useRef, anduseContextto manage state, side effects, and global states. These hooks ensure smooth updates to the UI, making the app feel highly responsive.
- React for component-driven development
- Tailwind CSS for styling and responsive design
- React Router DOM for seamless navigation
- Axios for handling asynchronous API requests
- Unsplash API for fetching images
- LocalStorage for persistent data management
- React Hooks for managing UI states and effects
This project showcases the capabilities of React in creating a well-structured, highly interactive gallery app with a smooth and efficient UI. It's designed to highlight skills in both front-end development and modern user experience design. You can check out the project and the code in my GitHub repository!