A full-stack social media application with real-time messaging, post sharing, and user authentication built with React and Golang.

🌍 Live Website: https://maqsatto.tech/

• Overview
• Features
• Screenshots
• Tech Stack
• Architecture
• Getting Started
  • Prerequisites
  • Installation
  • Configuration
  • Running the Application
• Usage
• Contributing
• Contact

Social Media Platform is a modern, full-featured social networking application that enables users to connect, share, and communicate in real-time. Built with cutting-edge technologies, it provides a seamless experience for creating posts, engaging with content, and messaging friends.

• 🚀 Real-time messaging with WebSocket
• 🔐 Secure authentication with Google OAuth and JWT
• 📱 Responsive design for all devices
• ☁️ Cloud-based image storage
• 🐳 Docker support for easy deployment

• View, create, like, comment on, and share posts
• Interactive feed with real-time updates

• Customize your profile with photo uploads
• Update account settings and change password

• Search for friends and start conversations
• Instant messaging powered by WebSocket

• Manual sign up/sign in
• Google OAuth integration
• reCAPTCHA protection
• Password recovery via email verification

• Submit questions or feedback directly through the platform

• 🏠 Landing Page: Watch on YouTube
• 🔐 Login Page: Watch on YouTube
• 📱 Feed Page: Watch on YouTube
• 👤 Profile Page: Watch on YouTube
• 💬 Chat Page: Watch on YouTube
• ⚙️ Settings Page: Watch on YouTube

SocialApp/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── pages/         # Page components
│   │   ├── services/      # API services
│   │   └── utils/         # Utility functions
│   ├── .env               # Frontend environment variables
│   └── package.json
│
├── server/                # Golang backend
│   ├── cmd/              # Application entry point
│   ├── internal/         # Internal packages
│   │   ├── handlers/    # HTTP handlers
│   │   ├── models/      # Data models
│   │   ├── services/    # Business logic
│   │   └── middleware/  # Middleware functions
│   ├── .env             # Backend environment variables
│   └── go.mod
│
├── docker-compose.yml    # Docker configuration
└── README.md            # This file

Before you begin, ensure you have the following installed:

• Node.js (v16.x or higher) - Download
• npm or yarn - Comes with Node.js
• Go (v1.19 or higher) - Download
• PostgreSQL (v13 or higher) - Download
• Docker Desktop (optional) - Download

1. Clone the repository

mkdir folder_name
cd folder_name
git clone https://github.com/MaqsattoTeam/SocialApp
cd SocialApp

2. Install dependencies

Frontend:

cd client
npm install

Backend:

cd server
go mod download

Create a .env file in the client directory:

VITE_API_URL=http://localhost:8080
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key

Create a .env file in the server directory:

JWT_SECRET=your_jwt_secret_key
PORT=8080
DSN=your_postgresql_connection_string
CLOUDINARY_URL=your_cloudinary_url
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URL=your_google_redirect_url
RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key
MAILTRAP_TOKEN=your_mailtrap_token
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=[email protected]
SMTP_PASSWORD=your_16_character_app_password

Create a PostgreSQL database:

CREATE DATABASE socialapp;

The application will automatically run migrations on startup.

Terminal 1 - Start Frontend:

cd client
npm run dev

Frontend will run on: http://localhost:5173

Terminal 2 - Start Backend:

cd server
air  # Hot reload (recommended)

Or without hot reload:

cd server/cmd
go run main.go

Backend will run on: http://localhost:8080

If you have Docker Desktop installed:

docker compose pull
docker compose up

This will start:

• Frontend: http://localhost:3000
• Backend: http://localhost:8080
• PostgreSQL: http://localhost:5432

To stop:

docker compose down

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

MaqsattoTeam

• GitHub: @MaqsattoTeam
• Project Link: https://github.com/MaqsattoTeam/SocialApp

For questions or feedback, use the contact form within the application or reach out to the team.

• Never commit .env files to version control
• Use strong, unique values for JWT_SECRET
• Enable 2FA for production Google OAuth

• For Gmail SMTP, generate an App Password
• Use Mailtrap for development/testing
• Switch to production SMTP for deployment

• Ensure PostgreSQL is running before starting the backend
• Database migrations run automatically on startup
• Backup your database regularly