Building & Deploying a MERN STACK Blockchain Music Artists Social Media Dapp
Decentralized applications (Dapps), as we explore the creation and deployment process of a MERN STACK Blockchain Music Artists Social Media Dapp. In this tutorial, we'll walk you through each step, from setting up your development environment to integrating blockchain technology for secure and transparent interactions. Join us as we combine the power of MongoDB, Express.js, React, Nextjs and Node.js with blockchain to revolutionize the way music artists connect with their audience. Whether you're a beginner or an experienced developer, this guide will equip you with the knowledge and skills to bring your Dapp ideas to life. Get ready to innovate and transform the social media landscape with blockchain technology
Kindly follow the following Instructions to run the project in your system and install the necessary requirements
WATCH: Setup & Demo Of Project
GET: VsCode Editor
NodeJs: v21.6.2 / latest version
NPM: 10.5.0
GET: https://www.figma.com/file/HutF73HZARM0ymnYKzbhw2/Untitled?type=design&node-id=0%3A1&mode=design&t=aUN0Sq6bgC8D89xp-1
GET: DATABASE_URL
GET: DATAMASE_PASSWORD
GET: API_KEY
GET: SECRECT_KEY
headers: {
pinata_api_key: `YOUR_API_KEY`,
pinata_secret_api_key: `YOUR_SECRECT_KEY`,
"Content-Type": "multipart/form-data",
},
headers: {
pinata_api_key: `YOUR_API_KEY`,
pinata_secret_api_key: `YOUR_SECRECT_KEY`,
"Content-Type": "application/json",
},
GET: Project Starter File DownloadAll you need to follow the complete project and follow the instructions which are explained in the tutorial by Daulat
If you download the final source code then you can follow the following instructions to run the Dapp successfully
WATCH: Setup & Demo Of Project
Download the Final Source Code
GET: VsCode Editor
NodeJs: v21.6.2 / latest version
NPM: 10.5.0
Alchemy will provide you with some free test faucets which you can transfer to your wallet address for deploying the contract
Get: Free Test Faucets
We are using RemixID for deploying the contract and generation of the ABI in the project, but you can use any other tools like Hardhat, etc.
OPEN: RemixID
OPEN: Polygon Amoy
CREATE ACCOUNT: https://formspree.io/
const [state, handleSubmit] = useForm("YOUR_KEY"); {
"name": "music-dapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": " nodemon index.js",
"build": "next build",
"start": "NODE_ENV=production nodemon index.js",
"lint": "next lint",
"server": "node index.js",
"prod": "NODE_ENV=production nodemon index.js"
},
"dependencies": {
"@formspree/react": "^2.5.1",
"@next/font": "14.0.3",
"@stripe/stripe-js": "^1.54.2",
"axios": "^1.6.8",
"bcrypt": "^5.1.1",
"cookie-parser": "^1.4.6",
"dotenv": "^16.3.1",
"ethers": "^5.5.1",
"express": "^4.18.2",
"js-cookie": "^3.0.5",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.0.3",
"multer": "^1.4.5-lts.1",
"next": "14.0.3",
"nodemon": "^3.0.2",
"path": "^0.12.7",
"react": "18.2.0",
"react-audio-player": "^0.17.0",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.12.0",
"stripe": "^14.16.0",
"wavesurfer.js": "^7.7.5",
"web3modal": "^1.9.5"
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent