This project is a simple Vue.js application called GIF TOK, where users can search for GIFs using the GIPHY API and view them in a grid layout. Users can also load more GIFs and view individual GIFs in a modal.
The SGBr services primarily utilize Vue 3, Quasar, Tailwind CSS, and Pinia technologies. My task is to create a web page that consumes data from the Giphy API, featuring infinite scrolling of gifs, a search option, and an enlarged view of the selected gif.
-
Search Bar: Users can enter search queries to find GIFs related to their interests. GIF Grid: Displays the search results in a grid layout with clickable GIF thumbnails. Load More: Allows users to load more GIFs if available.
-
GIF Modal: Clicking on a GIF opens a modal to view the GIF in a larger size. Error Handling: Provides error messages for failed API requests or rate limit exceeded scenarios.
This component serves as the main container for the application. It includes the search bar, GIF grid, loading indicator, error message display, modal for individual GIFs, and a button to load more GIFs.
This component represents the search bar where users can input their search queries to find GIFs. It emits an input event with the search query text whenever the user types in the input field.
This component displays the search results in a grid layout. It receives an array of GIF objects as props and generates a grid of clickable GIF thumbnails. Clicking on a GIF thumbnail emits a showGif event with the selected GIF object.
This component is responsible for displaying an individual GIF in a modal. It receives a GIF object as a prop and shows the GIF in a larger size within a modal dialog. Users can close the modal by clicking outside the modal or using the close button.
Axios: For making HTTP requests to the GIPHY API.
GIPHY API: Used to search for and fetch GIFs based on user queries.
To get started with the project, follow these instructions:
- Clone this repository to your local machine.
git clone https://github.com/juliafclima/gif-tok-vue.git- Navigate to the project directory.
cd gif-tok-vue- Install dependencies.
npm install- Run the development server.
npm run dev- Access the application in your browser at
http://localhost:8080(or the appropriate port number if it's different).
This project was created by Juliafclima. You can contact me at [email protected] for any inquiries or feedback.
This project is licensed under the MTI License. See the LICENSE file for details.