Successfully Completed the horizontal scroll with 20 sample photos with 20 different details
- 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.
-
Infinite Auto-Scroll: The cards are displayed in an infinite auto-scroll loop, providing a seamless and captivating experience for users.
-
Toggle Cards: Users can toggle between light and dark modes for the card backgrounds with a single click, adapting to their preferred visual style.
-
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.
-
Seamless Scrolling
-
Star Rating: Each card includes a star rating system, allowing users to rate the content or player based on their preferences.
-
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.
-
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:
- Clone the repository:
git clone https://github.com/your-repo-url.git
- Navigate to the project directory:
cd project-directory
- Install dependencies:
npm install
- Start the development server:
npm run dev
- 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 ๐.