| import { motion } from 'motion/react'; |
| export default function ClientServerArchitectureDiagram() { |
| return ( |
| <motion.div initial={{ opacity: 0, y: 24, scale: 0.97 }} animate={{ opacity: 1, y: 0, scale: 1 }} transition={{ duration: 0.7, ease: [0.25,0.1,0.25,1] as const, delay: 0.2 }} className="mt-10 mb-4"> |
| <div className="text-center mb-6"><span className="text-lg font-bold uppercase tracking-widest text-emerald-400" style={{ filter: 'drop-shadow(0 0 10px rgba(16,185,129,0.5))' }}>CLIENT-SERVER ARCHITECTURE</span></div> |
| <svg viewBox="0 0 900 600" className="w-full max-w-6xl mx-auto" style={{ filter: 'drop-shadow(0 0 30px rgba(16,185,129,0.1))' }}> |
| <defs> |
| <marker id="csArrReq" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#3b82f6"/></marker> |
| <marker id="csArrRes" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#10b981"/></marker> |
| <linearGradient id="csHdr" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="rgba(16,185,129,0.2)"/><stop offset="100%" stopColor="rgba(16,185,129,0.05)"/></linearGradient> |
| </defs> |
| <rect x="20" y="10" width="860" height="44" rx="12" fill="url(#csHdr)" stroke="rgba(16,185,129,0.4)" strokeWidth="2"/> |
| <text x="45" y="28" fill="#34d399" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">Client-Server Model:</text> |
| <text x="180" y="28" fill="#6ee7b7" fontSize="9" fontFamily="'Inter',sans-serif">Distributed architecture partitioning tasks between service providers (servers) and service requesters (clients).</text> |
| <text x="45" y="42" fill="#64748b" fontSize="8" fontFamily="'Inter',sans-serif">The foundation of the modern web (HTTP), email (SMTP/IMAP), and most networked applications.</text> |
| |
| {/* Clients */} |
| <rect x="20" y="65" width="260" height="360" rx="12" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.3)" strokeWidth="1.5"/> |
| <text x="150" y="85" textAnchor="middle" fill="#60a5fa" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">CLIENTS</text> |
| <text x="150" y="100" textAnchor="middle" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Frontend / UI / Devices</text> |
| |
| {/* Mobile */} |
| <rect x="110" y="130" width="80" height="120" rx="10" fill="rgba(59,130,246,0.15)" stroke="#60a5fa" strokeWidth="2"/> |
| <rect x="115" y="135" width="70" height="100" rx="5" fill="rgba(15,23,42,0.8)"/> |
| <circle cx="150" cy="242" r="4" fill="rgba(59,130,246,0.4)"/> |
| <text x="150" y="185" textAnchor="middle" fill="#93c5fd" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Mobile App</text> |
| |
| {/* Laptop */} |
| <path d="M 60 330 L 240 330 L 250 340 L 50 340 Z" fill="rgba(59,130,246,0.3)" stroke="#60a5fa" strokeWidth="1"/> |
| <rect x="80" y="270" width="140" height="60" rx="4" fill="rgba(59,130,246,0.15)" stroke="#60a5fa" strokeWidth="2"/> |
| <rect x="85" y="275" width="130" height="50" rx="2" fill="rgba(15,23,42,0.8)"/> |
| <text x="150" y="305" textAnchor="middle" fill="#93c5fd" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Web Browser</text> |
| |
| <text x="150" y="380" textAnchor="middle" fill="#60a5fa" fontSize="8" fontFamily="'Inter',sans-serif">Initiates requests • Renders UI</text> |
| <text x="150" y="395" textAnchor="middle" fill="#60a5fa" fontSize="8" fontFamily="'Inter',sans-serif">Holds state (cookies, local storage)</text> |
| |
| {/* Network / Internet */} |
| <ellipse cx="450" cy="245" rx="90" ry="50" fill="rgba(148,163,184,0.05)" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" strokeDasharray="5,5"/> |
| <text x="450" y="240" textAnchor="middle" fill="#cbd5e1" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">INTERNET / NETWORK</text> |
| <text x="450" y="255" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">TCP/IP • HTTP(S) • WebSockets</text> |
| |
| {/* Arrows */} |
| <path d="M 285 220 Q 360 210 420 220" fill="none" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#csArrReq)"/> |
| <text x="350" y="210" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Request (GET/POST)</text> |
| |
| <path d="M 615 220 Q 540 210 480 220" fill="none" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#csArrReq)"/> |
| <text x="550" y="210" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Request</text> |
| |
| <path d="M 480 270 Q 540 280 615 270" fill="none" stroke="#10b981" strokeWidth="2" markerEnd="url(#csArrRes)"/> |
| <text x="550" y="288" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Response (JSON/HTML)</text> |
| |
| <path d="M 420 270 Q 360 280 285 270" fill="none" stroke="#10b981" strokeWidth="2" markerEnd="url(#csArrRes)"/> |
| <text x="350" y="288" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Response (200 OK)</text> |
| |
| {/* Servers */} |
| <rect x="620" y="65" width="260" height="360" rx="12" fill="rgba(16,185,129,0.05)" stroke="rgba(16,185,129,0.3)" strokeWidth="1.5"/> |
| <text x="750" y="85" textAnchor="middle" fill="#10b981" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">SERVERS</text> |
| <text x="750" y="100" textAnchor="middle" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Backend / API / Database</text> |
| |
| {/* Web/App Server */} |
| <rect x="680" y="130" width="140" height="90" rx="8" fill="rgba(16,185,129,0.15)" stroke="#10b981" strokeWidth="2"/> |
| <text x="750" y="160" textAnchor="middle" fill="#6ee7b7" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">Web/API Server</text> |
| <text x="750" y="175" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Node.js, Go, Python</text> |
| <text x="750" y="185" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Business Logic & Auth</text> |
| |
| {/* Database */} |
| <path d="M 690 280 Q 750 265 810 280 L 810 330 Q 750 345 690 330 Z" fill="rgba(245,158,11,0.15)" stroke="#fbbf24" strokeWidth="2"/> |
| <path d="M 690 280 Q 750 295 810 280" fill="none" stroke="#fbbf24" strokeWidth="2"/> |
| <text x="750" y="315" textAnchor="middle" fill="#fbbf24" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">Database</text> |
| <text x="750" y="330" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">PostgreSQL / MongoDB</text> |
| |
| <path d="M 730 220 L 730 270" fill="none" stroke="#10b981" strokeWidth="1.5" strokeDasharray="4,2"/> |
| <path d="M 770 270 L 770 220" fill="none" stroke="#fbbf24" strokeWidth="1.5" strokeDasharray="4,2"/> |
| <text x="700" y="250" fill="#94a3b8" fontSize="6.5" fontFamily="'Inter',sans-serif">Query</text> |
| <text x="775" y="250" fill="#94a3b8" fontSize="6.5" fontFamily="'Inter',sans-serif">Data</text> |
| |
| <text x="750" y="380" textAnchor="middle" fill="#10b981" fontSize="8" fontFamily="'Inter',sans-serif">Listens for requests • Processes data</text> |
| <text x="750" y="395" textAnchor="middle" fill="#10b981" fontSize="8" fontFamily="'Inter',sans-serif">Centralized security & storage</text> |
| |
| {/* Comparison and traits */} |
| <rect x="20" y="440" width="860" height="140" rx="10" fill="rgba(15,23,42,0.4)" stroke="rgba(16,185,129,0.2)" strokeWidth="1.5"/> |
| <text x="450" y="460" textAnchor="middle" fill="#e2e8f0" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">KEY CONCEPTS</text> |
| |
| {/* Tiers */} |
| <rect x="40" y="475" width="250" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/> |
| <text x="165" y="495" textAnchor="middle" fill="#34d399" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">N-Tier Architecture</text> |
| <text x="50" y="515" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 1-Tier: Client, logic, DB on same machine</text> |
| <text x="50" y="530" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 2-Tier: Client (Logic+UI) directly to DB</text> |
| <text x="50" y="545" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">• 3-Tier: Presentation (Client) → Application (Server) → Data (DB)</text> |
| |
| {/* Characteristics */} |
| <rect x="305" y="475" width="290" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/> |
| <text x="450" y="495" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Characteristics</text> |
| <text x="315" y="515" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">✓ Separation of Concerns: UI decoupled from logic.</text> |
| <text x="315" y="530" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">✓ Scalability: Can scale servers independently of clients.</text> |
| <text x="315" y="545" fill="#f87171" fontSize="7.5" fontFamily="'Inter',sans-serif">✗ Single Point of Failure (if server goes down, clients fail).</text> |
| |
| {/* Stateful vs Stateless */} |
| <rect x="610" y="475" width="250" height="85" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/> |
| <text x="735" y="495" textAnchor="middle" fill="#c084fc" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">State Management</text> |
| <text x="620" y="515" fill="#e2e8f0" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Stateless (REST):</text> |
| <text x="620" y="527" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Each request contains all info needed. Easier to scale.</text> |
| <text x="620" y="542" fill="#e2e8f0" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Stateful (WebSockets):</text> |
| <text x="620" y="554" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Persistent connection. Server remembers client data.</text> |
| |
| </svg> |
| </motion.div> |
| ); |
| } |
|
|
