Social Media Web Application

A full-stack social networking web app that allows users to create accounts, share posts, like and comment on others’ posts, and view personal profiles.
Built with React, Node.js, Express, and MySQL, featuring JWT authentication for secure user sessions.

---

Features

• User Authentication
  Secure signup/login system using JSON Web Tokens (JWT) for session handling.

• User Profiles
  Each user has a personal profile page displaying their posts and basic information.

• Posts & Interactions
  Users can create posts, like other users’ posts, and comment on them in real time.

• Persistent Data
  All user and post data are stored in MySQL, accessed via RESTful API endpoints.

• Responsive Frontend Design
  Built with React, HTML, and CSS, focusing on a clean and intuitive user interface.

---

Tech Stack

Layer	Technologies
Frontend	React, HTML, CSS
Backend	Node.js, Express
Database	MySQL
Authentication	JSON Web Token (JWT)
Version Control	Git, GitHub

---

Setup Instructions

1. Clone the repository

git clone https://github.com/vanphuc1201/Social-Media-Web.git
cd Social-Media-Web

2. Install dependencies

Backend

cd server
npm install

Frontend

cd ../client
npm install

3. Configure the database

• Create a MySQL database (e.g., socialmedia_db).
• Update the connection settings in the backend configuration file (e.g., config/db.js or .env).

4. Run the application

Backend

cd server
npm start

Frontend

cd ../client
npm start

Then open your browser and go to: 👉 http://localhost:3000

Screenshots

Project Structure

Social-Media-Web/
│
├── client/                 # React frontend
│   ├── public/
│   └── src/
│       ├── components/
│       ├── helpers/
│       ├── pages/
│       └── styles/
│
├── server/                 # Node.js + Express backend
│   ├── routes/
│   ├── middlewares/
│   ├── models/
│   └── config/
│
└── README.md

Authentication Flow

• User registers or logs in using credentials.
• Server validates credentials and returns a JWT token.
• Token is stored client-side.
• Protected routes require token verification for access.