Infinite Scroll React.js component

This is a Infinite Scroll component in React. . The component's functionality is demonstrated using the Art Institute of Chicago's API and Cats API.

Overview

Visit: https://agnieszkastanczuk.github.io/infinite-scroll-reactjs/

Features

1. Smooth Scrolling Down: Users can smoothly scroll down the page, triggering in automatic retrievel of new records as needed.
2. Scrolling Up: Scrolling up allows users to go back to previously fetched pages with records.
3. Dynamic Updates: If there are changes in the fetched records, the project automatically updates the displayed data.

• Multi-API Support: The Infinite Scroll component has been tested with different APIs, including the Art Institute of Chicago's API and Cats API.

Technologies

• React.js
• TypeScript
• axios
• SCSS

Sources

• Intersection Observer API
• React Reference Overview

How to Run the Project

To run the "Infinite Scroll React.js component" project on your local machine, follow these steps:

1. Clone the Repository: Open your terminal or command prompt. Navigate to the directory where you want to store the project. Run the following command to clone the repository:

   git clone <repository_url>

   Replace <repository_url> with the URL of your Git repository.

2. Install Dependencies: Navigate to the project's root directory. Run the following command to install the required dependencies:

   npm install

   This will install React.js and any other dependencies specified in the package.json file.

3. Start the Development Server: After installing dependencies and configuring the API key, you can start the development server by running the following command:

   npm start

   This will start the React development server, and your app will be available at http://localhost:3000 in your web browser.

4. Use the Infinite Scroll: Open your web browser and navigate to http://localhost:3000. You will see the "Infinite-scroll-app" in action. As you scroll down the page, new news articles will be fetched automaticall

Continued development

This project is part of the recruitment task and I plan to further improve and develop it after the recruitment process.

To do:

1. Search bar implementation
2. Better design, animations and user experience
3. Documentation
4. Testing