Surge Social

A full-stack social media application built with TypeScript, React, and Node.js

Project Progress

Authentication & Security

• Register screen implementation
• Login screen implementation
• reCAPTCHA integration for login/registration
• Username/email and password authentication
• Input validation for all fields
• JWT-based authentication with Passport.js
• Protected routes implementation

Posts & Timeline

• Protected listing page for posts
• Post creation with image upload
• Post viewing functionality
• Timeline implementation
• Time-based post indexing
• Like functionality
• Ranking algorithm for posts (time + likes weighted)
• Image upload with S3 integration

Infrastructure & Deployment

• MongoDB database integration
• Docker configuration with multi-stage builds
• Multi-container setup with docker-compose
• Environment configuration management
• Production SSL/TLS with Nginx reverse proxy
• Domain configuration and DNS setup
• VPS deployment with Docker
• Automated SSL certificate renewal with Certbot
• Basic unit tests with Jest
• CI/CD pipeline setup
• Rate limiting implementation
• Redis caching layer
• Load balancing configuration
• Monitoring and logging (ELK Stack)
• Backup automation
• API documentation with Swagger/OpenAPI

Features & Enhancements

• User authentication system
• JWT token management
• Protected routes and authorization
• Post creation and viewing
• Image upload for posts
• Like/unlike functionality
• User profiles (basic)
• Timeline with ranking algorithm
• Input validation and error handling
• User avatars and profile customization
• Comment functionality on posts
• Post sharing capability
• User following/followers
• Anonymous login implementation

Production Environment

• Domain: surgesocial.app
• Hosting: Vultr VPS with Docker
• Database: MongoDB
• SSL: Let's Encrypt with auto-renewal
• Proxy: Nginx reverse proxy
• Container Orchestration: Docker Compose

Development Setup

Local Development

1. Copy .env.example to .env and configure environment variables:

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
```bash
2. Start your local MongoDB instance
3. Install dependencies and start services:

# Backend
cd backend
npm install
npm run dev

# Frontend (in another terminal)
cd frontend
npm install
npm run dev

Docker Development

If you're using Docker (non-macOS), the same configuration works with Docker Compose:

1. Copy .env.example to .env and configure environment variables:

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

2. Start the services:

docker-compose up

The Docker setup includes:

• Volume mounts for live code updates
• Network isolation between services
• Port mapping for local access
• Environment variable support from .env file

Deployment

Prerequisites

• Docker and Docker Compose installed
• Domain DNS configured to point to VPS
• SSH access to VPS
• SSL certificates (automated via Certbot)

Automated Deployment

1. SSH into VPS:

ssh [email protected]

2. Clone repository:

git clone https://github.com/minzique/surge-social.git
cd surge-social

3. Configure environment and update .env with required values:

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

4. Run deployment script:

chmod +x scripts/deploy.sh
./scripts/deploy.sh

The script handles:

• SSL certificate generation
• Docker image builds
• Service orchestration
• Nginx configuration

Technical Architecture

Backend (Node.js + TypeScript)

• Express.js for REST API
• MongoDB with Mongoose
• Middleware implementation for:
  • Authentication
  • Validation
  • Error handling
  • reCAPTCHA verification
• Unit tests with Jest

Frontend (React + TypeScript)

• Vite as build tool
• React Router for navigation
• Custom hooks and components
• Shared types with backend

Environment Variables

All environment variables are managed in a single .env file:

• PORT: Backend server port (default: 5000)
• FRONTEND_PORT: Frontend development server port (default: 3000)
• BACKEND_PORT: Backend container exposed port (default: 5000)
• MONGODB_URI: MongoDB connection string
• JWT_SECRET: Secret key for JWT token generation
• RECAPTCHA_SECRET_KEY: Google reCAPTCHA secret key
• RECAPTCHA_SITE_KEY: Google reCAPTCHA site key

Project Structure

surge-social/
├── backend/                 # Node.js + Express backend
│   ├── src/
│   │   ├── config/         # Configuration files
│   │   ├── controllers/    # Route controllers
│   │   ├── dtos/          # Data Transfer Objects
│   │   ├── middleware/     # Custom middleware
│   │   ├── models/        # Mongoose models
│   │   ├── routes/        # API routes
│   │   ├── services/      # Business logic
│   │   └── types/         # TypeScript types
├── frontend/               # React + Vite frontend
│   ├── src/
│   │   ├── api/           # API integration
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom hooks
│   │   ├── lib/           # Utilities
│   │   └── types/         # TypeScript types
├── docker/                # Docker configuration
└── scripts/               # Development scripts