Steps to Create the Frontend and Installing Modules
Step 1: Create the frontend repository named client in the main repository.
mkdir client
cd client
Step 2: Create React project using following command.
npx create-react-app .
Step 3: Install necessary dependencies in your application using following command.
npm install axios react-router-dom
Project Structure:
project structure
The updated dependencies in package.json file of frontend will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Below is an example to show the frontend of Podcast Platform application.
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}
.logo img {
width: 70px;
height: 60px;
margin-bottom: 10px;
}
.logo span {
font-size: 1.2rem;
color: #fff;
text-decoration: none;
margin-left: -70px;
margin-top: 80px;
}
.saved-link a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
}
.home {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.podcast {
width: 28%;
/* Adjust width to fit three columns in one row */
background-color: #f4f4f4;
padding: 20px;
margin: 10px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.saved {
padding: 20px;
}
.column {
width: 45%;
/* Each column takes up 1/3 of the row */
float: left;
padding: 10px;
box-sizing: border-box;
/* Include padding and border in width */
}
.saved {
padding: 20px;
}
#remove_btn {
background-color: red;
}
//Home.js
import React, {
useState,
useEffect
} from 'react';
import axios from 'axios';
const Home = () => {
const [podcasts, setPodcasts] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/podcasts')
.then(response => setPodcasts(response.data))
.catch(error => console.error(
'Error fetching podcasts:', error));
}, []);
const handleSave = (id) => {
// Call PUT function to save the podcast
axios.put(`http://localhost:5000/podcasts/${id}`,
{ saved: true })
.then(response => {
console.log(`Successfully saved podcast with ID: ${id}`);
// Update the saved state locally
setPodcasts(prevPodcasts => {
return prevPodcasts.map(podcast => {
if (podcast._id === id) {
return { ...podcast, saved: true };
}
return podcast;
});
});
})
.catch(error => console.error(
`Error saving podcast with ID ${id}:`, error));
};
return (
<div className="home">
{podcasts.map(podcast => (
<div key={podcast._id} className="podcast">
<h2>{podcast.title}</h2>
<p>{podcast.description}</p>
<audio controls>
<source src={podcast.audioFile} type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<button
onClick={() => handleSave(podcast._id)}
disabled={podcast.saved}>
{podcast.saved ? 'Saved' : 'Save'}
</button>
</div>
))}
</div>
);
};
export default Home;
//App.js
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
import Home from "./components/Home.js";
import Saved from "./components/Saved.js";
import Navbar from "./components/Navbar.js";
import "./style.css";
const App = () => {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/saved" element={<Saved />} />
</Routes>
</Router>
);
};
export default App;
//Saved.js
import React, {
useState,
useEffect
} from 'react';
import axios from 'axios';
const Saved = () => {
const [savedPodcasts, setSavedPodcasts] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/podcasts')
.then(response => {
// Filter the podcasts that are saved
const savedPodcasts = response.data.filter(
podcast => podcast.saved);
setSavedPodcasts(savedPodcasts);
})
.catch(error => console.error(
'Error fetching saved podcasts:', error));
}, []);
const handleRemove = (id) => {
axios.put(`http://localhost:5000/podcasts/${id}`,
{ saved: false })
.then(response => {
console.log(`Successfully removed podcast with ID: ${id}`);
// Update the saved state locally
setSavedPodcasts(prevSavedPodcasts => {
return prevSavedPodcasts.filter(
podcast => podcast._id !== id);
});
})
.catch(error => console.error(
`Error removing podcast with ID ${id}:`, error));
};
return (
<div className="saved">
<h1>Saved Podcasts</h1>
<div className='home'>
{savedPodcasts.map(podcast => (
<div key={podcast._id} className="podcast">
<h2>{podcast.title}</h2>
<p>{podcast.description}</p>
<audio controls>
<source src={podcast.audioFile} type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<button id="remove_btn"
onClick={() => handleRemove(podcast._id)}>
Remove
</button>
</div>
))}</div>
</div>
);
};
export default Saved;
//App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Saved from './components/Saved';
import Navbar from './components/Navbar';
import './style.css';
const App = () => {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/saved" element={<Saved />} />
</Routes>
</Router>
);
};
export default App;
Start the project using the given command:
npm start
output
Podcast Platform with MERN Stack
In this article, we’ll be utilizing the MERN Stack (MongoDB, Express.js, React, Node.js) to develop a comprehensive podcast platform. This project aims to provide a thorough understanding of full-stack development by focusing on backend infrastructure with Express.js and MongoDB for data storage. We’ll cover the creation and management of user profiles, podcast episodes, and interaction data. Additionally, we’ll explore front-end functionality using React to ensure a seamless user experience.
Output Preview: Let us have a look at how the final output will look like.
output