Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Feedback from customers is one key to a successful business today. In this tutorial, we'll learn how to build a customer review and rating App using Strapi, a user-friendly and easy-to-integrate content management system(CMS) that simplifies the content management process, and solid.js, a reactive UI library.

We’ll go through the steps of setting up Strapi CMS backend, creating a content type and also integrating with solid.js to display the data.
## Prerequisites
Before we begin, ensure that you have the following:
- [Node installed](https://nodejs.org/en/download) (it is recommended that you have the latest version of Node installed or one that is compatible with installing Strapi on your local machine).
- Basic understanding of Javascript.
- Basic understanding of [Solid.js](https://www.solidjs.com/guides/getting-started).
- A code editor.
## Setting up Strapi
To kick-start the building process, you need to have Strapi installed on your local machine. If you have already, you can skip this part to where we start building. For the new Strapiers 😀 navigate to the folder you want your project installed in the terminal and run this command:
```bash
npx create-strapi-app@latest my-project
```
Replace `my-project` with the actual project name you intend on using. 

This command will create a new project and install Strapi CMS on your local machine. Once that is installed, you can now start your Strapi application by running the command:
```bash
npm run develop
```
After running that command, copy the URL from your terminal and paste it into any browser of your choice. You’ll need to sign up to access your Strapi dashboard. This shouldn’t take long as the process is seemingly fast and easy. After you’re done signing up, you should have a dashboard like this:

![001-welcome-to-strapi.png](https://api-prod.strapi.io/uploads/001_welcome_to_strapi_0ad3860440.png)

Do you love the dark feature? Me too 🙃. You can enable dark mode for yours too. Simply go to your profile settings. Scroll down to `Experience` and select dark mode in the user interface section.

Now, let’s create some content!
## Create a Collection Type
Collection type are a form of content type that is used to manage a list of content which are similar. For this tutorial, you’ll be creating a **collection-type** content. Navigate to **Content-Type Builder** on the side navigation bar of your dashboard, click on **"Create new collection type"**.

Create a new collection type by giving it a display name. Ensure it’s singular, not plural, as Strapi automatically pluralizes it. I’ll be naming mine `customer-review`, go ahead and give yours a unique name.

![002-create-collection.png](https://api-prod.strapi.io/uploads/002_create_collection_4e80c37e26.png)

Click on **continue**. This will take us to the next step, which is selecting the appropriate fields for your collection type. For the `customer-review` collection type, you need to create three fields representing:

- **Reviewer's name** (`reviewers_name`): The name of the customer or reviewer that is rating the product. This will be a field of type `text,` which will be a short text. I’ll name mine `reviewers_name.` 

![003-add-collection-type-fields.png](https://api-prod.strapi.io/uploads/003_add_collection_type_fields_2870a60bb5.png)

Click on **"add another field"** to add the next field.

- **Reviewer's rating** (`reviewers_rating`): This will be the actual rating the customer gives to the product. It could be a 5-star rating or a one-star rating. This field will be a number, so go ahead and click the number field, give it the name `reviewers_rating`, and then choose a number format. I’ll go for `integer`. 

![004-add-reviewer-rating-field.png](https://api-prod.strapi.io/uploads/004_add_reviewer_rating_field_67ec4a03c9.png)

Click on **"add another field"** to add the next field.

- **The review** (`the_review`): This will contain the review and feedback of the product by the customer or reviewer. I’ll name mine `the_review`. This field will also be a text,  but a `long text`.

![005-the-review-collection-field.png](https://api-prod.strapi.io/uploads/005_the_review_collection_field_37619d7de0.png)

Click on **"finish"** and then save the collection type. Your collection type should look like this:

![006-collection-type-fields.png](https://api-prod.strapi.io/uploads/006_collection_type_fields_70886d75ff.png)

## Enable Public Access
Once that is done, head over to ***Settings > USERS & PERMISSIONS PLUGIN > Roles***, and click on **Public**. Then scroll down to **Permissions**, click on `customer-review`, select all to authorize the application's activity, and click **Save**.

![007-enable-public-access.png](https://api-prod.strapi.io/uploads/007_enable_public_access_ad5dbb20b7.png)

## Populate the Collection
You need to add some content to the `customer-review` collection type that was created. This will help show it works when we integrate it into Solid.js. To do this, head over to **Content Manager** and navigate to `customer-review` collection type. Click on **"create new entry"**. Fill in and then save it. You can populate with as much content as you want. 

![008-create-an-entry.png](https://api-prod.strapi.io/uploads/008_create_an_entry_afff7431b1.png)

So, we’re done with setting up Strapi and our content. Let’s move on to setting up and building the frontend.
## Set up the frontend and Integrate with Strapi
For our frontend, we’ll make use of [Solid.js](https://www.solidjs.com/). Let’s introduce Solid.js a bit before moving forward.

Created by Ryan Carniato and open-sourced in 2018. Solid.js is a JavaScript framework for building user interfaces. It is a reactive framework that leverages fine-grained reactivity to efficiently update the user interface when data changes.

Solid.js possesses some features, including:
- Declarative Syntax
- Fine-Grained Reactivity
- JSX Support:
- Reactive Primitives
- Efficient Rendering

You can check out their [documentation](https://www.solidjs.com/docs/latest) to learn more about Solid.js. Let’s proceed to build our frontend.

### Install SolidJs
To install Solid.js, navigate once again to the project folder through the terminal. Run the following command:

```bash
npx degit solidjs/templates/js frontend
> cd frontend
> npm i # or yarn or pnpm
> npm run dev 
```
Once you’ve run this command, you should have your solid.js development server start up. Click or copy the URL in the terminal to your browser.

### Install [Solid-bootstrap](https://solid-libs.github.io/solid-bootstrap/)

We’ll need to install `solid-bootstrap` to utilize some of its features like the `form,` `card,` `button`, and others. Run this command:
```bash
npm install solid-bootstrap
```
Since our focus is not on styling, you can choose to style your project yourself. However, I included minimal [CSS styling](https://github.com/oyedeletemitope/strapi-css-code), which I used for this project here. Copy and paste it in the `index.css` file which you can find in the `src` folder.

Now we’ve got everything set up to start building.

### Create Components
We’ll have two components in addition to the `App` component: the `ReviewForm` component and the `ReviewCard` component. The `ReviewForm` component will contain the form for which the reviews and ratings are imputed. The `ReviewCard` component will contain the reviews and ratings given by the customer and saved in the Strapi backend. Of course, the `App.jsx` component brings them all together.

 Inside the `src` folder, create a subfolder called `components`. This will house the two components. Create a file inside the subfolder called `ReviewCard.jsx`  and the following code:
```javascript
  // ReviewCard.jsx
import { createSignal } from "solid-js";
import { Card, Button } from "solid-bootstrap";

function ReviewCard({ review, onDelete }) {
  return (
    <Card className="card">
      <Card.Body>
        <p>{review.attributes.reviewers_name}</p>
        {[...Array(review.attributes.reviewers_rating)].map((_, index) => (
          <span key={index} className="text-warning">
            &#9733;
          </span>
        ))}
        <p>{review.attributes.the_review}</p>
        <Button variant="danger" onClick={() => onDelete(review.id)}>
          Delete
        </Button>
      </Card.Body>
    </Card>
  );
}

export default ReviewCard;
```
The code above creates a component called `ReviewCard`,which displays information about the reviews.

Next, still inside the subfolder called `components`, create another file called `ReviewForm`. Add the following code:
```javascript
// ReviewForm.jsx
import { createSignal } from "solid-js";
import { Form, Button } from "solid-bootstrap";

function ReviewForm({ fetchReviews }) {
  const [clicked, setClicked] = createSignal(false);
  const [stars, setStars] = createSignal(0);
  const [hoveredStars, setHoveredStars] = createSignal(0);
  const [name, setName] = createSignal("");
  const [review, setReview] = createSignal("");

  const onMouseOver = (rating) => {
    if (clicked()) return;
    setHoveredStars(rating);
  };

  const onMouseOut = () => {
    if (clicked()) return;
    setHoveredStars(0);
  };

  const onClick = (rating) => {
    setClicked(!clicked());
    setStars(rating);
  };

  const submitReview = async (e) => {
    e.preventDefault();
    const reviewData = {
      data: {
        reviewers_name: name(),
        reviewers_rating: stars(),
        the_review: review(),
      },
    };

    try {
      const response = await fetch(
        "http://localhost:1337/api/customer-reviews/",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(reviewData),
        },
      );

      if (!response.ok) {
        console.error("Response status:", response.status);
        console.error("Response text:", await response.text());
        throw new Error("Failed to submit review");
      }

      // Re-fetch reviews to include the new submission
      fetchReviews();

      // Reset form
      setName("");
      setReview("");
      setStars(0);
      setHoveredStars(0);
      setClicked(false);
    } catch (error) {
      console.error("Error submitting review:", error);
    }
  };

  return (
    <div className="form-container">
      <Form onSubmit={submitReview}>
        <Form.Group className="star-rating">
          <Form.Label>Your Rating:</Form.Label>
          {[...Array(5)].map((_, i) => (
            <span
              key={i}
              className={`star ${
                i < (hoveredStars() || stars()) ? "selected" : ""
              }`}
              onMouseOver={() => onMouseOver(i + 1)}
              onMouseOut={onMouseOut}
              onClick={() => onClick(i + 1)}
            >
              &#9733;
            </span>
          ))}
        </Form.Group>
        <div className="input-group">
          <Form.Label for="name">Name:</Form.Label>
          <Form.Control
            id="name"
            type="text"
            value={name()}
            onInput={(e) => setName(e.currentTarget.value)}
            className="form-input"
          />
        </div>
        <div className="input-group">
          <Form.Label for="review">Review:</Form.Label>
          <Form.Control
            id="review"
            as="textarea"
            rows={3}
            value={review()}
            onInput={(e) => setReview(e.currentTarget.value)}
            className="form-input"
          />
        </div>
        <Button variant="success" type="submit" disabled={review() === ""}>
          Submit
        </Button>
      </Form>
    </div>
  );
}

export default ReviewForm;
```
The code above defines the `ReviewForm` component, which will be used alongside the `ReveiwCard` component. It includes a form for users to submit reviews, which involves entering a star rating and their names, as well as writing a review. The form handles this submission by sending the data to the Strapi backend through the API endpoint and resets itself after successful submission.

### Modify `App.jsx`
You need to modify `App.jsx` to most of the logic, which includes fetching the reviews from the Strapi backend, displaying them, and deleting them.

Navigate to your `App.jsx` file and modify it to this:
```javascript
    // App.jsx
import { createSignal, createEffect } from "solid-js";
import { Container, Col, Row } from "solid-bootstrap";
import ReviewCard from "./components/ReviewCard";
import ReviewForm from "./components/ReviewForm"; // Import the ReviewForm component
import "./index.css";

function App() {
  const [reviews, setReviews] = createSignal([]);

  // Fetch reviews from Strapi backend
  const fetchReviews = () => {
    fetch("http://localhost:1337/api/customer-reviews/")
      .then((response) => response.json())
      .then((data) => {
        if (Array.isArray(data.data)) {
          setReviews(data.data);
        } else {
          console.error("Expected an array of reviews, but received:", data);
          setReviews([]);
        }
      })
      .catch((error) => console.error("Error fetching reviews:", error));
  };

  createEffect(() => {
    fetchReviews();
  });

  const deleteReview = async (id) => {
    try {
      const response = await fetch(
        `http://localhost:1337/api/customer-reviews/${id}`,
        {
          method: "DELETE",
        },
      );

      if (!response.ok) {
        throw new Error("Failed to delete review");
      }

      // Re-fetch reviews to reflect the deletion
      fetchReviews();
    } catch (error) {
      console.error("Error deleting review:", error);
    }
  };

  return (
    <>
      <Container fluid className="App text-light text-center">
        <Col md={{ span: 6, offset: 3 }}>
          <Row className="mt-5">
            <Col>
              <ReviewForm fetchReviews={fetchReviews} />
            </Col>
          </Row>
          <Row className="mt-5">
            <Col>
              <div className="cards-container">
                {Array.isArray(reviews()) &&
                  reviews().map((r, rIndex) => (
                    <ReviewCard
                      key={rIndex}
                      review={r}
                      onDelete={deleteReview}
                    />
                  ))}
              </div>
            </Col>
          </Row>
        </Col>
      </Container>
    </>
  );
}

export default App;
```
Here is a breakdown of what the code above does:

- **Fetching reviews**: The `fetchReview` function fetches the reviews from the Strapi backend using the `fetch` API. It sends a `GET` request to the Strapi endpoint and updates the reviews state with the fetched data. 
- **Review display**: The app uses the `reviews` state to display individual reviews. It checks if the `reviews` state holds reviews in the form of an array. If it does, it loops through each review object and renders these reviews inside the `ReviewCard` component, which is responsible for displaying them.
- **Delete reviews**: This function utilizes the `DeleteReview` function to delete reviews. It sends a `DELETE` request to the Strapi backend with the reviewers `ID`. If the deletion is successful, it re-fetches the reviews to reflect the deletion.

## Demo Time!
All set now, you can check the result in the browser.

  ![demo.gif](https://api-prod.strapi.io/uploads/demo_fc0448a1fd.gif)

Congratulations! You just built a customer review application in Solid.js utilizing Strapi as the backend. Here is the link to the full code on [GitHub](https://github.com/oyedeletemitope/Customer-review-app-solid-strapi). Don't forget to give me a star.

## Conclusion
In this tutorial, we looked at how to build a customer review application with Solid.Js alongside Strapi as the backend. We went through setting up Strapi for new users; we then proceeded to build our frontend using Solid.js and integrate it with Strapi to display, add, and delete reviews. 

Strapi's uses for content purposes are endless, and we'll continue to explore them. Please share if you found this helpful!

## Resources
* [Github Repo](https://github.com/oyedeletemitope/Customer-review-app-solid-strapi) of the full frontend code.

Build a Customer Review APP with Strapi and Solid.js

large_Build a Customer Review APP with Strapi and Solid.png

medium_Build a Customer Review APP with Strapi and Solid.png

small_Build a Customer Review APP with Strapi and Solid.png

thumbnail_Build a Customer Review APP with Strapi and Solid.png

Build a Customer Review APP with Strapi and Solid.png

I'm a web developer and writer. I love to share my experiences and things I've learned through writing.


Learn what Micro Frontend is, its advantages, and how it works by sharing its state within two applications using Module Federation. 

medium_A Quick Introduction to Micro Frontend using Module Federation.png

small_A Quick Introduction to Micro Frontend using Module Federation.png

thumbnail_A Quick Introduction to Micro Frontend using Module Federation.png

A Quick Introduction to Micro Frontend using Module Federation.png

A Quick Introduction to Micro Frontend using Module Federation

In this article, we’re going to look at another fun way to build with Strapi. We’ll be building a music player app! We’ll be using Strapi as our backend, where our music files would be stored and fetched into our app. Think of it like a streaming app, yes! A streaming app like Spotify.
 

## What is Strapi?

[Strapi is an open-source content management system.](https://strapi.io) It allows you to create customizable APIs in any frontend application. Strapi is so easy to use because it allows you to build flexible APIs with one-of-a-kind features that you'll love. 

You can create custom content types and relationships between them to keep things organized. It also includes a media library for storing images and audio files. This is one of the many features of Strapi. Let’s get started.

## Prerequisites

To follow through with this article, you must have the following:
- **React:** 
React is a user interface development library. It runs as an SPA (single-page app) on the client, but it can also build full-stack apps by communicating with a server/API. Because it is capable and directly comparable to frameworks such as Angular or Vue, React is frequently referred to as a frontend "framework."  [You can check out their website for a quick tutorial on it.](https://reactjs.org/tutorial/tutorial.html)
-  Node.js installed (v14)
- Npm or yarn installed (npm v6 is more suited to install Strapi). Note: If you have problems installing Strapi, I recommend clearing the npm cache completely and downgrading to node 14 (by completely uninstalling the higher version of node from your system and anywhere node may appear). Accept the extra installation (the python scripts etc.) It worked for me.


## Project Scope

Before we proceed, it is very important to know the scope of our project. What we want to archieve is build a simple music player in which all its music and details including the name of the artist, name of song and image acting as the cover music. Our music App should also be able to show us the next song on the list and the artist.

## Setting up Strapi
To get started, we’ll first need to install Strapi.  Create a folder called `strapi-musicplayer`, cd into it in our terminal, and run either of the following commands below:

```bash
    npx create-strapi-app@latest my-project --quickstart
    #or
    yarn create strapi-app my-project --quickstart
```
This will install all the necessary packages for this project. After installation, our Strapi app will be launched automatically in our browser. We should have something like this:


![The Strapi Welcome Page](https://paper-attachments.dropbox.com/s_3DAB2FDF65DC7E1B94B9031FE72971380BFD9642E62B803FAB8438A44ACCB451_1652868091143_strapi_pic.png)


To start our project any other time, we use the command:
```bash
    npm run devlop
```
We will be directed to the admin homepage after registering to configure our backend content and APIs. Let’s move to create our collection type.


## Creating Our Collection Type

In order to create our collection type, on your admin homepage, go to *Content-Type Builder* and create a new collection type.

![Creating collection types](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657674404176_strapi3.PNG)

 Give it a display name that is singular, not plural. It is automatically pluralized by Strapi. We will refer to our collection as `music_player`.

![Name of our collection type](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657674630253_strapi4.PNG)


For our `music_player`, we’ll need a title in form of text type,  the name of the artist also of the type text, the image source and the music source  in form of media type.

Let’s go ahead and create them.

![](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657675251447_done.PNG)


Click on Save to save our collection and. Let’s move on to populate our collection.


## Populate the Collection

In the top-left corner of the admin page, select Content Manager. This will navigate you to the page where we will add contents to our database. 

![A sample screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657676890666_populate.PNG)

You can add as many  songs with each of its corresponding details which includes the image, the title and artist. Once we are done, we can either save and test it first, or we skip that and go ahead to publish it.

![Screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657677121377_published.PNG)


To make the `music_player` available to consume it in our React frontend, navigate to `Roles` under `Users and Permissions` Plugins. Then, click on the `public` and scroll down to permissions.


![Roles Page](https://paper-attachments.dropbox.com/s_3DAB2FDF65DC7E1B94B9031FE72971380BFD9642E62B803FAB8438A44ACCB451_1652875766594_roles.png)

Under the Portfolio dropdown, select the `find` and `findOne` options by clicking on Public. This will make the portfolio content available to the public.

![Screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657677355074_strapi10.PNG)

Whenever we try to retrieve it by using the Strapi API, it sends us the data. Now that we’re done, let’s move on to the frontend of our project.


## Building the Frontend

 For our frontend, we’ll be using React. Let's get started by installing React and all the necessary packages.
 
- Open your terminal once again and navigate to the folder where we want to install our React project:
```bash
    npx create-react-app music-player
```

- `cd` into the just installed folder:
```bash
    cd music-player
```
* Install axios.
```bash
    npm install axios
```

* Lastly, install font awesome.

```bash
    npm i --save @fortawesome/fontawesome-svg-core
    npm install --save @fortawesome/free-solid-svg-icons
    npm install --save @fortawesome/react-fontawesome
```    

Before we start up our app, let’s get rid of the files that we won’t be using in our `src`  folder these are `reportwebvitals`, `App.css`, `App.test.js`, `logo.svg`, and `setupTest.js`. We  also want to make some cleanup to our remaining files. for our `index.js`, we clean it up to look like this:
![screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657680213352_like+this.PNG)

The next is our `index.css`. We’ll be deleting it all, leaving us with a blank file. Lastly, for our app, we’ll clean it up to look like this:

![screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657680555277_likethis+too.PNG)


Now that we’ve done that, let’s start our app.
```bash
    npm start
```
We have gotten everything cleaned and sorted out. So, let’s proceed with our project.


## Creating Our Components

creating components is the next thing we’ll be doing. We’ll be creating three components, namely:

- `Index.js`: This is where we’ll be adding our music API and also other functionalities.

- `Player.js` : This will be responsible for handling everything concerning our music player.  Think of it as the captain of a squad, in which our `Detials.js`  and `Control.js` are under because it’ll be using their info ( this will be our props) to work. 

- `Details.js`:  This will contain details like the artist name and title of the song.
- `Controls.js` This will be responsible for the controls like the play, pause, next, and previous.


Inside our `src` folder, let’s create a new folder called `components`. Inside the folder, we’ll create our file called `index.js`, `Player.js`, `Details.js`, `Controls.js`

* Beginning with `index.js`, paste this in it:
  
```js
    import axios from "axios";
    import { useEffect, useState } from "react";
    import Player from "./Player";
    const Index = () => {
      const [songs, setsongs] = useState([]);
      const [currentSongIndex, setCurrentSongIndex] = useState(0);
      const [nextSongIndex, setNextSongIndex] = useState(0);
      // fetching our api
      useEffect(() => {
        const fetchData = async () => {
          try {
            const { data: response } = await axios.get(
              "http://localhost:1337/api/music-players?populate=*"
            );
            let _musics = response.data;
            _musics.map((music) => {
              let pload = {
                title: music.attributes.title,
                artist: music.attributes.artist,
                img_src:
                  "http://localhost:1337" +
                  music.attributes.img_src.data[0].attributes.url,
                src:
                  "http://localhost:1337" +
                  music.attributes.music_src.data[0].attributes.url,
              };
              setsongs((oldSongs) => [...oldSongs, pload]);
            });
          } catch (error) {
            console.error(error);
          }
        };
        fetchData();
      }, []);
      // .. calling
      useEffect(() => {
        setNextSongIndex(() => {
          if (currentSongIndex + 1 > songs.length - 1) {
            return 0;
          } else {
            return currentSongIndex + 1;
          }
        });
      }, [currentSongIndex]);
      // ..
      return (
        <div className="App">
          {songs.length > 0 && (
            <>
              <Player
                currentSongIndex={currentSongIndex}
                setCurrentSongIndex={setCurrentSongIndex}
                nextSongIndex={nextSongIndex}
                songs={songs}
              />
            </>
          )}
        </div>
      );
    };
    export default Index;
```

In Player.js, paste:

```js
    import React, { useState, useRef, useEffect } from "react";
    import Controls from "./Controls";
    import Details from "./Details";
    function Player(props) {
      const audioEl = useRef(null);
      const [isPlaying, setIsPlaying] = useState(false);
      useEffect(() => {
        if (isPlaying) {
          audioEl.current.play();
        } else {
          audioEl.current.pause();
        }
      });
      const SkipSong = (forwards = true) => {
        if (forwards) {
          props.setCurrentSongIndex(() => {
            let temp = props.currentSongIndex;
            temp++;
            if (temp > props.songs.length - 1) {
              temp = 0;
            }
            return temp;
          });
        } else {
          props.setCurrentSongIndex(() => {
            let temp = props.currentSongIndex;
            temp--;
            if (temp < 0) {
              temp = props.songs.length - 1;
            }
            return temp;
          });
        }
      };
      return (
        <div className="my-player">
          <audio
            src={props.songs[props.currentSongIndex].src}
            ref={audioEl}
          ></audio>
          <h4>Playing now</h4>
          <Details song={props.songs[props.currentSongIndex]} />
          <Controls
            isPlaying={isPlaying}
            setIsPlaying={setIsPlaying}
            SkipSong={SkipSong}
          />
          <p>
            Next up:{" "}
            <span>
              {props.songs[props.nextSongIndex].title} by{" "}
              {props.songs[props.nextSongIndex].artist}
            </span>
          </p>
        </div>
      );
    }
    export default Player;
```

In `Controls.js`, paste:

```js
    import React from "react";
    import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    import {
      faPlay,
      faPause,
      faForward,
      faBackward,
    } from "@fortawesome/free-solid-svg-icons";
    function Controls(props) {
      return (
        <div className="my-player--controls">
          <button className="skip-btn" onClick={() => props.SkipSong(false)}>
            <FontAwesomeIcon icon={faBackward} />
          </button>
          <button
            className="play-btn"
            onClick={() => props.setIsPlaying(!props.isPlaying)}
          >
            <FontAwesomeIcon icon={props.isPlaying ? faPause : faPlay} />
          </button>
          <button className="skip-btn" onClick={() => props.SkipSong()}>
            <FontAwesomeIcon icon={faForward} />
          </button>
        </div>
      );
    }
    export default Controls;
```    

In `Details.js`, paste:

```js
    import React from "react";
    function Details(props) {
      return (
        <div className="my-player--details">
          <div className="details-img">
            <img src={props.song.img_src} alt="" />
          </div>
          <h3 className="details-title">{props.song.title}</h3>
          <h4 className="details-artist">{props.song.artist}</h4>
        </div>
      );
    }
    export default Details;
```    


- For our `index`, we imported our player component, we then used our `axios` to fetch our data and also put them in an array which we would be working with. We are performing a logic that will display our current song and also our next song to be played. We’ll be grabbing the info from our `Player.js`.

- For our `player.js`, we are importing our `Details` and `Controls` components. It houses both components. Here, we are  configuring the functionalities for our song display, details and controls like he play, the pause,the skip song and the previous song.

- `Controls.js` contains the control interface of our app like the play , pause and all. Our `Player.js` uses it’s props to configure the functionalities since it would be bulky if we included it all in the same file.

- `Details` is used to display the details of the music played. Our `Player.js` also uses the its props.

We just have to do two more things. The first is to pass in our index component into our `App.js`, since it holds the other components.

```js
    import React from "react";
    function Details(props) {
      return (
        <div className="my-player--details">
          <div className="details-img">
            <img src={props.song.img_src} alt="" />
          </div>
          <h3 className="details-title">{props.song.title}</h3>
          <h4 className="details-artist">{props.song.artist}</h4>
        </div>
      );
    }
    export default Details;
```    

Lastly, let’s style it. In `index.css`, paste this:

```css
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Fira Sans", sans-serif;
    }
    body {
        background-color: #DDD;
    }
    .App {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .my-player {
        display: block;
        background-color: #313131;
        display: block;
        margin: 0px auto;
        padding: 50px;
        border-radius: 16px;
        box-shadow: inset -6px -6px 12px rgba(0, 0, 0, 0.8), inset 6px 6px 12px rgba(255, 255, 255, 0.4);
    }
    .my-player > h4 {
        color: #FFF;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
    }
    .my-player > p {
        color: #AAA;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }
    .my-player > p span {
        font-weight: 400;
    }
    .my-player--details .details-img {
        position: relative;
        width: fit-content;
        margin: 0 auto;
    }
    .my-player--details .details-img img {
        display: block;
        margin: 50px auto;
        width: 100%;
        max-width: 250px;
        border-radius: 50%;
        box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.8), -6px -6px 12px rgba(255, 255, 255, 0.4);
    }
    .my-player--details .details-img:after {
        content: '';
        display: block;
        position: absolute;
        top: -25px;
        left: -25px;
        right: -25px;
        bottom: -25px;
        border-radius: 50%;
        border: 3px dashed rgb(0,0,255);
    }
    .my-player--details .details-title {
        color: #EEE;
        font-size: 28px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8), -2px -2px 4px rgba(255,255,255,0.4);
        text-align: center;
        margin-bottom: 10px;
    }
    .my-player--details .details-artist {
        color: #AAA;
        font-size: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8), -2px -2px 4px rgba(255,255,255,0.4);
        text-align: center;
        margin-bottom: 20px;
    }
    .my-player--controls {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    .my-player--controls .play-btn {
        display: flex;
        margin: 0 30px;
        padding: 20px;
        border-radius: 50%;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8), -4px -4px 10px rgba(255, 255, 255, 0.4), inset -4px -4px 10px rgba(0, 0, 0, 0.4), inset 4px 4px 10px rgba(255, 255, 255, 0.4);
        border: none;
        outline: none;
        background-color: #0000FF;
        color: #FFF;
        font-size: 24px;
        cursor: pointer;
    }
    .my-player--controls .skip-btn {
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        color: #888;
        font-size: 18px;
    }
```

Save all and check the result in our browser. 


![Screenshot](https://paper-attachments.dropbox.com/s_FCCFAA9319BFE364D85D741EF7DFAA107EF8A1EB32B7FED3A36F701DC7FAB1C7_1657740037761_bandicam-2022-07-13-12-09-50-990.gif)

We just built ourselves a music player! [Click here to access the full code on my GitHub Repo.](https://github.com/oyedeletemitope/build-a-music-player-app-with-react-and-strapi)


## Conclusion
We have seen another innovative way to use Strapi by building a music player. Special thanks to Asaolu Elijah, who contributed to this article in a very crucial way. 
