Implement News Slider Component with Flowbite and Drupal Data Fetching - Githubissues

Alina-Khmilevska / UPSA-React

This repository contains the source code for the UPSA Pharmaceutical Organization's website, developed using the React library.

1 stars 0 forks source link

Implement News Slider Component with Flowbite and Drupal Data Fetching #22

Closed Alina-Khmilevska closed 1 year ago

Alina-Khmilevska commented 1 year ago

We need to create a dynamic News slider component for our React application that fetches news items from our Drupal backend (/upsa-api/news) and displays them using Flowbite.

Objectives:

Create a slider component that fetches data from the Drupal /upsa-api/news endpoint.
Use Flowbite to ensure the slider is consistent with our design system.
The slider should be able to handle a variable number of news items and allow users to cycle through them.

Requirements:

Integrate Flowbite for styling the slider component.
Fetch news data from the /upsa-api/news endpoint.
Display news items in a slider format.
Ensure that the news items include an image, title, and summary.
Make sure the component gracefully handles loading and error states.
Implement responsive design to ensure the slider looks good on all screen sizes.
If possible, provide left/right navigation arrows and swipe gestures for mobile users.

Acceptance Criteria:

Data fetching from Drupal is working, and news items are correctly displayed within the slider.
The slider should be styled with Flowbite and match the design mock-ups.
The component should be fully responsive and tested on different devices.
All functionality, including navigation and error handling, should be tested and confirmed working.

Alina-Khmilevska commented 1 year ago

I am pleased to inform you that the slider for displaying news has been successfully implemented and integrated into the site. The slider is built using react-slick and flowbite and is configured to show four items at a time with the ability to scroll through one by one.

Data for the slider is dynamically pulled from Drupal via the API at /upsa-api/news. All API calls have been tested and are functioning properly, with data loading and displaying without delays.