This is a React application that fetches videos from a backend and displays them on the frontend. It also includes a search functionality to filter the videos based on user input.
- Fetches video data from a backend API
- Displays video cards with thumbnails, titles, and descriptions
- Implements search functionality for filtering videos
- Utilizes the debouncing concept to optimize search performance
One of the key features implemented in this project is debouncing. Debouncing is a technique used to limit the rate at which a function is called. In this application, debouncing is applied to the search input field.
When a user types into the search input, instead of triggering a search for each keystroke, the debouncing mechanism waits for a short period of time (a specified delay) after the user stops typing. Once the delay expires, the search function is executed, preventing unnecessary API requests from being made during rapid user input.
By implementing debouncing, the application's performance is optimized, reducing the number of unnecessary API requests and improving the overall user experience.
- React
- JavaScript
- HTML
- CSS
- Clone the repository
- Install dependencies using
npm install - Start the development server with
npm start
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.