A modern, responsive, and feature-rich social media web application built with the MERN (MongoDB, Express.js, React.js, Node.js) stack. This project provides a complete foundation for a social network, allowing users to sign up, create posts with images, interact with others through likes and comments, and manage their profiles.

It's an ideal portfolio project for full-stack developers looking to showcase their skills in building scalable, authenticated, and interactive web applications with RESTful APIs and modern frontend practices.

• 🔐 Secure JWT Authentication: Robust user registration and login system using JSON Web Tokens (JWT) for secure, stateless authentication.
• 🌐 Google Authentication: Option to sign up or log in seamlessly using a Google account for quick and easy access.
• 📝 Full CRUD for Posts: Users can easily Create, Read, Update, and Delete their posts.
• ❤️ Interactive Engagement: Like and unlike posts, and add comments to foster user interaction.
• 🧑‍💻 User Profiles: Every user has a dedicated profile page displaying their posts and information.
• 🖼️ Image Uploads: Seamlessly upload and attach images to posts.
• 📱 Fully Responsive Design: A clean and modern UI built with Material-UI that looks great on desktops, tablets, and mobile devices.
• ⚡ Optimized Backend: A fast and efficient RESTful API built with Node.js and Express.js, connected to a MongoDB database.

This project is built using a modern and powerful technology stack:

Follow these instructions to get the project up and running on your local machine.

Make sure you have the following software installed:

• Node.js (v14 or higher)
• npm (comes with Node.js) or Yarn
• Git
• A MongoDB database instance (either locally or on a cloud service like MongoDB Atlas)

1. Clone the Repository Open your terminal and clone the repository:

git clone https://github.com/imvikrammaurya/social-media.git
cd social-media

2. Setup the Backend Server Navigate to the server directory, install dependencies, and set up your environment variables.

# Move into the server directory
cd server

# Install server dependencies
npm install

Next, create a .env file in the /server directory and add the following variables. You will need to get Google OAuth credentials from the Google Cloud Console.

# .env
# Server Port
PORT=5000

# MongoDB Connection
MONGO_URI=your_mongodb_connection_string

# JWT Secret
JWT_SECRET=your_super_secret_key_for_jwt

3. Setup the Frontend Client Open a new terminal window, navigate to the client directory, and install its dependencies.

# From the root directory (social-media/), move into the client directory
cd client

# Install client dependencies
# The --legacy-peer-deps flag is used to bypass peer dependency conflicts.
npm install --legacy-peer-deps

4. Run the Application You need to run both the backend and frontend servers simultaneously in their respective terminals.

• In your backend (/server) terminal, run:

  npm start

  The server should now be running on http://localhost:5000.

• In your frontend (/client) terminal, run:

  npm start

  The React application will open automatically in your browser at http://localhost:3000.

🎉 Congratulations! The application is now running locally.

HomePage Without Signup

SignUp Page

Login Page

HomePage After Login

Creating Post

Post Created

After Deleting Post

Vikram Maurya

This application was created as my 5th-semester final project while pursuing a Bachelor of Computer Application.

• GitHub: @imvikrammaurya
• LinkedIn: linkedin.com/in/imvikrammaurya

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.