A full-stack, AI-powered social media platform built on React frontend and Go backend for users to share images and videos. Users can register, create posts with images/videos, generate images with OpenAI DALL-E 3, and search or browse a shared collection.

• Account
  • Register and sign in with JWT-based auth; stay signed in across sessions.
• Create content
  • Manual posts: Add a message and upload an image or video.
  • AI images: Enter a text prompt; the app uses DALL-E 3 to generate an image, then you can save it as a post.
• Collection
  • View all posts in a photo gallery with lightbox (fullscreen, zoom, slideshow, thumbnails).
  • Search by keywords (in post text) or by username.
  • Delete your own posts.
• UI/UX
  • Responsive layout, dark theme, nav bar, and toast notifications for actions.

Backend API: POST /signup, POST /signin, POST /upload, GET /search, DELETE /post/:id. Protected routes use Authorization: Bearer <token>.

.
├── backend/              # Go API service
│   ├── backend/         # Elasticsearch & GCS clients
│   ├── conf/            # deploy.yaml (gitignored), deploy.yaml.example
│   ├── constants/       # Index names etc.
│   ├── handler/         # HTTP handlers & router
│   ├── model/           # Data models
│   ├── service/         # Business logic
│   ├── util/            # Config loading
│   ├── main.go
│   ├── app.yaml         # App Engine config
│   └── Dockerfile
├── public/              # Static assets for frontend
├── src/                 # React app
│   ├── components/
│   ├── styles/
│   ├── constants.js
│   └── index.js
├── .env.example         # Frontend env template
├── package.json         # Frontend deps + root scripts
└── README.md

• Node.js 14+ and npm
• Go 1.25+ (for backend)
• Elasticsearch 7.x (for backend)
• Google Cloud project with GCS bucket (for backend media storage)
• OpenAI API key (for DALL-E 3 image generation in frontend)

git clone https://github.com/leo-Zhizhu/Social-AI-Frontend.git
cd Social-AI-Frontend
npm install

cp .env.example .env

Edit .env:

• REACT_APP_BASE_URL=http://localhost:8080 (local backend)
• REACT_APP_OPENAI_KEY=<your-openai-key>

cp backend/conf/deploy.yaml.example backend/conf/deploy.yaml

Edit backend/conf/deploy.yaml with your Elasticsearch URL, username, password, GCS bucket name, and JWT secret. Do not commit this file.

Terminal 1 – backend (port 8080):

npm run start:backend
# or: cd backend && go run main.go

Terminal 2 – frontend (port 3000):

npm start

Open http://localhost:3000. The app will call the backend at http://localhost:8080.

1. Config

   • Ensure backend/conf/deploy.yaml exists and is correct (not committed). App Engine may use Secret Manager or env vars for production; adjust to your setup.

2. Deploy

   cd backend
   gcloud app deploy app.yaml

   Backend will be at https://<project-id>.appspot.com (or your custom domain).

3. Port

   • Backend listens on PORT (default 8080). GAE sets PORT automatically.

1. Point to production API

   • In your build environment, set:
     • REACT_APP_BASE_URL=https://<your-backend-url> (e.g. https://socialai-dot-socialai-477621.ue.r.appspot.com).
   • Optional: REACT_APP_OPENAI_KEY for DALL-E (if you keep it in frontend; prefer backend proxy in production if possible).

2. Build

   npm run build

   Output is in build/.

3. Host

   • Upload build/ to any static host (Firebase Hosting, Vercel, Netlify, Cloud Storage + Load Balancer, etc.).

• Frontend
  • .env: REACT_APP_BASE_URL, REACT_APP_OPENAI_KEY (see .env.example).
• Backend
  • backend/conf/deploy.yaml: elasticsearch (address, username, password), gcs (bucket), token (JWT secret). Copy from backend/conf/deploy.yaml.example.

Sensitive data (.env, conf/deploy.yaml, API keys) must not be committed.

• Backend connection
  • Confirm backend is running and REACT_APP_BASE_URL matches (e.g. http://localhost:8080 locally).
• CORS
  • Backend allows * origins; restrict in production if needed.
• OpenAI errors
  • Check REACT_APP_OPENAI_KEY and OpenAI account/credits.
• Build
  • If frontend build fails: rm -rf node_modules package-lock.json && npm install.

Private / proprietary.

Built with React, Go, Elasticsearch, GCS, and OpenAI.