🏗 Architecture & Technology Stack

Backend

• Framework: FastAPI (Python 3.13)
• Database: PostgreSQL with SQLAlchemy ORM
• Authentication: JWT-based session management with secure cookie handling
• Middleware: Custom rate limiting, CORS, GZip compression
• Template Engine: Jinja2 with custom filters
• External APIs: Frontiers Research API, AI text generation

Frontend

• Rendering: Server-side rendered templates with progressive enhancement
• 3D Graphics: Three.js with WebGL for animated 3D characters
• Rich Text Editing: Quill.js integration
• Interactivity: Custom task systems (sortable, notation, code, chat tasks)
• Responsive Design: Mobile-first approach with comprehensive media queries

🎯 Frontend Deep Dive — Interactive Task System

The learning environment implements a sophisticated gamified learning system with multiple interactive task types. This modular task architecture showcases DOM manipulation mastery, state management, and event-driven programming.

Task Completion & Content Gating

function blurContentAfterTask(currentTaskId) {
  const articleContent = document.querySelector('#article_content');
  const children = Array.from(articleContent.children);
  let blur = false;

  children.forEach(child => {
    if (child.id === currentTaskId) {
      blur = true;
    } else if (blur) {
      child.classList.add('blurred');
      child.classList.remove('unblurred');
    }
  });
}

function unblurContentUpToNextTask(currentTaskId) {
  const articleContent = document.querySelector('#article_content');
  const children = Array.from(articleContent.children);
  let unblur = false;

  children.forEach(child => {
    if (child.id === currentTaskId) {
      unblur = true;
    } else if (unblur) {
      if (child.classList.contains('task_fake')) {
        unblur = false;
      }
      child.classList.remove('blurred');
      child.classList.add('unblurred');
    }
  });
}

Key Technical Insights:

• Content is progressively revealed as users complete tasks, creating a "gated" learning flow
• CSS blur filters are dynamically toggled on DOM elements based on task completion state
• The pattern uses a finite state machine approach where each task completion triggers the next state transition

Typewriter Effect with Audio Synthesis

The platform features an immersive typewriter animation with Web Audio API integration for sound feedback:

function typeWriter(element, htmlContent, delay = 50, playAnimation = false) {
  element.html('');
  const typingCaret = $('<span class="typing-caret"></span>');
  element.append(typingCaret);

  let i = 0;
  let tag = false;
  let currentTag = '';

  const audioContext = new (window.AudioContext || window.webkitAudioContext)();

  function playTypingSound() {
    if (!audioContext) return;

    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine';
    oscillator.frequency.setValueAtTime(600, audioContext.currentTime);

    const gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    // Smooth fade in and fade out
    gainNode.gain.setValueAtTime(0, audioContext.currentTime);
    gainNode.gain.linearRampToValueAtTime(0.1, audioContext.currentTime + 0.01);
    gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.04);

    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.05);
  }

  function startTyping() {
    const typingInterval = setInterval(() => {
      if (i < htmlContent.length) {
        let char = htmlContent[i];
        if (char === '<') {
          tag = true;
          currentTag += char;
        } else if (char === '>') {
          tag = false;
          currentTag += char;
          typingCaret.before(currentTag);
          currentTag = '';
        } else if (tag) {
          currentTag += char;
        } else {
          typingCaret.before(document.createTextNode(char));
          playTypingSound();
        }
        i++;
      } else {
        clearInterval(typingInterval);
        typingCaret.remove();
      }
    }, delay);
  }
  startTyping();
}

Technical Highlights:

• HTML-aware parsing: The algorithm correctly handles HTML tags, buffering them until complete before inserting
• Web Audio API: Real-time audio synthesis creates typing sounds without loading audio files
• Gain envelope: Volume ramping prevents audio clicks for smooth, natural sound

Bionic Reading Toggle — Text Processing

A unique accessibility feature that implements "bionic reading" by bolding the first half of each word:

function fastify(str) {
  let array = str.split(' ');
  let sentence = [];

  for (let x = 0; x < array.length; x++) {
    let word = array[x];
    if (!word) {
      sentence.push('');
      continue;
    }

    let pre, last;
    if (word.length >= 1 && word.length <= 3) {
      pre = `<b>${word.substring(0, 1)}</b>`;
      last = word.substring(1);
    } else if (word.length >= 4) {
      if (word.length % 2 === 0) {
        pre = `<b>${word.substring(0, word.length / 2)}</b>`;
        last = word.substring(word.length / 2);
      } else {
        pre = `<b>${word.substring(0, Math.ceil(word.length / 2))}</b>`;
        last = word.substring(Math.ceil(word.length / 2));
      }
    }
    sentence.push(pre + last);
  }

  return sentence.join(' ');
}

🌐 Community Page — AJAX Papers Retrieval

The community forum implements asynchronous API integration with the Frontiers Research database, dynamically loading academic papers relevant to each subject.

Frontend Implementation

document.addEventListener('DOMContentLoaded', function () {
  const papersContainer = document.getElementById('papers-container');
  const loadingSpinner = document.getElementById('loading-spinner');

  // Fetch papers from backend API
  fetch(`/get_papers/{{ subject.codename }}`)
    .then(response => response.json())
    .then(papers => {
      loadingSpinner.style.display = 'none';

      papers.forEach(paper => {
        const paperElement = document.createElement('a');
        paperElement.href = paper.url;
        paperElement.innerHTML = `
          <div class="paper">
            <div class="paper_content">
              <div class="paper_name">${paper.title}</div>
              <div class="paper_right">
                <div class="paper_stats">
                  <span class="paper_citations">${paper.citations}</span>
                  <span class="paper_views">${paper.views}</span>
                </div>
                <div class="paper_date">${paper.date}</div>
              </div>
            </div>
          </div>`;
        papersContainer.appendChild(paperElement);
      });
    })
    .catch(error => {
      console.error('Error loading papers:', error);
      loadingSpinner.innerHTML = '<p>Error loading papers.</p>';
    });
});

Backend Service — Frontiers API Integration

import httpx
import logging

logger = logging.getLogger(__name__)

async def get_latest_articles_correct(subject: str):
    """Fetch latest articles from Frontiers API"""
    
    url = "https://www.frontiersin.org/api/v3/journals/search/articles"
    frontiers_ids = {'psychology': 36, 'nutrition': 628, 'brain': 1}
    
    if subject not in frontiers_ids:
        return []

    headers = {
        "accept": "application/json, text/plain, */*",
        "content-type": "application/json",
        "origin": "https://www.frontiersin.org",
    }

    data = {
        "Skip": 16,
        "Top": 5000,
        "StartDate": "2024/05/12",
        "EndDate": "2024/08/12",
        "Filter": {
            "JournalId": frontiers_ids[subject],
            "Sort": 1,
        },
    }

    try:
        async with httpx.AsyncClient() as client:
            response = await client.post(url, headers=headers, json=data, timeout=10)
            response.raise_for_status()
            response_json = response.json()

        articles = response_json.get('articles', [])

        # Sort by views and select top 30
        sorted_articles = sorted(
            articles, 
            key=lambda x: x.get('impact', {}).get('views', {}).get('count', 0), 
            reverse=True
        )[:30]

        return [
            {
                'title': article.get('title'),
                'views': article.get('impact', {}).get('views', {}).get('count', 0),
                'citations': article.get('impact', {}).get('citations', {}).get('count', 0),
                'date': article.get('publishedDate'),
                'url': article.get('publicUrl')
            }
            for article in sorted_articles
        ]
    except Exception as e:
        logger.error(f"Error fetching articles: {e}", exc_info=True)
        return []

Technical Excellence:

• Async HTTP client (httpx.AsyncClient) for non-blocking I/O
• Defensive programming with nested .get() chains preventing KeyError crashes
• Data transformation layer converting external API schema to internal format
• Proper error handling with structured logging

⚙️ Backend Architecture

Optimized Database Queries — N+1 Prevention

@router.get("/community/{com_sub}", response_class=HTMLResponse)
async def com_subject(com_sub: str, request: Request, db: Session = Depends(get_db)):
    posts_feed = db.query(Post).filter_by(subject=com_sub).order_by(Post.date.desc()).all()
    
    # ✅ OPTIMIZED: Single grouped query instead of N+1 queries
    from sqlalchemy import func
    reply_counts = db.query(
        Reply.post_id,
        func.count(Reply.id).label('count')
    ).filter(
        Reply.post_id.in_([post.id for post in posts_feed])
    ).group_by(Reply.post_id).all()
    
    # Convert to dictionary for O(1) lookup
    post_replies_num = {post_id: count for post_id, count in reply_counts}
    
    # Fill zeros for posts without replies
    for post in posts_feed:
        if post.id not in post_replies_num:
            post_replies_num[post.id] = 0

Rate Limiting Middleware

class RateLimitMiddleware(BaseHTTPMiddleware):
    """Rate limiting middleware using in-memory storage."""
    
    def __init__(self, app, requests_per_minute: int = 60):
        super().__init__(app)
        self.requests_per_minute = requests_per_minute
        self.requests: Dict[str, list[Tuple[datetime, str]]] = defaultdict(list)
        self.last_cleanup = datetime.now()
        
    async def dispatch(self, request: Request, call_next):
        client_ip = request.client.host
        if "x-forwarded-for" in request.headers:
            client_ip = request.headers["x-forwarded-for"].split(",")[0].strip()
        
        # Skip for health checks
        if request.url.path in ["/health", "/healthz", "/"]:
            return await call_next(request)
        
        now = datetime.now()
        
        # Cleanup old entries periodically
        if (now - self.last_cleanup).seconds > 60:
            self._cleanup_old_entries()
            self.last_cleanup = now
        
        # Rate limit check
        request_list = self.requests[client_ip]
        cutoff = now - timedelta(minutes=1)
        request_list[:] = [(ts, p) for ts, p in request_list if ts > cutoff]
        
        if len(request_list) >= self.requests_per_minute:
            raise HTTPException(
                status_code=status.HTTP_429_TOO_MANY_REQUESTS,
                headers={"Retry-After": "60"}
            )
        
        request_list.append((now, request.url.path))
        
        response = await call_next(request)
        
        # Add rate limit headers
        response.headers["X-RateLimit-Limit"] = str(self.requests_per_minute)
        response.headers["X-RateLimit-Remaining"] = str(max(0, self.requests_per_minute - len(request_list)))
        
        return response

SQLAlchemy Models — RBAC Implementation

class UserRole(str, enum.Enum):
    """User role enumeration for RBAC"""
    USER = "user"
    ADMIN = "admin"
    MODERATOR = "moderator"

class User(Base):
    __tablename__ = 'Users'
    
    id = Column(Integer, primary_key=True)
    role = Column(SQLEnum(UserRole), default=UserRole.USER)
    
    def is_admin(self):
        return self.role == UserRole.ADMIN
    
    def has_permission(self, required_role: UserRole):
        role_hierarchy = {
            UserRole.USER: 0,
            UserRole.MODERATOR: 1,
            UserRole.ADMIN: 2
        }
        return role_hierarchy.get(self.role, 0) >= role_hierarchy.get(required_role, 0)

🧪 3D Graphics — Interactive Chemistry Simulation

The platform features an advanced chemistry learning task with interactive 3D atomic simulations. Users can drag atoms to form molecules, triggering visual feedback with sparkle effects and sidebar information panels.

Scene Initialization with Post-Processing Effects

import * as THREE from 'three';
import { EffectComposer } from 'EffectComposer';
import { RenderPass } from 'RenderPass';
import { UnrealBloomPass } from 'UnrealBloomPass';

let scene, camera, renderer, composer;
let atomMeshes = [];
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();

const molecules = [
  {
    elements: ['Na', 'Cl'],
    name: 'Sodium Chloride',
    formula: 'NaCl',
    description: 'Table salt, widely used in food seasoning and preservation.'
  },
  {
    elements: ['H', 'F'],
    name: 'Hydrogen Fluoride',
    formula: 'HF',
    description: 'Essential in fluorine compound production and glass etching.'
  }
];

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 25;

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('scene-container').appendChild(renderer.domElement);

  // Effect Composer for Bloom Effect
  composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));

  const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    0.8,  // Bloom strength
    1,    // Bloom radius
    0     // Bloom threshold
  );
  composer.addPass(bloomPass);

  createFloatingAtoms();
  animate();
}

Dynamic Atom Creation with Canvas Textures

function createFloatingAtoms() {
  const sphereGeometry = new THREE.SphereGeometry(2, 64, 64);

  nobleGases.forEach((element, index) => {
    // Create Canvas for Base Texture with element symbol
    const canvas = document.createElement('canvas');
    const size = 512;
    canvas.width = size;
    canvas.height = size;
    const context = canvas.getContext('2d');

    // Draw transparent purple glass base
    context.fillStyle = 'rgba(128, 0, 128, 0.6)';
    context.fillRect(0, 0, size, size);

    // Draw chemical symbol in center
    context.font = 'bold 100px Arial';
    context.fillStyle = 'black';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText(element.symbol, size / 2, size / 2);

    const baseTexture = new THREE.CanvasTexture(canvas);

    // Create Emissive Map for glow effect
    const emissiveCanvas = document.createElement('canvas');
    emissiveCanvas.width = size;
    emissiveCanvas.height = size;
    const emissiveContext = emissiveCanvas.getContext('2d');
    
    emissiveContext.fillStyle = 'white';
    emissiveContext.fillRect(0, 0, size, size);
    emissiveContext.font = 'bold 150px Arial';
    emissiveContext.fillStyle = 'black';
    emissiveContext.textAlign = 'center';
    emissiveContext.textBaseline = 'middle';
    emissiveContext.fillText(element.symbol, size / 2, size / 2);

    const emissiveTexture = new THREE.CanvasTexture(emissiveCanvas);

    const material = new THREE.MeshStandardMaterial({
      map: baseTexture,
      emissive: getRandomColor(),
      emissiveIntensity: 2,
      emissiveMap: emissiveTexture,
      metalness: 1.1,
      roughness: 0,
      opacity: 0.5,
      side: THREE.DoubleSide,
    });

    const atom = new THREE.Mesh(sphereGeometry, material);
    atom.position.set(
      Math.random() * 30 - 15,
      Math.random() * 20 - 12,
      Math.random() * 5 - 5
    );
    atom.originalPosition = atom.position.clone();
    atom.elementData = element;
    atom.noiseOffset = Math.random() * 1000;

    scene.add(atom);
    atomMeshes.push(atom);
  });
}

Drag-and-Drop Atom Interaction

let isDragging = false;
let selectedAtom = null;
let dragPlane = new THREE.Plane();
let offset = new THREE.Vector3();

function onMouseDown(event) {
  event.preventDefault();
  
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -((event.clientY / window.innerHeight) * 2 - 1);

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(atomMeshes, true);

  if (intersects.length > 0) {
    isDragging = true;
    selectedAtom = intersects[0].object;
    selectedAtom.isAnimating = false;  // Pause floating animation

    // Define drag plane perpendicular to camera
    dragPlane.setFromNormalAndCoplanarPoint(
      camera.getWorldDirection(new THREE.Vector3()),
      selectedAtom.position
    );

    // Calculate offset for smooth dragging
    if (raycaster.ray.intersectPlane(dragPlane, dragIntersection)) {
      offset.copy(dragIntersection).sub(selectedAtom.position);
    }
  }
}

function onMouseUp(event) {
  if (isDragging && selectedAtom) {
    isDragging = false;
    selectedAtom.originalPosition.copy(selectedAtom.position);
    selectedAtom.isAnimating = true;
    
    checkMoleculeFormation(selectedAtom);
  }
  selectedAtom = null;
}

Molecule Formation Detection

function checkMoleculeFormation(atom) {
  const proximityThreshold = 5;

  atomMeshes.forEach((otherAtom) => {
    if (otherAtom !== atom && otherAtom.parent === scene) {
      const distance = atom.position.distanceTo(otherAtom.position);

      if (distance < proximityThreshold) {
        const molecule = molecules.find(
          (m) =>
            m.elements.includes(atom.elementData.symbol) &&
            m.elements.includes(otherAtom.elementData.symbol)
        );

        if (molecule) {
          formMolecule(atom, otherAtom, molecule);
        }
      }
    }
  });
}

function formMolecule(atom1, atom2, molecule) {
  const moleculeGroup = new THREE.Group();
  moleculeGroup.userData.isMolecule = true;
  moleculeGroup.userData.moleculeData = molecule;

  scene.remove(atom1);
  scene.remove(atom2);
  moleculeGroup.add(atom1);
  moleculeGroup.add(atom2);

  createBondMesh(atom1.position, atom2.position, moleculeGroup);
  createSparkles(moleculeGroup);

  scene.add(moleculeGroup);
  
  populateSidebar(molecule);
  showSidebar();
}

Animation Loop with Floating Effect

function animate() {
  requestAnimationFrame(animate);
  const time = Date.now() * 0.0005;

  atomMeshes.forEach((atom) => {
    if (atom.isAnimating !== false) {
      const noiseFactor = 0.5;
      
      // Organic floating motion
      atom.position.x = atom.originalPosition.x + Math.sin(time + atom.noiseOffset) * noiseFactor;
      atom.position.y = atom.originalPosition.y + Math.sin(time + atom.noiseOffset + 10) * noiseFactor;
      atom.position.z = atom.originalPosition.z + Math.sin(time + atom.noiseOffset + 20) * noiseFactor;

      // Oscillatory rotation
      const rotationAmplitude = THREE.MathUtils.degToRad(45);
      atom.rotation.y = atom.initialRotationY + Math.sin(time + atom.noiseOffset) * rotationAmplitude;
    }
  });

  composer.render();
}

Technical Highlights:

• Post-processing pipeline: UnrealBloomPass creates glowing atomic effects
• Canvas-based textures: Dynamic generation of element symbols with emissive maps
• Raycaster drag system: Plane intersection for accurate 3D dragging
• Molecule detection algorithm: Proximity-based bonding with chemical validation
• Particle effects: Sparkle system for visual feedback on molecule formation

🔐 Security Implementation

JWT Session Management

app.add_middleware(
    SessionMiddleware,
    secret_key=settings.SECRET_KEY,
    max_age=86400,  # 24 hours
    same_site="lax",
    https_only=not settings.DEBUG,  # HTTPS in production
)

Endpoint-Specific Rate Limiters

login_limiter = EndpointRateLimiter(max_requests=5, window_seconds=300)
verification_limiter = EndpointRateLimiter(max_requests=3, window_seconds=180)
signup_limiter = EndpointRateLimiter(max_requests=3, window_seconds=3600)
ai_limiter = EndpointRateLimiter(max_requests=10, window_seconds=60)

📊 Conclusion

NewEd demonstrates proficiency across the full stack:

• Frontend: Advanced JavaScript patterns, 3D graphics, accessibility features, and responsive design
• Backend: Async Python, database optimization, security middleware, and external API integration
• Architecture: Clean separation of concerns, modular route organization, and service layer patterns
• UX: Gamification, progressive content disclosure, real-time feedback, and immersive learning

Built with FastAPI, Three.js, SQLAlchemy, and modern JavaScript

🚀 Overview

Built as a full-stack Flask application, this project demonstrates expertise in system architecture, web scraping with anti-bot bypass, AI/ML integration, payment processing, database design, and production deployment.

🏗 System Architecture

High-Level Architecture

┌─────────────────┐      ┌───────────────────┐      ┌──────────────────┐
│   Client Layer  │◄────►│  Application Layer │◄────►│   Data Layer     │
│                 │      │                   │      │                  │
│  - Jinja2       │      │  Flask + WSGI     │      │  PostgreSQL      │
│  - CSS/JS       │      │  - Blueprints     │      │  - SQLAlchemy    │
│  - Responsive   │      │  - Services       │      │  - Migrations    │
│                 │      │  - Forms/Auth     │      │                  │
└─────────────────┘      └───────────────────┘      └──────────────────┘
                                   │
               ┌───────────────────┼───────────────────┐
               ▼                   ▼                   ▼
      ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
      │  2ndstreet.jp   │ │  PayPal REST    │ │  Google Gemini  │
      │  Web Scraper    │ │  API Gateway    │ │  Vision AI      │
      └─────────────────┘ └─────────────────┘ └─────────────────┘

Application Factory Pattern

The application utilizes Flask's Application Factory Pattern for modularity, testability, and support of multiple configurations (development, testing, production):

def create_app(config_name=None):
    """Application factory pattern."""
    app = Flask(__name__)
    
    # Load configuration
    config = get_config(config_name)
    app.config.from_object(config)
    
    # Initialize Flask extensions
    db.init_app(app)
    Migrate(app, db, compare_type=True)
    login_manager.init_app(app)
    mail = Mail(app)
    
    # Initialize services
    with app.app_context():
        email_service.__init__(mail)
        brand_service.load_brand_descriptions()
    
    setup_logging(app, config)
    register_blueprints(app)
    
    return app

🧩 Modular Blueprint Architecture

The application is organized into six core blueprints:

🗄 Database Design & ORM

Entity Relationship

┌─────────────────┐       ┌─────────────────┐       ┌─────────────────┐
│    User         │       │    Order        │       │    Item         │
├─────────────────┤       ├─────────────────┤       ├─────────────────┤
│ id (PK)         │◄──────│ user_id (FK)    │       │ id (PK)         │
│ email           │       │ id (PK)         │───────│ id_2nd          │
│ cart[]          │       │ items[]         │       │ brand           │
│ orders[]        │       │ status          │       │ price           │
└─────────────────┘       └─────────────────┘       └─────────────────┘

Cross-Database Compatibility

Implemented a custom PortableArray type to support both PostgreSQL (production) and SQLite (testing):

class PortableArray(TypeDecorator):
    """Uses PostgreSQL ARRAY on Postgres and JSON on SQLite."""
    impl = JSON
    def load_dialect_impl(self, dialect):
        if dialect.name == 'postgresql':
            return dialect.type_descriptor(ARRAY(self.item_type))
        return dialect.type_descriptor(JSON())

Web Scraping Engine

Akamai Bot Protection Solver

Reverse-engineered the JavaScript challenge to bypass Akamai Bot Manager:

def handle_akamai_challenge(session, response) -> bool:
    """Attempt to solve Akamai Interstitial Challenge."""
    # Extract 'i' variable and calculate PoW
    match_i = re.search(r'var i = (\d+);', html)
    # ... (PoW calculation logic)
    
    # Send verification
    verify_response = session.post(verify_url, json=payload)
    return verify_response.status_code in [200, 201]

Also used curl_cffi with Chrome TLS fingerprint impersonation to avoid detection.

🤖 AI-Powered Product Categorization

Integrated Google Gemini 2.0 Flash for automated product categorization from images:

def categorize_item_from_image(self, image_url: str):
    """Categorize item from image URL using Gemini AI."""
    ai_response = self.model.generate_content([
        GEMINI_CATEGORIZATION_PROMPT, 
        img
    ])
    return ai_response.text.split(',')

💳 Payment Processing

Secure payment processing with PayPal's REST API, supporting itemized invoices and order tracking.

payment = paypalrestsdk.Payment({
    "intent": "sale",
    "payer": {"payment_method": "paypal"},
    "transactions": [{
        "item_list": {
            "items": [{
                "name": f"{item.brand} {item.name}",
                "price": "{:.2f}".format(item.price),
                "currency": "USD",
                "quantity": 1
            } for item in cart_items]
        },
        "amount": { "total": "{:.2f}".format(total), "currency": "USD" }
    }]
})

🔒 Authentication & Security

• Secure Password Hashing: Using Werkzeug's PBKDF2.
• Email Verification: Time-boxed verification codes.
• RBAC: Custom decorators for admin access.
• Confidential Links: Cryptographically secure tokens for order tracking.

🛠 Technology Stack

• Backend: Python 3.11, Flask 3.0, SQLAlchemy 2.0
• Database: PostgreSQL 15, Flask-Migrate
• Web Scraping: BeautifulSoup4, curl-cffi, Akamai bypass
• AI/ML: Google Gemini 2.0, Pillow
• Payments: PayPal REST SDK
• Frontend: Jinja2, CSS3, Vanilla JS
• DevOps: pytest, Docker, Google Cloud

Key Technical Achievements

• Reverse-engineered Akamai Bot Manager — Built automated proof-of-work solver.
• Cross-database ORM compatibility — Custom SQLAlchemy type adapters.
• AI-powered automation — Integrated vision AI reducing manual entry by 90%.
• Production-grade architecture — Application factory, blueprints, service layer.

🚀 Overview

HowToxic (NetHealth) is a dedicated platform designed to evaluate the "health" of internet discourse. Using state-of-the-art Natural Language Processing (NLP), it provides real-time toxicity scores and deep insights into digital conversations across major social platforms like YouTube and Reddit.

✨ Key Features

• Real-time Analysis: Instant feedback on content toxicity using an optimized AI engine.
• Multi-platform Support: Seamlessly analyzes content from YouTube videos, Reddit posts, and raw text.
• Deep Insights: Goes beyond simple scores to detect specific attributes like insults, threats, and profanity.
• Community Health Monitoring: Aggregates data to provide a "pulse" of online communities.

🛠 Technology Stack

• Backend: Python, Flask, PyTorch (for model inference)
• Frontend: React, TailwindCSS, Recharts (for data visualization)
• AI/ML: Custom fine-tuned BERT models, toxicity classification pipelines
• Infrastructure: Docker, Nginx, Cloud Deployment

🎯 Mission

The goal of HowToxic is to bring transparency to online interactions. By quantifying toxicity, we empower users and moderators to build safer, more positive digital spaces.

1,400+ lines of code. 3D interactions. Liquid glass design. All custom, all mine.

🧠 Vision

This portfolio isn't just a page — it's an experience. I wanted something that reflects how I work: sharp, fluid, intuitive. Inspired by Apple's newest "liquid glass" UI concept, I designed a layout that feels light and modern, but grounded in usability.

⚙️ Stack & Tools

• Flask — backend and routing
• JavaScript — all interactivity and transitions
• Three.js — 3D scene and rendering
• Custom HTML/CSS — no UI frameworks
• Same server setup I use for my production apps

🎯 Design Principles

• User-centered: UI flows designed with clarity and feel-first interaction
• Slick visuals: subtle gradients, animated glass, responsive layout
• Performance-focused: low overhead, smart asset loading, smooth canvas scaling
• Code from scratch: no generators, no pre-built kits — just focused execution

📅 Built in 3 Days

From empty folder to fully functional, responsive, animated portfolio in just 3 days. Every line of code was written with speed and precision. The result is a site that not only shows my projects — it is one.

💬 Want to build something like this?

Let’s talk. Don't overthink.

🌱 Where It Began

My entry into 3D wasn’t technical — it was personal. It started with a character concept for Newed, my educational platform. I had a clear vision of what this character would represent and how it could guide users through knowledge spaces. But to bring that to life, I needed more than an idea — I needed 3D.

I bought a base model and commissioned a rig from a freelancer to get started. From there, I plunged into the 3D world with no prior experience, no courses, and no roadmap — just determination and a growing sense of what could be built.

🔍 Early Exploration

I began animating on my own to create expressive motion for my learning environments. YouTube became my university — I watched tutorials on everything from rigging fixes to animation curves, lighting, scene optimization, and shader tricks.

My goal was always clear: create responsive, meaningful interaction. I wasn't studying 3D for the sake of visuals, but to design learning tools that felt alive.

🎮 Interactive Learning Projects

Once I got comfortable, I began creating small 3D-based games and interactive experiences for specific educational subjects. These weren’t just tech demos — they were working prototypes aimed at improving engagement, memory, and learning flow.

Everything I built had to run fast in the browser, so I constantly optimized for performance: simplifying meshes, compressing textures, baking lighting, and adjusting render logic.

💼 Expanding into Commercial and Creative Work

As my skills grew, I expanded beyond Newed. I created a commercial 3D video from scratch — modeling, animating, lighting, and editing. I then began producing content for social media: short-form explainers, motion teasers, and eventually full-length narrative videos using 3D as both medium and message.

To keep evolving, I also joined a few 3D art contests. These unrelated projects helped me experiment with style, composition, and storytelling beyond the educational frame. They became a playground for technique and artistic growth.

💡 Self-Taught, Idea-Driven

I never took a course. Everything I’ve learned has been through trial, research, late-night debugging, and deep curiosity. I never approached 3D as a rigid skill to master — but as a language to express the kind of worlds I wanted to build.

My learning was always guided by ideas: What do I want this character to do? What kind of feeling should this motion evoke? How can a learner feel immersed instead of instructed?

And with every new tool I discovered, I didn’t just learn it — I immediately tried to apply it. That’s how my knowledge became internalized and my creative direction clearer.

⚡ Focus on Performance

Since much of my 3D work is embedded in web environments, performance was never an afterthought. I learned to optimize every part of the pipeline: keeping polygon counts lean, managing texture sizes, baking animations when possible, and using efficient formats like GLTF + Draco.

Even in the most experimental stages, I preserved a mindset of delivering content that works across devices — even on slower machines — without sacrificing expression.

🚀 Now and Beyond

Today, I use 3D in multiple ways: building interactive learning spaces, designing characters and environments, creating video content, and prototyping ideas that bridge logic and emotion. Every new project pushes me deeper — into better storytelling, clearer motion, and more intuitive design.

The journey continues — not just with more tools, but with sharper vision. I’m still learning every day, but now with a growing library of finished projects behind me and a clearer sense of how 3D can make abstract knowledge feel tangible, memorable, and alive.

🚀 Getting Started

I joined Telega.io — a Telegram ad marketplace and marketing agency — just one month after beginning university. While others were still adjusting to academic life, I already felt ready to apply my ideas in the real world. I didn’t want to wait for permission to start growing.

My application wasn’t driven by necessity — it was driven by clarity. I wanted to test myself, contribute meaningfully, and learn fast. Within my first month, that mindset was recognized: I was promoted to lead the company’s international version.

🌍 Launching a Global Division

My role was to take a successful Russian-language product and build its presence for the global market — from scratch. I immediately dove into deep market research to understand Telegram’s ad ecosystems across English and Latin-script markets.

I initiated contact with Telegram channel creators across numerous regions and niches, building a broad network while securing our first client campaigns. I acted as strategist, researcher, relationship manager, and growth hacker — all in one.

📈 Rapid Growth in 3 Months

• Built and led a remote team of 7 people from various countries
• Onboarded 20,000+ platform users
• Established a database of 2,000+ Telegram channels
• Managed over 3,000 successful ad orders
• Closed deals up to $10,000 within two weeks

All of this happened in less than a quarter — with minimal marketing resources. I developed positioning strategies, helped shape the brand voice, and designed outreach methods that generated traction without burning budget.

🏗 Developing a Market from Zero

The international Telegram ads market was practically undeveloped when I started. There was no established behavior, no shared pricing logic, and no central platform known to English-speaking advertisers. I helped define that space.

Through experimentation and analytics, I refined onboarding flows for both clients and publishers, guided content production, and helped establish new KPIs based on behavior patterns unique to the non-CIS audience.

💡 What I Learned

• How to lead a startup team in a high-responsibility role, early in my career
• How to develop strategy, process, and culture for a product in a new market
• How to handle high-stakes client communication and close deals quickly
• How to grow an ecosystem from 0: platforms, publishers, users, processes
• How to combine research, marketing, and product thinking in real time

🏆 Outcome

I didn’t just learn how startups work — I helped build one in real time. The international version of Telega.io became a thriving vertical, and my work created a foundation for Telegram advertising in the English-speaking world. I left the company having built something lasting — a rare thing in a first job.

📢 Creating the Channel

In a time of constant negativity in the media, I wanted to build something different — a place where people could open their feed and actually feel better. That was the core idea behind All the Good Things, a Telegram channel fully dedicated to uplifting, inspiring news — all in English, all verified, and all human-written.

I created it entirely on my own — from name and branding to content strategy and technical setup.

📈 Growing the Audience Organically

I applied my digital marketing skills to grow the channel from zero to 12,000 followers. There was no paid promotion. Growth was powered by:

• Carefully written, engaging, short-form positive news updates
• Viral-focused post structure and timing
• Cross-promotion with other channels
• Strategic content placement and partnerships
• Community-focused tone and consistency

At its peak, it was one of the largest English-language news channels on Telegram — in a niche I helped define.

✍️ Content Creation & Brand Voice

Every post was crafted to sound warm, grounded, and real — no clickbait, no exaggeration. I personally curated and rewrote global stories to fit the channel’s voice. The result was high user trust and strong engagement rates.

Over time, I established a recognizable tone and style that made the channel feel more like a personal friend than a media outlet.

💰 Monetization & Exit

Once the audience hit critical mass, I began monetizing with curated ad placements that fit the channel’s values. I carefully selected partners and ad types to maintain audience trust and quality.

Eventually, I sold the channel — turning it into a successful media exit and proving that authentic, positive content could be both meaningful and profitable.

💡 What This Project Showcased

• Brand creation: from zero to a strong identity and following
• Content writing: daily content that resonates and builds trust
• Audience growth: 12k organic followers without paid ads
• Marketing: viral mechanics, channel partnerships, strategic outreach
• Monetization strategy: ethical ads and successful exit