NSFW Detection API

Enterprise-grade content moderation platform built with modern technologies. Fast, accurate, and developer-first.

Live Demo · API Docs · Quick Start · Architecture

Overview

A production-ready SaaS platform for automated content moderation with a complete developer dashboard. Built with the MERN stack, featuring real-time analytics, batch processing, and enterprise-level security.

Key Metrics:

Sub-500ms response times
99.9% uptime guaranteed
Support for batch processing (10 images/request)
Comprehensive REST API
Real-time analytics dashboard

`## Core Features

Security & Authentication

API Key Management - Secure SHA-256 hashed keys with generation and rotation
Rate Limiting - Per-key request limits (configurable per minute and per day)
Authentication Layer - JWT tokens with Clerk integration
Input Validation - MongoDB injection prevention and sanitization
CORS Protection - Whitelist-based origin restrictions
Helmet.js - Comprehensive security headers

Developer Dashboard

API Key Management - Create, revoke, and monitor keys
Usage Analytics - Real-time charts and statistics
Request Logs - Full activity tracking with filters
API Playground - Interactive request builder
Code Snippets - Auto-generated code for multiple languages

User Experience

Dark/Light Mode - Automatic theme detection
Responsive Layout - Mobile, tablet, and desktop support
Smooth Animations - Framer Motion for polished interactions
Toast Notifications - Real-time user feedback
Sidebar Navigation - Interactive menu with animations

Performance & Reliability

Sub-500ms Response Times - Optimized queries and indexing
Batch Processing - Process up to 10 images in a single request
Async Logging - Non-blocking operations
Connection Pooling - Efficient MongoDB connection management
Error Handling - Comprehensive error responses and logging

Quick Start

Prerequisites

Node.js 18+
MongoDB Atlas account
Clerk authentication setup

Installation

Backend Setup

cd backend
npm install

Create .env file:

PORT=5000
MONGODB_URI=your_mongodb_uri
CLERK_SECRET_KEY=your_clerk_key
INFERENCE_SERVER_URL=http://aimodel.ddns.net:8000
EMAIL_USER=your_email@zoho.com
EMAIL_PASSWORD=your_email_password
RAZORPAY_KEY_ID=your_razorpay_key
RAZORPAY_SECRET=your_razorpay_secret

Start server:

npm run dev

Frontend Setup

cd frontend
npm install

Create .env file:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key

Start development server:

npm run dev

Architecture

System Design

┌─────────────────────────────────┐
│     Frontend (React + Vite)     │
│    Dashboard & UI Components    │
└──────────────┬──────────────────┘
               │
               │ HTTPS (REST API)
               │
┌──────────────▼──────────────────┐
│   Backend API Gateway           │
│   (Express.js + Middleware)     │
│   - Authentication              │
│   - Rate Limiting               │
│   - Request Validation          │
└──────────────┬──────────────────┘
               │
        ┌──────┴──────┐
        │             │
    HTTPS        Internal Network
        │             │
        │             │
┌───────▼──┐   ┌──────▼──────────┐
│ MongoDB  │   │ Inference Model │
│  Atlas   │   │  (AI Server)    │
└──────────┘   └─────────────────┘

Technology Stack

Component	Technology	Version
Runtime	Node.js	18+
Framework	Express.js	4.x
Database	MongoDB Atlas	Latest
Frontend	React	18.2.0
Build Tool	Vite	5.x
Styling	Tailwind CSS	3.x
Auth	Clerk	Latest
Animations	Framer Motion	Latest
HTTP Client	Axios	Latest

Project Structure

NSFW/
├── backend/
│   ├── config/
│   │   └── database.js              # MongoDB connection config
│   ├── controllers/
│   │   ├── analysisController.js    # Image analysis logic
│   │   ├── keyController.js         # API key management
│   │   ├── paymentController.js     # Payment processing
│   │   └── ...
│   ├── middleware/
│   │   ├── apiKeyAuth.js            # API key validation
│   │   ├── clerkAuth.js             # JWT authentication
│   │   └── subscriptionAuth.js      # Subscription checks
│   ├── models/
│   │   ├── User.js
│   │   ├── ApiKey.js
│   │   ├── RequestLog.js
│   │   └── ...
│   ├── routes/
│   │   ├── analysis.js              # Analysis endpoints
│   │   ├── key.js                   # Key management
│   │   └── ...
│   ├── services/
│   │   └── emailNotificationService.js
│   ├── utils/
│   │   └── email/
│   │       └── mailer.js            # Email templates
│   └── server.js                    # Entry point
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Navbar.jsx
│   │   │   ├── Footer.jsx
│   │   │   └── DarkModeToggle.jsx
│   │   ├── pages/
│   │   │   ├── HomePage.jsx
│   │   │   ├── DashboardLayout.jsx
│   │   │   ├── ApiKeysPage.jsx
│   │   │   ├── AnalyticsPage.jsx
│   │   │   └── ...
│   │   ├── utils/
│   │   │   └── api.js               # API client
│   │   ├── hooks/
│   │   │   └── useDarkMode.js
│   │   └── App.jsx
│   ├── public/
│   ├── vite.config.js
│   └── tailwind.config.js
│
└── README.md

API Overview

Authentication

All API requests require the X-API-Key header:

curl -H "X-API-Key: your_api_key" \
  https://nsfwbackend.techycsr.dev/api/analyze

Core Endpoints

Method	Endpoint	Description
POST	`/api/analyze`	Analyze single image
POST	`/api/batch`	Analyze multiple images
GET	`/api/usage`	Get usage statistics
GET	`/api/logs`	Get request logs
POST	`/api/key`	Generate new API key
DELETE	`/api/key/:id`	Revoke API key

Example Request

const response = await fetch('https://nsfwbackend.techycsr.dev/api/analyze', {
  method: 'POST',
  headers: {
    'X-API-Key': 'your_api_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    imageUrl: 'https://example.com/image.jpg'
  })
});

const result = await response.json();
console.log(result);

Deployment

Frontend (Vercel/Netlify)

cd frontend
vercel --prod

Environment Variables:

VITE_CLERK_PUBLISHABLE_KEY=your_key

Backend (Railway/Render)

cd backend
# Platform-specific deployment

Environment Variables:

MONGODB_URI - MongoDB Atlas connection string
CLERK_SECRET_KEY - Clerk authentication key
INFERENCE_SERVER_URL - AI model server URL
EMAIL_USER - SMTP email address
EMAIL_PASSWORD - SMTP password
RAZORPAY_KEY_ID - Payment gateway key
RAZORPAY_SECRET - Payment gateway secret

Security Considerations

Best Practices Implemented

API Keys - SHA-256 hashing with rotation support
Data Validation - Input sanitization on all endpoints
Rate Limiting - Configurable per-key request limits
CORS - Restricted to whitelisted origins only
JWT - Secure token-based authentication
Environment Variables - Sensitive data never committed
Helmet.js - Security headers on all responses
Error Handling - Generic error messages to prevent info leakage

Recommended Setup

Use strong, randomly-generated API keys
Store credentials in environment variables only
Enable rate limiting for production
Whitelist specific origins in CORS
Regularly rotate API keys
Monitor request logs for suspicious activity
Keep dependencies updated

Development

Available Scripts

Backend

npm run dev      # Start development server
npm run build    # Build for production
npm start        # Start production server

Frontend

npm run dev      # Start Vite dev server
npm run build    # Build for production
npm run preview  # Preview production build

Code Organization

Controllers - Handle request/response logic
Models - Define database schemas
Middleware - Handle authentication, validation, logging
Routes - API endpoint definitions
Services - Business logic (email, notifications)
Utils - Helper functions and configurations

Performance Optimization

Backend Optimization

Indexed MongoDB queries for fast lookups
Connection pooling to reduce overhead
Async logging to prevent blocking
Batch processing support
Response caching where applicable

Frontend Optimization

Vite for fast module bundling
Tailwind CSS for minimal CSS output
Lazy loading of routes
Image optimization
Framer Motion for GPU-accelerated animations

Monitoring & Analytics

The dashboard provides real-time insights:

Request Volume - Track API usage over time
Error Rates - Monitor failed requests
Performance Metrics - Average response times
User Activity - See who's using the API
Cost Tracking - Monitor usage against plan limits

Troubleshooting

Common Issues

Issue: API Key Not Working

Verify the key in the X-API-Key header
Check if the key has been revoked
Ensure you're using the correct environment

Issue: Rate Limit Exceeded

Check your current usage in the dashboard
Upgrade your plan for higher limits
Implement request batching on client side

Issue: High Response Times

Check the inference server status
Verify database connection
Review request logs for errors

Support & Resources

Documentation - Visit our API docs
Email - support@techycsr.dev
GitHub - Report issues

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

TechyCSR

GitHub: @TechyCSR
Website: techycsr.dev

Made with modern web technologies

Built with Node.js, React, MongoDB, and Tailwind CSS

Name		Name	Last commit message	Last commit date
Latest commit History 44 Commits
assets		assets
backend		backend
frontend		frontend
EMAIL_TEMPLATE_PREVIEW.html		EMAIL_TEMPLATE_PREVIEW.html
MainModelDocs.md		MainModelDocs.md
README.md		README.md
docker-compose.yml		docker-compose.yml
setup.bat		setup.bat
setup.sh		setup.sh

TechyCSR/NSFW-API-KEY

Folders and files

Latest commit

History

Repository files navigation