Successfully Completed the horizontal scroll with 20 sample photos with 20 different details

Deployed Link

• Vite React App
• Tailwind CSS# Horizontal Scroll Cards

This is a React application that showcases a horizontal scroll of cards displaying various information such as team details, player statistics, and images. The project incorporates several features and technologies to enhance the user experience and provide a smooth, responsive interface.

1. Infinite Auto-Scroll: The cards are displayed in an infinite auto-scroll loop, providing a seamless and captivating experience for users.

2. Toggle Cards: Users can toggle between light and dark modes for the card backgrounds with a single click, adapting to their preferred visual style.

3. Shuffle Cards: The order of the cards can be randomized with the click of a button, adding an element of surprise and keeping the display fresh.

4. Seamless Scrolling

5. Star Rating: Each card includes a star rating system, allowing users to rate the content or player based on their preferences.

6. Skeleton Loading: While the application is fetching data, a skeleton loading animation is displayed, providing a smooth and visually appealing experience during the loading process.

7. Progressive Image Loading: Images are loaded progressively, displaying a low-resolution placeholder initially and then transitioning to the high-resolution image once it has been fetched, ensuring a faster initial load time and a better user experience.

• For All Devices Compatible.

• React: The application is built using React, a powerful JavaScript library for building user interfaces.
• Vite: Vite is used as the build tool, providing a fast and efficient development environment.
• Tailwind CSS: The styling of the application is handled using Tailwind CSS, a utility-first CSS framework that promotes rapid development and consistent design.

To run the application locally, follow these steps:

1. Clone the repository: git clone https://github.com/your-repo-url.git
2. Navigate to the project directory: cd project-directory
3. Install dependencies: npm install
4. Start the development server: npm run dev
5. Open your browser and visit: http://localhost:5173

The application is uploaded on YouTube. You can access the link here https://youtu.be/DWxeqkyKLRc.

This project is licensed under the Saurav Jha 😂.