🍒 Cherry Berry

A modern full-stack social media platform with real-time messaging, media sharing, and responsive UI.

---

📸 Preview

Feed & Social Experience

---

Real-Time Chat

---

Profile & User System

---

Responsive Mobile Experience

---

✨ Features

• 🔐 Authentication System

  • Email/Password login
  • Google OAuth
  • JWT authentication

• 📝 Social Posting

  • Text posts
  • Image uploads
  • Video uploads

• 💬 Real-Time Messaging

  • Socket.IO powered chat
  • Read receipts
  • Message editing/deleting
  • Live updates

• 👤 User Profiles

  • Profile pictures
  • Bio system
  • User onboarding

• 📱 Fully Responsive

  • Desktop UI
  • Mobile optimized
  • Smooth layouts

---

🛠 Tech Stack

Frontend

• React 19
• Vite
• Axios
• Socket.IO Client
• Google OAuth

Backend

• Node.js
• Express
• MySQL
• Sequelize ORM
• Socket.IO
• JWT Authentication
• Multer

---

⚙️ Setup Instructions

Prerequisites

• Node.js v16+
• MySQL

---

Backend Setup

1. Navigate to backend

cd backend

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file:

PORT=3002
DB_HOST=localhost
DB_USER=your_mysql_user
DB_PASSWORD=your_mysql_password
DB_NAME=cherry_berry
JWT_SECRET=your_jwt_secret_key
FRONTEND_URL=http://localhost:5173
GOOGLE_CLIENT_ID=your_google_client_id

4. Run migrations

node add-read-status.js
node update-message-schema.js

5. Start backend server

node server.js

---

Frontend Setup

1. Navigate to frontend

cd frontend

2. Install dependencies

npm install

3. Configure environment variables

VITE_API_URL=http://localhost:3002
VITE_GOOGLE_CLIENT_ID=your_google_client_id

4. Start development server

npm run dev

---

📱 Mobile Access

Run:

npm run dev

Then access:

http://YOUR_IP:5173

from devices on the same network.

---

🗄 Database Schema

Main Tables

Table	Description
USER	User accounts & profiles
POST	Posts and media
CHAT	Chat conversations
MESSAGE	Messages with read status

---

📂 Project Structure

cherry-berry/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── middleware/
│   │   └── utils/
│   ├── uploads/
│   └── server.js
│
└── frontend/
    ├── src/
    │   ├── components/
    │   ├── context/
    │   ├── services/
    │   └── utils/
    └── public/

---

🚀 Future Improvements

• Notifications system
• Stories feature
• Video calling
• Dark mode
• Post likes/comments
• PWA support

---

📄 License

This project is licensed under the MIT License.MIT

---

👨‍💻 Authors

Made by:

• @srijii
• @LamiyaRasheed