Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
This tutorial will build a simple podcast app to demonstrate how we can host a podcast API on Strapi and fetch from a Next.js app.
What we will learn
How to:
Requirements Before we begin, make sure you have the below tools installed in your machine.
What is Strapi?
Strapi is a headless CMS (Content Management System) based on Node.js used to build APIs. Strapi provides a UI where we can develop our APIs using what is called collections. A collection offers endpoints where we can perform CRUD actions on the resource.
Strapi is self-hosted in the sense that it hosts the endpoints, the server code, and the backend for us. And you can use your database because Strapi provides a configuration to connect to another backend. Strapi is just like a server and database bundled together.
Also, Strapi is open-source. It is maintained by hundreds of contributors worldwide. So Strapi has enormous support and constantly maintained.
By default, Strapi provides the collections in RESTful endpoints, but it also supports GraphQL. With the Strapi GraphQL plugin, it will serve the collections in GraphQL endpoints.
The endpoints can be used from mobile, desktop, or web. In our case, our web is built using React.js so that we will communicate with the endpoints from our frontend using an HTTP library.
Setting up Strapi backend
Let's set up the main folder that will contain our Strapi backend project and our React frontend project.
1
mkdir podcast-app
Move inside the folder:
1
cd podcast-app
Now, let's scaffold our Strapi project:
1
yarn create strapi-app podcast-api --quickstart
This creates a Strapi folder in the podcast-api
folder. Strapi will go to install the dependencies and also run strapi develop
to start the Strapi server.
Strapi will open a browser and will navigate to http://localhost:1337/admin/auth/register-admin
This form is where we will sign up before we use Strapi.
Fill in the input boxes:
Click on “LET’S START” button. The admin panel loads.
Creating collections
We will begin creating our collections, but before we do that, let's see the model of our collections.
Podcast model
Our podcast model will be this:
1
2
3
4
5
6
7
8
9
podcast {
name
author
imageUrl
episodes [{
name
mp3Link
}]
}
Each podcast will have a name
, an image
on the internet, then episodes. Each episode will have a name
and an mp3Link
on the internet.
The relationship between podcasts and episodes is a one-to-many relationship. A podcast will have many episodes.
So we will create an "episodes" collection and a "podcasts" collection. Then, we will use the Strapi relation field to set the relationship.
Create Episodes collection
Let's create the "episodes" collection first.
Click on the "> CREATE YOUR FIRST CONTENT-TYPE" button to create a new collection. A "Create a collection type" modal will appear in the "Display name" input box type in "episodes." Then, click on "Continue."
Now, we begin to set the fields and their field types for our "episodes" collection. On the UI that appears, select "Text,"
On the "Add new Text field," type "name" on the input box.
Then, click on “+ Add another field”. Select “Text”,
Type “mp3Link”
Click on “Finish” On the “Episodes” page that appears,
Click on “Save”. This saves the “episodes” collection.
Now, we create the “podcasts” collection.
Create Podcast collection
On the “Episodes” page we are at now, click on “+ Create new collection type”.
On the “Create a collection type” modal that shows up, type “podcasts”
And click on “Continue”.
On the “Podcasts” modal, click on “Text”
On the “Add new Text field”, type “name” on the input box.
Then, click on “+ Add another field”.
Select “Text” and in the next UI type “author”.
Do the same for “imageUrl”.
On the “Select a field for your collection type” that shows up, click on “Relation”.
See the links between the "Podcasts" and "Episodes." That's all the relationships that we can choose. Click on the last link. It is the relationship link to make a podcast to have many episodes.
See the text changes to "Podcast has many Episodes." That's the relationship we want. Click on "Finish."
Click on the "Save" button on the top-right to save our collection fields.
We have created our collections with relationships. Let's open access for both authenticated users and the public.
Open access
On the sidebar, click on "Settings," then on the second sidebar that opens to the right, click on "Roles."
Then, on the right side, click on "Public," and scroll down to the "Permissions" section, and check the checkboxes on both "EPISODES" and "PODCASTS."
Scroll up and click on the “Save” button.
Seed the database with mock data
We have to insert fake data into our database.
We will first have to add episode data. To do that, click on the "Episodes" link on the sidebar.
Click on the "+ Add New Episodes" button on the top-right. Now we enter our episode data.
1
2
name -> Episode 1 - React
mp3Link -> mp3-link.mp3
Click on the “Save” button.
Click on the “Publish” button.
This makes our changes go live. Click on the “<” button on the top-left to go back.
See that our input is there. So add the below episodes yourself.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
name -> Episode 2 - React
mp3Link -> mp3-link.mp3
name -> Episode 3 - React
mp3Link -> mp3-link.mp3
name -> Episode 4 - React
mp3Link -> mp3-link.mp3
name -> Episode 4 - Angular
mp3Link -> mp3-link.mp3
name -> Episode 4 - Angular
mp3Link -> mp3-link.mp3
Now, we add podcasts data. Click on the “Podcasts” link on the sidebar.
Click on the “+ Add New Podcasts”.
Type in the data:
1
2
3
name -> React Podcast
author -> Chidume Nnamdi
imageUrl -> https://terrigen-cdn-dev.marvel.com/content/prod/1x/ae_digital_packshot.jpg
We have to add the episodes. See that in the middle-right section, we have a "Episodes (0)" box. This is where we will add the episodes to the podcast.
Click on the dropdown box, and you will see all our episodes data cascade down.
Click on an episode will add it to the podcast.
Now, add all “React” episodes.
Now, click on the “Save” button, and the “Publish” button when it becomes enabled.
Let’s add another podcast, go back and click on the “+ Add New Podcasts”.
Add the data:
1
2
3
name -> Angular Podcast
imageUrl -> https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTp0qlAoWcOOswIkL_qpjYzJqCCDmWXiBzCXiqbE43Obo8c0Z-s
author -> Chidume Nnamdi
On episodes, add the “Angular” episodes.
Click on “Save” and then on “Publish”
Testing the Strapi endpoints
We will be using Postman.
Get all podcasts
Type in http://localhost:1337/podcasts
and click on "Send".
Get a podcast
Let’s get the “Angular” podcast. Its ID is 3, so we type http://localhost:1337/podcasts/3
and click "Send".
Setting up Next.js project
We are done with the backend, its time to build our frontend and see how we will call the endpoints provided to us by Strapi.
Se we begin by creating a Next.js project:
1
yarn create next-app podcast-strapi
This will create a Next.js project on a podcast-strapi
folder with all its dependencies installed.
Move into the folder:
1
cd podcast-strapi
Start the Next.js development server.
1
yarn dev
This will server our Next.app at localhost:3000
.
Open your browser and navigate to localhost:3000
, you will see the Next.js default page.
Building the Next.js app Now, we build the app.
Our app will have two routes:
This is how our app will look like when we are done:
Podcasts list view
View a podcast
Add a podcast
We will break our app into components before we start building.
We will have the:
In our pages folder, we will have index.js
files there. This will render the default homepage. We will edit this file to render the podcasts.
Next, in the pages
, we will create a folder podcast
, and inside the folder, we will create a [id].js
.
First, we will need the Axios module for making HTTP requests.
1
yarn add axios
pages/index.js
This file has the Home
component. We will fetch all the podcasts using Axios
from our Strapi when the component loads and render them in a list.
We will have a button when clicked it will display the AddPodcastDialog
modal.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Header from "../components/Header";
import PodCard from "../components/PodCard";
import { useEffect, useState } from "react";
import axios from "axios";
import AddPodcastDialog from "../components/AddPodcastDialog";
export default function Home() {
const [podcasts, setPodcasts] = useState([]);
const [showModal, setShowModal] = useState(false);
useEffect(async () => {
const data = await axios.get("http://localhost:1337/podcasts");
setPodcasts(data?.data);
}, []);
function showAddPodcastDialog() {
setShowModal(!showModal);
}
return (
<div className={styles.container}>
<Head>
<title>Podcast</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.breadcrumb}>
<h2>Hello, Good Day.</h2>
<span>
<button onClick={showAddPodcastDialog}>Add Podcast</button>
</span>
</div>
<div className={styles.podcontainer}>
<div className={styles.yourpodcasts}>
<h3>Your Podcasts</h3>
</div>
<div>
{podcasts.map((podcast, i) => (
<PodCard key={i} podcast={podcast} />
))}
</div>
</div>
{showModal ? (
<AddPodcastDialog closeModal={showAddPodcastDialog} />
) : null}
</main>
</div>
);
}
We will come to the PodCard
and AddPodcastDialog
components later. We have two states that hold the podcast array and the modal show state.
The podcasts are fetched inside the useEffect
callback and stored in the podcasts state array. See that we used the GET HTTP method, and the URL "http://localhost:1337/podcasts"
is passed. This gets all the podcasts in our Strapi.
The showAddPodCastDialog
function toggles the modal's show state. It makes the modal appear and disappear.
The podcasts
are mapped through, and each is displayed on the PodCard component. Each podcast
is passed to the PodCard
component via its podcast
input.
The showModal
boolean state is used to determine whether to display the AddPodcastDialog modal or not. The showAddPodcastDialog
function is passed to it via closeModal
. With this, the component can close itself by calling the closeModal
.
The styling for this page component is at styles/Home.module.css
. Open it and paste the CSS code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(234, 238, 243, 1);
}
.main {
flex: 1;
display: flex;
flex-direction: column;
width: 62%;
}
.podcontainer {
background-color: white;
padding: 15px;
}
.yourpodcasts {
color: darkgrey;
border-bottom: 1px solid rgba(232, 232, 232, 1);
padding-bottom: 5px;
}
.breadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
}
We now see how we comm with our Strapi backend to fetch data to display in our frontend.
pages/podcast/id.js
Now, let’s code the podcast view component. The [id]
, tells Next.js that this is a dynamic route and that this file should be loaded when the routes like below are navigated to.
E.g
You can test with different unique numbers such as localhost:3000/podcast/1
.
This component will retrieve the id
param value using the useRouter hook. Then, we will use the id value to fetch the podcast from the Strapi podcasts "http://localhost:1337/podcasts/" + id
endpoint via the GET HTTP method. With the podcast data, we render all the details.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import styles from "../../styles/PodCastView.module.css";
import { useRouter } from "next/router";
import EpisodeCard from "../../components/EpisodeCard";
import axios from "axios";
import { useEffect, useState } from "react";
export default function PodCastView() {
const router = useRouter();
const {
query: { id },
} = router;
const [podcast, setPodcast] = useState();
useEffect(async () => {
const data = await axios.get("http://localhost:1337/podcasts/" + id);
setPodcast(data?.data);
}, [id]);
async function deletePodcast() {
if (confirm("Do you really want to delete this podcast?")) {
// delete podcast episodes
const episodes = podcast?.episodes;
for (let index = 0; index < episodes.length; index++) {
const episode = episodes[index];
await axios.delete("http://localhost:1337/episodes/" + episode?.id);
}
await axios.delete("http://localhost:1337/podcasts/" + id);
router.push("/");
}
}
return (
<div className={styles.podcastviewcontainer}>
<div className={styles.podcastviewmain}>
<div
style={{ backgroundImage: `url(${podcast?.imageUrl})` }}
className={styles.podcastviewimg}
></div>
<div style={{ width: "100%" }}>
<div className={styles.podcastviewname}>
<h1>{podcast?.name}</h1>
</div>
<div className={styles.podcastviewminidet}>
<div>
<span style={{ marginRight: "4px", color: "rgb(142 142 142)" }}>
Created by:
</span>
<span style={{ fontWeight: "600" }}>{podcast?.author}</span>
</div>
<div style={{ padding: "14px 0" }}>
<span>
<button onClick={deletePodcast} className="btn-danger">
Delete
</button>
</span>
</div>
</div>
<div className={styles.podcastviewepisodescont}>
<div className={styles.podcastviewepisodes}>
<h2>Episodes</h2>
</div>
<div className={styles.podcastviewepisodeslist}>
{podcast?.episodes.map((episode, i) => (
<EpisodeCard key={i} episode={episode} />
))}
</div>
</div>
</div>
</div>
</div>
);
}
We retrieved the id
param value using the useRouter
hook, then set a state to hold the podcast value.
See that in the useEffect
callback function, we used the podcast to get the podcast's details from the Strapi "http://localhost:1337/podcasts/" + id
URL, the data is then set in the podcast
state.
The deletePodcast
function deletes the podcast and its episodes. The episodes are looped through and each is deleted by calling the Strapi URL "http://localhost:1337/episodes/" + episode?.id
via the HTTP DELETE method.
Then, the podcast is deleted also by calling the Strapi URL "http://localhost:1337/podcasts/" + id
via the HTTP DELETE method. Then, the default page is loaded since the podcast is no longer available.
The UI renders the podcast details. The episodes are mapped through and each episode is rendered in the EpisodeCard
component. The episode is passed to it via the episode
input. The EpisodeCard
component will access the episode details via the episode
in its props
to display the info.
The Delete
button calls the deletePodcast
function to delete the podcast.
This page component has it own module styling at styles
folder styles/PodCastView.module.css
.
We retrieved the id
param value using the useRouter
hook, then set a state to hold the podcast value.
See that in the useEffect
callback function. We used the podcast to get the podcast's details from the Strapi "http://localhost:1337/podcasts/" + id
URL. The data is then set in the podcast
state.
The deletePodcast
function deletes the podcast and its episodes. The episodes are looped through, and each is deleted by calling the Strapi URL "http://localhost:1337/episodes/" + episode?.id via the HTTP DELETE method.
Then, the podcast is also deleted by calling the Strapi URL "http://localhost:1337/podcasts/" + id via the HTTP DELETE method. Then, the default page is loaded since the podcast is no longer available.
The UI renders the podcast details. The episodes are mapped through, and each episode is rendered in the EpisodeCard component. The episode is passed to it via the episode input. The EpisodeCard component will access the episode details via the episode in its props to display the info.
The Delete button calls the deletePodcast function to delete the podcast.
This page component has it own module styling at styles folder styles/PodCastView.module.css.
Open it and add the styling:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.podcastviewcontainer {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(234, 238, 243, 1);
}
.podcastviewimg {
width: 200px;
height: 300px;
background-color: darkgray;
margin-right: 9px;
margin-top: 28px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.podcastviewmain {
flex: 1;
display: flex;
flex-direction: row;
width: 62%;
}
.podcastviewepisodeslist {
background-color: white;
padding: 15px;
}
Now, let’s look at the components.
First, create a components
folder at the root folder.
AddPostcastDialog component
Create a AddPodcastDialog
folder, and inside the folder create a index.js
file. Inside this file, add the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import { useState } from "react";
import EpisodeCard from "../EpisodeCard";
import axios from "axios";
export default function AddPodcastDialog({ closeModal }) {
const [episodes, setEpisode] = useState([]);
const [disable, setDisable] = useState(false);
async function savePodcast() {
setDisable(true);
const podcastName = window.podcastName.value;
const podcastImageUrl = window.podcastImageUrl.value;
const podcastAuthor = window.podcastAuthor.value;
const episodeIds = [];
// add all the episodes, get their ids and use it to save the podcast
for (let index = 0; index < episodes.length; index++) {
const episode = episodes[index];
const data = await axios.post("http://localhost:1337/episodes", {
...episode,
});
episodeIds.push(data?.data?.id);
}
// add podcast
await axios.post("http://localhost:1337/podcasts", {
name: podcastName,
author: podcastAuthor,
imageUrl: podcastImageUrl,
episodes: episodeIds,
});
setDisable(false);
closeModal();
location.reload();
}
function addEpisode() {
const episodeName = window.episodeName.value;
const episodeMp3Link = window.episodeMp3Link.value;
setEpisode([...episodes, { name: episodeName, mp3Link: episodeMp3Link }]);
}
function removeEpisode(index) {
setEpisode(episodes.filter((episode, i) => i != index));
}
return (
<div className="modal">
<div className="modal-backdrop" onClick={closeModal}></div>
<div className="modal-content">
<div className="modal-header">
<h3>Add New Podcast</h3>
<span
style={{ padding: "10px", cursor: "pointer" }}
onClick={closeModal}
>
X
</span>
</div>
<div className="modal-body content">
<div style={{ display: "flex", flexWrap: "wrap" }}>
<div className="inputField">
<div className="label">
<label>Name</label>
</div>
<div>
<input id="podcastName" type="text" />
</div>
</div>
<div className="inputField">
<div className="label">
<label>ImageUrl</label>
</div>
<div>
<input id="podcastImageUrl" type="text" />
</div>
</div>
<div className="inputField">
<div className="label">
<label>Author</label>
</div>
<div>
<input id="podcastAuthor" type="text" />
</div>
</div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<div>
<h4>Add Episodes</h4>
</div>
<div
style={{
display: "flex",
alignItems: "flex-end",
border: "1px solid rgb(212 211 211)",
paddingBottom: "4px",
}}
>
<div className="inputField">
<div className="label">
<label>Episode Name</label>
</div>
<div>
<input id="episodeName" type="text" />
</div>
</div>
<div className="inputField">
<div className="label">
<label>MP3 Link</label>
</div>
<div>
<input id="episodeMp3Link" type="text" />
</div>
</div>
<div style={{ flex: "0" }} className="inputField">
<button onClick={addEpisode}>Add</button>
</div>
</div>
<div
style={{
height: "200px",
overflowY: "scroll",
borderTop: "1px solid darkgray",
borderBottom: "1px solid darkgray",
margin: "8px 0",
}}
>
{episodes?.map((episode, i) => (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<EpisodeCard episode={episode} key={i} />
<div>
<button
className="btn-danger"
onClick={() => removeEpisode(i)}
>
Del
</button>
</div>
</div>
))}
</div>
</div>
</div>
<div className="modal-footer">
<button
disabled={disable}
className="btn-danger"
onClick={closeModal}
>
Cancel
</button>
<button disabled={disable} className="btn" onClick={savePodcast}>
Save Podcast
</button>
</div>
</div>
</div>
);
}
This component will add a new podcast along with its episodes to our Strapi backend. We set two states, episodes: this will hold the episodes added to the podcast, and disable state will either disable buttons when adding a podcast or enable it.
We have a savePodcast
function. This function gets the podcast's data from the UI: name
, imageUrl
, author
.
Then, already the episodes must have been set in the episodes
state array, the array is looped through and each episode is added to the backend by performing an HTTP POST request in the "http://localhost:1337/episodes"
Strapi URL and passing the episode name and mp3 link gotten from the UI as payload, the episode ids generated is stored in an array.
Next, we create a new podcast by performing an HTTP POST request to the "http://localhost:1337/podcasts"
Strapi URL, passing in the podcast's name, image URL, author, and the array of episode ids as payload.
The episode's ids will make the podcast to be linked to the episodes whose id is in the ids. The button is enabled, the modal is closed, and the page is reloaded, so we see the newly added podcast.
The addEpisode
function adds each episode to the episode's states.
The removeEpisode
function removes an episode from the episodes array.
The UI has input boxes to input the podcast's name
, imageURL
, and author
. The Add Episodes
section is where we add episodes to the podcast.
When clicked, the Save Podcast
button calls the savePodcast
function, which creates the episodes in the Strapi backend from episodes in the episodes
state array and creates the podcast.
EpisodeCard component
Create an EpisodeCard
folder in the components
folder. Add index.js
and EpisodeCard.module.css
.
Open index.js
and paste the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import styles from "./EpisodeCard.module.css";
export default function EpisodeCard({ episode }) {
const { name, mp3Link } = episode;
return (
<div className={styles.episodeCard}>
<div className={styles.episodeCardImg}></div>
<div className={styles.episodeCardDetails}>
<div className={styles.episodeCardName}>
<h4>{name}</h4>
</div>
<div className={styles.episodeCardAudio}>
<audio controls src={mp3Link} />
</div>
</div>
</div>
);
}
We destructured the episode
from the parameter. The episode
will pass an episode to the component.
Next, we destructured the episode details from the episode
variable. name
, and mp3Link
is what we expect to be in the episode
object.
Now, we render the name, and we render the audio
element, pass the mp3Link
to its src
attribute, and set the controls
attribute. The audio
element will play the mp3 in the mp3Link
in our browser, so we listen to the podcast.
Open the EpisodeCard.module.css
file and paste the styling code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.episodeCard {
display: flex;
border-bottom: 1px solid darkgray;
padding-bottom: 10px;
margin: 19px 0px;
}
.episodeCardImg {
width: 55px;
background-color: darkslategray;
margin-right: 7px;
}
.episodeCardDetails {
display: flex;
flex-direction: column;
}
.episodeCardName h4 {
font-weight: 300;
margin: 5px 0;
margin-top: 0;
}
.episodeCardAudio audio {
height: 20px;
}
Header component
Create a Header
folder at components
and create index.js
and Header.module.css
. Open the index.js
and paste the code:
1
2
3
4
5
6
7
8
import { header, headerName } from "./Header.module.css";
export default function Header() {
return (
<section className={header}>
<div className={headerName}>PodCast</div>
</section>
);
}
Just a simple UI that displays “PodCast”.
Open Header.module.css
and paste the styling code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
height: 54px;
background-color: black;
color: white;
display: flex;
align-items: center;
padding: 10px;
font-family: sans-serif;
width: 100%;
padding-left: 19%;
}
.headerName {
font-size: 1.8em;
}
PodCard component
Create a PodCard
folder at components
and create index.js
and PodCard.module.css
.
Open the index.js
and paste the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import styles from "./PodCard.module.css";
import Link from "next/link";
export default function PodCard({ podcast }) {
const { id, name, author, episodes, created_at, imageUrl } = podcast;
return (
<Link href={`podcast/${id}`}>
<div className={styles.podcard}>
<div
style={{ backgroundImage: `url(${imageUrl})` }}
className={styles.podcardimg}
></div>
<div className={styles.podcarddetails}>
<div className={styles.podcardname}>
<h3>{name}</h3>
</div>
<div className={styles.podcardauthor}>
<span>{author}</span>
</div>
<div className={styles.podcardminidet}>
<span>{episodes.length} episode(s)</span>
<span>Created {created_at}</span>
</div>
</div>
</div>
</Link>
);
}
The component expects a podcast
in its props. So we destructure it and also destructure id, name, author, episodes, created_at, imageUrl
from the podcast
object. Then, we simply render them on the UI.
The UI is simple, just a card that renders the mini-details of a podcast.
Open PodCard.module.css
and paste the styling code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.podcard {
display: flex;
border-bottom: 1px solid rgba(232, 232, 2321);
padding-bottom: 12px;
margin: 20px 0;
cursor: pointer;
}
.podcardimg {
width: 79px;
background-color: darkgray;
margin-right: 11px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.podcarddetails {
display: flex;
flex-direction: column;
}
.podcardname h3 {
margin-top: 0;
margin-bottom: 5px;
}
.podcardauthor {
color: darkgray;
padding: 7px 0;
}
.podcardminidet {
font-weight: 100;
}
.podcardminidet :nth-child(1) {
padding-right: 14px;
}
.podcardminidet :nth-child(2) {
padding-right: 3px;
}
globals.css
Now, we add our global styles. These styles affect the modal, input box, and button.
Open styles/globals.css
and paste the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-color: rgba(234, 238, 243, 1);
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
button {
height: 30px;
padding: 0px 15px 2px;
font-weight: 400;
font-size: 1rem;
line-height: normal;
border-radius: 2px;
cursor: pointer;
outline: 0px;
background-color: rgb(0, 126, 255);
border: 1px solid rgb(0, 126, 255);
color: rgb(255, 255, 255);
text-align: center;
}
.btn-danger {
background-color: rgb(195 18 18);
border: 1px solid rgb(195 18 18);
}
.header {
height: 54px;
background-color: black;
color: white;
display: flex;
align-items: center;
padding: 10px;
font-family: sans-serif;
width: 100%;
padding-left: 19%;
}
.headerName {
font-size: 1.8em;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1000;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.modal-backdrop {
opacity: 0.5;
width: inherit;
height: inherit;
background-color: grey;
position: fixed;
}
.modal-body {
padding: 5px;
padding-top: 15px;
padding-bottom: 15px;
}
.modal-footer {
padding: 15px 5px;
display: flex;
justify-content: space-between;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
}
.modal-content {
background-color: white;
z-index: 1;
padding: 10px;
margin-top: 10px;
width: 520px;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
input[type="text"] {
width: 100%;
padding: 9px;
font-weight: 400;
cursor: text;
outline: 0px;
border: 1px solid rgb(227, 233, 243);
border-radius: 2px;
color: rgb(51, 55, 64);
background-color: transparent;
box-sizing: border-box;
}
.label {
padding: 4px 0;
font-size: small;
color: rgb(51, 55, 64);
}
.content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.inputField {
margin: 3px 7px;
flex: 1 40%;
}
.disable {
opacity: 0.5;
cursor: not-allowed;
}
Now, our frontend is set, we will test it now.
Testing the app Now, let’s test our frontend app.
Now, go to the default /
page and click on the Add Podcast
button.
In the modal that shows up, add the data.
1
2
3
4
5
6
7
8
Name -> Vuejs Podcast
ImageUrl -> https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png
Author -> M. Hry
Episodes
--------
Episode Name -> Vuejs - Episode 1
MP3 Link -> mp3-link.mp3
Note: Add a real podcast mp3 link. This one is for mock.
Click on the “Add” button to add the episode on the “Add Episodes” section.
Add more episodes
1
2
3
4
5
6
7
8
Episode Name -> Vuejs - Episode 2
MP3 Link -> mp3-link.mp3
Episode Name -> Vuejs - Episode 3
MP3 Link -> mp3-link.mp3
Episode Name -> Vuejs - Episode 4
MP3 Link -> mp3-link.mp3
Click on the “Save Podcast” button to create a new podcast.
See the new “Vuejs Podcast” podcast is created. See that the PodCard
component says it has 4 episodes and was created by M. Hry
. 😁
Click on the podcast:
See the http://localhost:3000/podcast/18
page is loaded, show our "Veujs Podcast" in its full entirety.
All the episodes are listed with audio control present to play each podcast. Clicking on the play control will make the audio element play the mp3 file.
Let’s delete this podcast, click on the “Delete” button. A confirm dialog shows up.
Click on “OK”.
Boom!! The podcast is gone.
Add more features There are many features to be added to this app. You can add more functionality, for example,
You can learn more about UI/UK and Strapi by adding these features. I leave it to you to do that.
You can clone both the backend and frontend code from the below "Source code" section. I will like to see what you can come up with.
Source code
Conclusion We learned about Strapi, how to scaffold a Strapi project and how to build collections. Next, we learned how to establish relationships between collections in the UI.
Further, we created a Next.js project, built the components, and learned how to communicate with the Strapi API endpoints from a Next.js project. Strapi is fantastic, no doubt.
If you have any questions regarding this or anything I should add, correct, or remove, please leave a comment.
Author of "Understanding JavaScript", Chidume is also an awesome writer about JavaScript, Angular, React and other web technologies.