FlexGallery is a responsive image gallery application built with Next.js that utilizes the Unsplash API. Users can search for images, star their favorite ones, and enjoy a smooth browsing experience. The application is enhanced with Tailwind CSS for styling and Redux Toolkit for state management.
- Search Functionality: Users can search for images using keywords.
- Starr Images: Users can star their favorite images to save them for later viewing.
- Responsive Design: The application is designed to work seamlessly across various devices and screen sizes.
- Optimized Performance: FlexGallery is optimized for performance to ensure smooth browsing even with a large number of images.
- Tailwind CSS: Utilizes Tailwind CSS for easy and efficient styling.
- Redux Toolkit: State management is handled efficiently using Redux Toolkit, ensuring a predictable state container for the application.
To run FlexGallery locally, follow these steps:
- Clone the repository:
git clone https://github.com/AKASH-PRASAD7/FlexGallery.git - Navigate to the project directory:
cd FlexGallery - Install dependencies:
npm install - Obtain an API key from Unsplash by creating an account at https://unsplash.com/developers
- Create a
.env.localfile in the root directory of the project and add your Unsplash API key:NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your-access-key - Start the development server:
npm run dev - Open your browser and visit http://localhost:3000 to view the application.
- Upon launching the application, users are greeted with a search bar.
- Enter keywords related to the images you wish to explore.
- Scroll through the results and click on any image to view it in full size.
- To favorite an image, click on the star icon associated with it.
- Access your favorite images by clicking on the "Favorites" button located at the top of the page.
- Next.js: A React framework for building server-side rendered and static web applications.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Redux Toolkit: A package that helps manage application state efficiently using Redux.
- Unsplash API: Provides access to a vast collection of high-quality images for use in applications.
- Powered by Unsplash API.