Steps to Setup The Backend
Step 1: Create a new directory for the backend and navigate to the backend directory
mkdir music-backend
cd music-backend
Step 2: Initialize a new Node.js project
npm init -y
Step 3: Install the necessary packages/libraries in your project using the following commands.
npm install express mongoose dotenv cors
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"bcryptjs": "^2.4.3",
"cors": "^2.8.5",
"express": "^4.18.3",
"mongoose": "^8.2.2"
}
Example: Implementation to setup the frontend for the music discovery app.
// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();
const app = express();
const PORT = process.env.PORT || 3001;
app.use(express.json());
app.use(cors());
// MongoDB connection
mongoose.connect("mongodb://localhost:27017/musicdiscovery",
{
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error',
console.error.bind(
console, 'MongoDB connection error:'));
db.once('open',
() => console.log('Connected to MongoDB'));
// Music model
const musicSchema = new mongoose.Schema({
title: String,
artist: String,
genre: String,
releaseDate: Date,
songUrl: String, // Added songUrl field
});
const Music = mongoose.model('Music', musicSchema);
// Routes
app.get('/api/music', async (req, res) => {
try {
const { search } = req.query;
let query = {};
if (search) {
query = {
$or: [
// Case-insensitive search for title
{ title: { $regex: search, $options: 'i' } },
// Case-insensitive search for artist
{ artist: { $regex: search, $options: 'i' } },
// Case-insensitive search for genre
{ genre: { $regex: search, $options: 'i' } },
],
};
}
const music = await Music.find(query);
res.json(music);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
app.post('/api/music', async (req, res) => {
try {
const {
title, artist, genre,
releaseDate, songUrl } = req.body;
const newMusic =
new Music({
title, artist, genre,
releaseDate, songUrl
});
await newMusic.save();
res.status(201).json(newMusic);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// Edit music endpoint
app.put('/api/music/:id', async (req, res) => {
try {
const { id } = req.params;
const {
title, artist, genre,
releaseDate, songUrl
} = req.body;
const updatedMusic =
await Music.findByIdAndUpdate(
id, {
title, artist, genre,
releaseDate, songUrl
}, { new: true });
res.json(updatedMusic);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// Delete music endpoint
app.delete('/api/music/:id', async (req, res) => {
try {
const { id } = req.params;
await Music.findByIdAndDelete(id);
res.json({ message: 'Music deleted successfully.' });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// Start server
app.listen(PORT,
() => console.log(`Server running on port ${PORT}`));
Step to Run Application: Run the application using the following command from the root directory of the project
node server.js
Music Discovery App with MERN Stack
In today’s digital age, music discovery has become an integral part of our lives. With the rise of streaming platforms and personalized recommendations, users are constantly seeking new music experiences. In this article, we’ll delve into the creation of a Music Discovery App using the MERN stack (MongoDB, Express.js, React.js, Node.js). This comprehensive guide will walk you through the process of building a feature-rich web application for exploring and discovering music.
Output Preview:
Contact Us