Skip to content

daulathussain/Web3-Social-Media-Starter-File

BranchesTags

Repository files navigation

SocialDApp - Decentralized Social Media Dapp

Build & Deploy Decentralized (Web3) Social Media DApp | Solidity, Next.js, Hardhat, Wagmi Tutorial (Full Stack Web3 Project)

A beautiful, feature-rich decentralized social media platform built with Next.js, Tailwind CSS, and integrated with your Solidity smart contract. Users can create profiles, share posts with media, follow each other, join groups, and send messages - all stored on the blockchain.

Project Overview

alt text

Instruction

Kindly follow the following Instructions to run the project in your system and install the necessary requirements

Setup Video

🚀 Features

Learn how to build and deploy a fully functional Blockchain Social Media DApp using Solidity, Next.js, Hardhat, and Wagmi! In this complete Web3 full-stack tutorial, you'll create a decentralized platform where users can create posts, like, comment, and connect their wallets—all on-chain.

🔧 What You'll Learn:

  • Smart contract development with Solidity & Hardhat
  • Connecting your DApp with Wagmi hooks and Ethers.js
  • Building a modern React/Next.js frontend
  • Storing posts on the blockchain
  • Connecting and authenticating with MetaMask
  • Deploying your smart contracts to Ethereum testnets
  • Hosting your Web3 app on Vercel or Netlify

🚀 Whether you're a beginner or intermediate blockchain developer, this project will level up your skills in decentralized social apps and Web3 UI/UX design.

#Web3 #BlockchainDapp #Solidity #Nextjs #Wagmi #Hardhat #Crypto #SocialMediaDapp #Ethereum #BuildInPublic #DecentralizedApps

  • User Profiles: Create and manage blockchain-based user profiles
  • Posts & Media: Share text, images, and videos via IPFS
  • Social Interactions: Like, comment, follow/unfollow users
  • Groups: Create and join community groups (admin only)
  • Direct Messaging: Send private messages between users
  • Admin Panel: Complete contract management for administrators
  • Responsive Design: Beautiful Facebook-like UI that works on all devices
  • IPFS Integration: Decentralized media storage via Pinata

🛠 Technology Stack

  • Frontend: Next.js 13, React 18, Tailwind CSS
  • Blockchain: Ethereum/Holesky Testnet, Ethers.js
  • Wallet Integration: RainbowKit, Wagmi
  • Storage: Pinata IPFS
  • Styling: Tailwind CSS with custom components
  • Icons: React Icons
  • Notifications: React Hot Toast

📋 Prerequisites

Before you begin, ensure you have:

  • A wallet (MetaMask recommended)
  • Pinata account for IPFS storage
  • WalletConnect Project ID
  • Your deployed smart contract address

CHECK ADVANCE SOCIAL MEDIA DAPP

  PROJECT: ADVANCE SOCIAL MEDIA DAPP
  Code: https://www.theblockchaincoders.com/sourceCode/build-social-media-website-using-html-css-javascript
  VIDEO: https://youtu.be/U2tFXrwHDQ0?si=nlo7CpbbFidFzce4

Deploying Dapp

  WATCH: Hostinger
  Get : Discount 75%
  URL: https://www.hostg.xyz/aff_c?offer_id=6&aff_id=139422

MULTI-CURRENCY ICO DAPP

  PROJECT: MULTI-CURRENCY ICO DAPP
  Code: https://www.theblockchaincoders.com/sourceCode/multi-currency-ico-dapp-using-next.js-solidity-and-wagmi
  VIDEO: https://youtu.be/j8NO8ea5zVo?si=jCmvfXmpmefwjhO5

Install Vs Code Editor

  GET: VsCode Editor
  URL: https://code.visualstudio.com/download

NodeJs & NPM Version

  NodeJs: v18.17.1 / LATEST
  NPM: 8.19.2
  URL: https://nodejs.org/en/download
  Video: https://youtu.be/PIR0oBVowXU?si=9eNdR29u37F2ujJJ

FINAL SOURCE CODE

  SETUP VIDEO: https://youtu.be/2MZZ4MDlKh8?si=s037n78lvBXAYVvs
  URL: https://www.theblockchaincoders.com/sourceCode/build-and-deploy-decentralized-(web3)-social-media-dapp-or-solidity-next.js-hardhat-wagmi-tutorial-(full-stack-web3-project)

All you need to follow the complete project and follow the instructions which are explained in the tutorial by Daulat

Final Code Instruction

If you download the final source code then you can follow the following instructions to run the Dapp successfully

PINATA IPFS

  OPEN: PINATA.CLOUD
  URL:https://pinata.cloud/

reown

  OPEN: WALLET CONNECT
  URL: https://docs.reown.com/cloud/relay

GOOGLE API KEY

  OPEN: GOOGLE API KEY
  URL: ## GOOGLE API KEY: https://aistudio.google.com/app/apikey

FORMSPREE

  OPEN: FORMSPREE
  URL: https://formspree.io/

ALCHEMY

  OPEN: ALCHEMY.COM
  URL: https://www.alchemy.com/

Important Links

Authors

🔧 Installation & Setup

1. Clone and Install Dependencies

# Install dependencies
npm install

# or
yarn install

2. Environment Configuration

Create a .env.local file in the root directory:

# Wallet Connect & Blockchain Configuration
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id
NEXT_PUBLIC_RPC_URL=https://ethereum-holesky-rpc.publicnode.com
NEXT_PUBLIC_CHAIN_ID=17000
NEXT_PUBLIC_CHAIN_NAME=Holesky Testnet
NEXT_PUBLIC_CHAIN_SYMBOL=ETH
NEXT_PUBLIC_BLOCK_EXPLORER=https://holesky.etherscan.io
NEXT_PUBLIC_PLATFORM_NAME=SocialDApp

# Smart Contract Configuration
NEXT_PUBLIC_CONTRACT_ADDRESS=your_deployed_contract_address

# Pinata IPFS Configuration
NEXT_PUBLIC_PINATA_API_KEY=your_pinata_api_key
NEXT_PUBLIC_PINATA_SECRET_API_KEY=your_pinata_secret_api_key
NEXT_PUBLIC_PINATA_JWT=your_pinata_jwt_token
NEXT_PUBLIC_PINATA_GATEWAY=https://gateway.pinata.cloud

3. Get Required API Keys

WalletConnect Project ID:

  1. Visit WalletConnect Cloud
  2. Create a new project
  3. Copy your Project ID

Pinata API Keys:

  1. Visit Pinata
  2. Create an account and navigate to API Keys
  3. Generate new API keys
  4. Copy API Key, Secret, and JWT token

4. Update Contract Configuration

  1. Replace your_deployed_contract_address with your actual contract address
  2. Ensure the ABI in lib/contractABI.js matches your deployed contract
  3. Update chain configuration if using a different network

🚀 Running the Application

Development Mode

npm run dev
# or
yarn dev

Visit http://localhost:3000 to see your application.

Production Build

npm run build
npm start
# or
yarn build
yarn start

📁 Project Structure

├── components/
│   ├── Layout/
│   │   ├── Layout.js          # Main layout wrapper
│   │   ├── Header.js          # Navigation header
│   │   └── Sidebar.js         # Sidebar navigation
│   ├── Posts/
│   │   ├── CreatePost.js      # Post creation component
│   │   └── PostCard.js        # Individual post display
│   ├── Groups/
│   │   └── CreateGroupModal.js # Group creation modal
│   └── UI/
│       └── LoadingSpinner.js  # Reusable loading component
├── contexts/
│   └── UserProfileContext.js  # User profile context
├── lib/
│   ├── config.js              # Wagmi configuration
│   ├── constants.js           # App constants
│   ├── contractABI.js         # Smart contract ABI
│   ├── contract.js            # Contract service layer
│   └── pinata.js              # IPFS service layer
├── pages/
│   ├── _app.js                # Next.js app wrapper
│   ├── index.js               # Home page
│   ├── users.js               # Users discovery page
│   ├── groups.js              # Groups page
│   ├── admin.js               # Admin panel
│   └── profile/
│       └── setup.js           # Profile setup page
└── styles/
    └── globals.css            # Global styles

🔑 Key Features Walkthrough

For Users:

  1. Connect Wallet - Use the connect button in the header
  2. Setup Profile - Create your username (one-time setup)
  3. Create Posts - Share text, images, or videos
  4. Social Features - Like, comment, follow other users
  5. Join Groups - Participate in community groups
  6. Direct Messages - Send private messages

For Admins:

  1. Access Admin Panel - Available at /admin for contract owner
  2. Monitor Stats - View total users, posts, groups
  3. Contract Controls - Pause/unpause contract functionality
  4. Emergency Functions - Withdraw funds, deactivate groups

🎨 Customization

Styling

  • Modify tailwind.config.js for theme customization
  • Update styles/globals.css for global style changes
  • Component-specific styles are in individual component files

Features

  • Add new pages in the pages/ directory
  • Extend contract service in lib/contract.js
  • Add new UI components in components/

🔒 Security Considerations

  • All sensitive data is stored on-chain or IPFS
  • Private keys never leave the user's wallet
  • Admin functions are restricted to contract owner
  • Input validation on all user interactions

🐛 Troubleshooting

Common Issues:

  1. Wallet Connection Issues

    • Ensure correct network is selected
    • Check RPC URL in environment variables

  2. IPFS Upload Failures

    • Verify Pinata API keys
    • Check file size limits (10MB default)

  3. Transaction Failures

    • Ensure sufficient gas fees
    • Check if contract is paused

  4. Profile Not Loading

    • Confirm contract address is correct
    • Verify user has created a profile

📝 Smart Contract Functions Used

The frontend integrates with all major contract functions:

  • Profile Management: createProfile, getProfile
  • Posts: createPost, likePost, addComment, editPost, deletePost
  • Social: followUser, unfollowUser, checkIsFollowing
  • Groups: createGroup, joinGroup, sendGroupMessage
  • Messaging: sendDirectMessage, getDirectMessages
  • Admin: pause, unpause, emergencyWithdraw

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues:

  1. Check this README for common solutions
  2. Ensure all environment variables are set correctly
  3. Verify your smart contract is deployed and accessible
  4. Check browser console for error messages

🎉 Deployment

Vercel (Recommended)

  1. Connect your GitHub repository to Vercel
  2. Add environment variables in Vercel dashboard
  3. Deploy automatically on every push

Other Platforms

The app can be deployed on any platform that supports Next.js:

  • Netlify
  • AWS Amplify
  • Heroku
  • DigitalOcean App Platform

Happy Building! 🚀

Your decentralized social media platform is ready to launch. Users can now create profiles, share content, and build communities entirely on the blockchain!

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages