React: Slideshow App | Fresco Play Hackerrank

In the ever-evolving landscape of web development, React has emerged as a dominant player due to its efficiency and versatility in building user interfaces. One interesting project that showcases these qualities is the Slideshow App, a simple yet impactful application that allows users to navigate through a collection of slides. 

Whether you're a seasoned React developer or just getting started, this project offers insights into building interactive applications that captivate users. So why not dive in, enhance the app further, and continue your journey into the world of React development?

In this article, we'll explore how to create a Slideshow App using React, focusing on the specific requirements provided by Hackerrank. Also provide you the complete code to clone from github check the link at the end.

Environment Setup

Before we dive into the implementation details, let's ensure we have the proper environment set up to build our Slideshow App.

• React Version: 16.13.1

• Node Version: ^12.18.3

Project Specifications

The project requirements outline the functionality and behaviour expected from the Slideshow App. Here's a breakdown of the features we need to implement:

1. The `Slides` component should take an array of slides as a prop. Each slide is represented by an object with two properties: `title` (string) and `text` (string).

2. Upon launching the application, the first slide should be displayed.

3. Clicking the "Next" button should display the next slide. This button should be disabled when the current slide is the last one.

4. Clicking the "Prev" button should display the previous slide. This button should be disabled when the current slide is the first one.

5. Clicking the "Restart" button should return the app to the first slide. This button should be disabled when the current slide is the first one.

6. The app should assume that the passed slides array contains at least one slide.

Building the Slideshow App

To implement the Slideshow App, we'll start by focusing on the core component: `src/components/Slides.js`. This component will handle the rendering and navigation logic of the slideshow.

Slides.js component

    import React, { useState } from 'react';

    function Slides({ slides }) {

    const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

    const goToSlide = (index) => {

    setCurrentSlideIndex(index);

    };

    const goToNextSlide = () => {

    if (currentSlideIndex < slides.length - 1) {

        setCurrentSlideIndex(currentSlideIndex + 1);

    }

    };

    const goToPrevSlide = () => {

    if (currentSlideIndex > 0) {

        setCurrentSlideIndex(currentSlideIndex - 1);

    }

    };

    const restartSlides = () => {

    setCurrentSlideIndex(0);

    };

    const { title, text } = slides[currentSlideIndex];

    return (

    <div>

        <div id="navigation" className="text-center">

            <button

                data-testid="button-restart"

                className="small outlined"

                onClick={restartSlides}

                disabled={currentSlideIndex === 0}

            >

                Restart

            </button>

            <button

                data-testid="button-prev"

                className="small"

                onClick={goToPrevSlide}

                disabled={currentSlideIndex === 0}

            >

                Prev

            </button>

            <button

                data-testid="button-next"

                className="small"

                onClick={goToNextSlide}

                disabled={currentSlideIndex === slides.length - 1}

            >

                Next

            </button>

        </div>

        <div id="slide" className="card text-center">

            <h1 data-testid="title">{title}</h1>

            <p data-testid="text">{text}</p>

        </div>

    </div>

    );

    }

    export default Slides;

The provided code gives us a solid foundation. It uses the `useState` hook to manage the current slide index and implements the navigation functions to move between slides. The rendering logic ensures that the appropriate slide is displayed, and the navigation buttons are enabled or disabled based on the current slide's position.

Utilising the Slides Component

With the `Slides` component in place, we can now integrate it into our application. We'll use the provided data and create an `App` component in `src/App.js`.

App.js component

    import React from 'react';

    import './App.css';

    import 'h8k-components';

    import Slides from './components/Slides';

    const title = "Slideshow App";

    function App({slides}) {

        return (

            <div>

                <h8k-navbar header={title}></h8k-navbar>

                <div className="App">

                    <Slides slides={slides} />

                </div>

            </div>

        );

    }

    export default App;

In this example, the `App` component renders the `Slides` component with a predefined array of slide data. This array contains titles and text for each slide, allowing us to immediately see our Slideshow App in action.

We'll create the slides data and pass it to the App.js component in `src/App.js` from the `src/index.js` component.

Index.js component

    import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    import registerServiceWorker from './registerServiceWorker';

    import {applyPolyfills, defineCustomElements} from 'h8k-components/loader';

    const SLIDES = [

        {

            title: "Welcome to Slideshow App",

            text: "Slideshow App, a simple yet impactful application that allows users to navigate through a collection of slides."

        },

        {

            title: "The project requirements outline.",

            text: "The Slides component should take an array of slides as a prop. Each slide is represented by an object with two properties: title (string) and text (string)."

        },

        {

            title: "Clicking the 'Next' button",

            text: "Clicking the 'Next' button should display the next slide. This button should be disabled when the current slide is the last one."

        },

        {

            title: "Clicking the 'Prev' button",

            text: "Clicking the 'Prev' button should display the previous slide. This button should be disabled when the current slide is the first one."

        },

        {

            title: "Clicking the 'Restart' button",

            text: " Clicking the 'Restart' button should return the app to the first slide. This button should be disabled when the current slide is the first one."

        },

        {

            title: "Great job!",

            text: "You made it, have a nice day and see you next time!"

        }

    ];

    ReactDOM.render(<App slides={SLIDES} />, document.getElementById('root'));

    registerServiceWorker();

    applyPolyfills().then(() => {

        defineCustomElements(window);

    })

Final result:

Clone and Run the App on Your Machine

To experience the Slideshow App firsthand, follow these simple steps to clone the project repository and run it locally on your machine:

1. Clone the Repository: 

Open your terminal and navigate to the directory where you want to store the project. Use the following command to clone the repository:

>>> git clone https://github.com/Neptune998/react-slideshow-app.git

2. Install Dependencies: 

Once the repository is cloned, navigate into the project folder using:

>>> cd react-slideshow-app

Then, install the necessary dependencies by running:

npm install

3. Run the App: 

With the dependencies installed, start the Slideshow App by running:

>>>  npm start

This command will launch a development server and open the app in your default web browser. You'll be able to interact with the slideshow just like in the online demo.

4. Testing the App

To ensure the correctness of your Slideshow App, you can run the provided tests using the following command:

>>>  npm test

These tests will evaluate whether the app meets the specified requirements and functions as expected.

By following these steps, you can explore the Slideshow App on your local machine and even make modifications to further enhance the app's functionality and appearance. 

Conclusion

Creating a Slideshow App in React is not only a valuable exercise in state management and component interaction but also a way to produce an engaging and interactive user experience. By following the specifications provided by Hackerrank, we've built a functional slideshow that allows users to navigate through a collection of slides seamlessly. 

The `Slides` component serves as the backbone of the app, demonstrating how React's declarative nature can simplify complex UI interactions. Whether you're a seasoned React developer or just getting started, this project offers insights into building interactive applications that captivate users. So why not dive in, enhance the app further, and continue your journey into the world of React development?