Next.js + Node.js Full-Stack Social Media 2024

Technology Stack

Client

• 💎 Next.js
• 💾 Redux toolkit
• ⚡ SWR
• 🔍 Axios
• 📞 Socket.io-client
• ✨ React-hook-form

Server

• 🧱 Express
• 🔑 JWT
• 💾 MongoDB
• 📞 Socket.io

Testing

• ✅ Cypress

Site Functional

• Registration/Authorization
• View a feed of recommendations with unique content collected for the user
• Add/Remove from friends
• Subscribe/Unsubscribe from users
• Create your own posts
• Mark posts as liked and add to favorites
• Remove from favorites and unlike
• Pagination of the feed of posts, posts in the user profile
• Create a comment, delete, like and dislike
• Share not only photos but also videos
• Search for friends
• Create chats with another user
• Receive messages from users through the notification shade
• Change your account details
• Automatic deletion of data (pictures, videos) when deleting a user or posts
• Log out of your account

Security

The project uses the "bcrypt" library, which encrypts the data before sending it to the database, and also uses JWT.

Project gallery "PC version"

Project gallery "Mobile version"

Getting Started

You can just fork or clone this repository and use it as is.

✨ It just works. ✨

Configure

Open the .env file and replace the data with yours (ATTENTION! The .env file can be found on both the client and the server)

Start the project

npm i

cd client
npm run dev

cd server
npm run dev

Important

When receiving a message from socket paths, the message may be duplicated, this happens due to the "Strict mode" enabled in the project settings. To disable it, go to the "next.config.mjs" file and add the reactStrictMode field to it: false

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    clientUrl: 'http://localhost:3000',
    serverUrl: 'http://localhost:8080/',
  },
  images: {
    remotePatterns: [{ hostname: 'localhost' }],
  },
  reactStrictMode: false,
}

export default nextConfig