Skip to main content

🚀 Getting Started

Setup guide for running the ChildSafeNet AI-powered child internet protection platform from source.

ReactASP.NET CoreSQL ServerAI EngineBrowser Extension

Platform Overview​

ChildSafeNet integrates multiple components into a real-time protection system.

🌐 React Dashboard​

Parent monitoring interface and system management.

🔐 ASP.NET Core API​

Authentication, scanning API, and policy enforcement.

🗄 SQL Server​

Stores users, logs, policies, and training datasets.

🧠 AI Engine​

Hybrid classifier detecting malicious and unsafe URLs.

🧩 Browser Extension​

Real-time URL interception and enforcement.

This document guides you from clone → configure → run → secure → validate → production build.

1. System Architecture​

High-Level Flow​

Browser Extension → /api/scan → AI Risk Engine → SQL Database → React Dashboard

Core Modules​

LayerTechnologyResponsibility
FrontendReact + ViteParent monitoring UI
BackendASP.NET Core 8Authentication, Scan API
DatabaseSQL ServerLogs, Users, Tokens
ExtensionChrome/Edge MV3Real-time blocking
AI EngineRisk ClassifierURL classification

2. Prerequisites​

Ensure the following tools are installed:

  • .NET SDK 8
  • Node.js 18+
  • SQL Server (Express / Developer / LocalDB)
  • Git
  • (Optional) Docker Desktop

Verify:

dotnet --version
node --version
npm --version

3. Environment Configuration​

Before running the system, configure:

src/Childsafenet.Api/appsettings.Development.json

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=ChildSafeNetDb;Trusted_Connection=True;TrustServerCertificate=True;"
  },
  "Jwt": {
    "Key": "YourSuperSecretKey_Minimum32CharactersRequired"
  }
}

Security Best Practices​

  • Use at least 32-character JWT key
  • Do NOT commit production secrets
  • Enable HTTPS only in production
  • Restrict CORS origins

4. Clone Repository​

git clone https://github.com/NguyenTriBaoThang/Childsafenet.git
cd Childsafenet

5. Backend Setup (ASP.NET Core API)​

cd src/Childsafenet.Api
dotnet restore
dotnet ef database update
dotnet run

Default URLs:

https://localhost:7047
https://localhost:7047/swagger

6. Frontend Setup (React + Vite)​

cd src/Childsafenet.Frontend
npm install
npm run dev

Access:

http://localhost:5173

7. Authentication Flow​

  1. Register Parent Account
  2. Login
  3. JWT stored in localStorage as csn_token
  4. Authorization header automatically attached

8. Quick Scan Validation​

  1. Navigate to Scan Page
  2. Submit a test URL
  3. Observe classification: ALLOW, WARN, BLOCK
  4. Verify database log entry

9. Extension Installation (Developer Mode)​

  1. Open chrome://extensions or edge://extensions
  2. Enable Developer Mode
  3. Click "Load unpacked"
  4. Select:
src/Childsafenet.Extension

10. Extension Pairing​

  1. Generate pairing token in Dashboard
  2. Open extension popup
  3. Paste token
  4. Confirm status: PAIRED

11. End-to-End Security Test​

Test flow:

  • Visit unsafe URL
  • Extension calls /api/scan
  • If BLOCK → redirect to block.html
  • Dashboard logs entry

12. Health Check Endpoints​

Recommended validation:

  • GET /swagger
  • GET /health
  • GET /api/scan/test

13. Docker Deployment (Optional)​

docker-compose up --build

Verify:

  • API container running
  • SQL container healthy
  • Environment variables correct

14. Production Build​

Backend​

dotnet publish -c Release

Frontend​

npm run build

Deploy to:

  • Azure App Service
  • Docker Container
  • Reverse Proxy (Nginx)

15. Production Security Hardening​

  • Enforce HTTPS
  • Enable HSTS
  • Rate-limit scan API
  • Rotate pairing tokens periodically
  • Store secrets in environment variables
  • Use secure JWT expiration policies

16. System Ready Checklist​

  • API Running
  • Database Migrated
  • Frontend Accessible
  • Extension Installed
  • Extension Paired
  • Logs Recording
  • AI Scan Functional
  • System Architecture Deep Dive
  • API Reference
  • Extension Internals
  • AI Model Training Pipeline
  • Threat Modeling & Security Design

Conclusion​

ChildSafeNet is now fully operational in Professional Development Mode.

You are ready for:

  • 🏆 Academic Competition Submission
  • 🌍 Open-Source Contribution
  • 🔐 Secure Production Deployment