React: Slideshow App | Fresco Play Hackerrank

Author: neptune | 05th-Nov-2023
#React.js

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?





Related Blogs
Create Your First App in React with Redux | Counter app
Author: neptune | 30th-Mar-2023
#React.js
Creating your first app in React can be a daunting task, but with the right guidance, it can be a fun and rewarding experience. Will guide you to create a counter app in React with redux...

React.js vs React Native – What's the Difference?
Author: neptune | 26th-Mar-2023
#React.js
React.js and React Native are both frameworks developed by Facebook for building user interfaces. However, they are not the same and have different use cases...

Arrow Functions in JavaScript | ES6
Author: neptune | 26th-Mar-2023
#JavaScript #React.js
In this article, we will explore the syntax and usage of arrow functions in detail, along with some examples...

Essential Topics to Master React JS
Author: neptune | 21st-Feb-2024
#React.js
A Comprehensive Guide to Components, State, JSX, Event Handling, Routing, Redux, Hooks, Testing, Performance Optimization, and Server-Side Rendering...

Different ways to handle state in React applications
Author: neptune | 21st-Jun-2023
#JavaScript #React.js
This article explores different ways to manage states in React, including local component state, context API, and state management libraries like Redux...

Managing Virtual Environments in React JavaScript Projects
Author: neptune | 28th-Jun-2023
#JavaScript #React.js
Virtual environments are a valuable tool in React JavaScript projects as they allow developers to isolate dependencies, manage package versions, and maintain project consistency...

Opportunities - React Django Developer
Author: neptune | 14th-Apr-2023
#React.js #Django
React Django stack is popular for building web applications. Opportunities for React Django developers in Full Stack, Web, and Software development roles...

Why React Refuses to Die ?
Author: neptune | 01st-Jun-2023
#React.js
React's success stems from addressing UI development challenges, nurturing a vibrant ecosystem, and its demand in the job market. Challenges exist, but React continues to evolve and remain relevant...

😱 How React Kicks Off OOPs ? 😱
Author: neptune | 01st-Jun-2023
#React.js
React kicks off OOPs by replacing inheritance with composition, achieving code reuse and modularity while promoting functional programming...

All You Need to Know About Pure Functions & Impure Functions in JavaScript
Author: neptune | 02nd-Apr-2023
#JavaScript #React.js
You should try to use pure functions whenever possible and avoid using impure functions unless necessary...

Components and Props: Understanding the Backbone of React Applications
Author: neptune | 23rd-Jul-2023
#React.js
React is a popular JavaScript library for building user interfaces. One of the fundamental concepts in React is the use of components and props...

Functional vs Class Components in React: All you need to know?
Author: neptune | 21st-Apr-2023
#React.js
React components are building blocks for UIs. They can be functional (stateless) or class (stateful). Components are called using their names as HTML tags...

Celebrating 10 Years of React: A Decade of Innovation
Author: neptune | 01st-Jun-2023
#React.js
React celebrates its 10th anniversary, revolutionizing frontend development with its innovative concepts, ecosystem growth, and impact on mobile development...

State in React: Component State and Controlling Behavior
Author: neptune | 21st-Feb-2024
#JavaScript #React.js
React, a popular JavaScript library for building user interfaces, introduces the concept of state and lifecycle methods to help developers manage the dynamic nature of components...

Decode Secret Language of React: Game-Changer for Web Developers
Author: neptune | 25th-Feb-2024
#JavaScript #React.js
JSX is a syntax extension for JavaScript recommended by React for describing what the UI should look like...

View More