Social Media Web App Tutorial

<h2>Introduction</h2>
<p>In this tutorial, you'll learn how to create a social media web application from scratch using React for frontend and Node.js/Express with MongoDB for backend. The app will include authentication, posts, likes, comments, and profile management.</p>

<h3>Tech Stack</h3>
<ul>
  <li>React – Frontend UI</li>
  <li>Node.js & Express – Backend API</li>
  <li>MongoDB – Database</li>
  <li>JWT – Authentication</li>
  <li>Tailwind CSS / Styled Components – Styling</li>
</ul>

<h3>Project Setup</h3>
<ul>
  <li>Initialize React frontend using Vite or create-react-app</li>
  <li>Initialize Node.js backend with Express</li>
  <li>Setup folder structure: /client and /server</li>
</ul>

<h3>Backend Development</h3>
<pre><code>{`// server.js

const express = require('express'); const mongoose = require('mongoose'); const cors = require('cors'); const app = express();

app.use(cors()); app.use(express.json());

mongoose.connect('mongodb://localhost/social-app', { useNewUrlParser: true, useUnifiedTopology: true, });

// Example route app.get('/posts', async (req, res) => { const posts = await Post.find().sort({ createdAt: -1 }); res.json(posts); });

app.listen(5000, () => console.log('Server running on port 5000')); `}</code></pre>

<h3>Frontend Development</h3>
<pre><code>{`// Posts.js

import { useEffect, useState } from 'react';

export default function Posts() { const [posts, setPosts] = useState([]);

useEffect(() => { fetch('http://localhost:5000/posts') .then(res => res.json()) .then(data => setPosts(data)); }, []);

return ( <div> {posts.map(post => ( <div key={post._id}> <h3>{post.title}</h3> <p>{post.content}</p> </div> ))} </div> ); } `}</code></pre>

<h3>Features</h3>
<ul>
  <li>User registration and login with JWT authentication</li>
  <li>Create, edit, and delete posts</li>
  <li>Like and comment on posts</li>
  <li>User profile pages</li>
  <li>Responsive design with Tailwind CSS</li>
</ul>

<h3>Deployment</h3>
<ul>
  <li>Deploy backend on Render / Railway / Heroku</li>
  <li>Deploy frontend on Vercel / Netlify</li>
  <li>Ensure frontend connects to backend live URL</li>
</ul>

<h3>Conclusion</h3>
<p>By completing this tutorial, you will have a full-featured social media web app ready for deployment, learning both frontend and backend fullstack development along the way.</p>