<<<<<<< HEAD

Image Carousel Component Task | Chainscore SDE Intern Task

Objective

Implement an Image Carousel component using React that displays a series of slides, some of which will be locked based on user XP points. The carousel should include a nav-bar for navigation.

Tech stack-> Next.js, TypeScript, React Testing Library with Jest, Redux, Tailwind CSS.

Data -> Chapters API, User XP API.

Video Demo

https://drive.google.com/file/d/1uiibyZ7tibck7m17KirQ0GxJwFe1_bZe/view?usp=sharing

Deploy on Vercel - Live Link

https://image-carousel-zeta-five.vercel.app/

API Reference

  https://mocki.io/v1/306e1e4d-22c0-4645-90cc-5cb048238f56

  https://mocki.io/v1/711ee638-acc4-47aa-b0d1-c63fe3c2b85c

Functionality and Features

1. Use Embla Carousel or any other service/library for the carousel functionality.
2. Allow users to scroll through the carousel using mouse wheel input.
3. Clicking a navbar option should slide the user's UI to the start of the respective chapter.
4. If the user's XP is below the unlockXp value of a slide, it should be locked. Display a lock icon over locked slides. When a locked slide is clicked, the card should shake briefly to indicate it is locked.
5. Implement lazy loading for images.
6. Unit tests and integration tests for key components and functions.

Instructions on How to Run/Start the Project on a Local Server

1. clone the repo using this command

   git clone https://github.com/Dikshant441/ChainScore-Round-3.git

2. Install npm dependencies

   npm install or npm i

3. Start the development server:

   npm run dev

4. Open your browser and navigate to:

   http://localhost:3000

For any queries related to the project, contact at singhdikshant200@gmail.com

ed6c05a4bd19a47e5aded20d26751e8754ad176a