Skip to content

Latest commit

 

History

History
209 lines (178 loc) · 6.16 KB

README.md

File metadata and controls

209 lines (178 loc) · 6.16 KB
Surge Social

Surge Social

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

TypeScript React Node.js MongoDB Docker

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
  1. 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]
  1. Clone repository:
git clone https://github.com/minzique/surge-social.git
cd surge-social
  1. Configure environment and update .env with required values:
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
  1. 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