IDN Defense (News Portal)
A high-traffic, mobile-first military and global defense news portal built using React.js, Spring Boot, and MySQL. Optimized for rapid content rendering, granular editorial controls, and sub-second full-text index searching.
In rapid-response news environments, database scalability and front-end layout transitions are vital. IDN Defense leverages highly decoupled components to distribute news items with caching mechanisms and optimized layouts.
Core Architecture & Capabilities
Engineered to deliver global articles instantly while supporting complex writing pipelines.
βοΈ React.js SPA
Single Page Application core utilizing client routing, state management, and lazy-loading of media sections to maximize browser rendering speeds.
π Spring Boot REST APIs
Stateless backend endpoints serving structured JSON streams, complete with automated pagination, token verification, and content validation.
ποΈ MySQL Database
Relational layout optimizing storage for thousands of articles, tags, writer profiles, and comment sections under concurrent database loads.
βοΈ Editorial Dashboard
Secure interface for editors to draft articles, manage tags, coordinate scheduling, and upload image assets dynamically.
π± Responsive Design
Fluid mobile-first layouts guaranteeing readability, optimized font scales, and swipe navigation across modern smartphones and tablets.
π Full-Text Search
Index-driven content searching that parses articles, titles, and categories to match client search queries in real-time.
Relational Database Schema & Content Delivery
π·οΈ Dynamic Tags & Category Maps
Normalized relational mapping tables (Many-to-Many associations) between articles and category tags, enabling high-performance tag searches without database overhead.
π JWT Editorial Security
Secures writing and scheduling operations with cryptographically signed JSON Web Tokens (JWT), preventing unauthorized content modifications.
πΈοΈ Dynamic Social Meta Injection
Dynamically populates SEO headers and Open Graph meta objects, ensuring rich media display previews when sharing articles on Twitter, Facebook, or LinkedIn.
Key Engineering Breakthroughs
High Search Latency on Broad Editorial Archives
The Problem: As the archive grew past thousands of entries, searching articles with standard SQL LIKE %query% filters generated severe database tables scans, lagging response times over 1.5 seconds.
The Solution: Implemented **MySQL Full-Text Search Indices** (FULLTEXT key) across the article body and title fields. The database query was refactored to use MATCH() AGAINST() modifiers alongside an application-level Redis cache, dropping search times to under **40ms**.
Responsive Layout Image Overload on Cellular Connections
The Problem: Serving high-resolution, desktop-optimized thumbnail images on news cards clogged mobile browser bandwidth, leading to high data overheads and slow mobile loading speeds.
The Solution: Structured **HTML5 picture tags** utilizing fluid `srcset` parameters. The Spring Boot API was updated to automatically compress, scale, and save uploaded editorial images into optimized WebP formats at varying aspect ratios, targeting screen size queries automatically.
Interested in the code?
Review React layouts, Spring Boot controllers, and structural MySQL queries on GitHub, or visit the live portal deployment.