added frontend

nexus-frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

nexus-frontend/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

nexus-frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

nexus-frontend/guide.txt

@@ -0,0 +1,185 @@
+1. Website Implementation
+Tech Stack:
+
+Frontend Framework: React.js or Next.js
+State Management: Redux or Zustand
+Styling: Tailwind CSS
+Real-time Processing: WebSockets (Socket.io)
+Data Visualization: Recharts or D3.js
+
+Implementation Approach:
+
+Create a comprehensive dashboard with:
+
+Real-time misinformation tracking
+Confidence score visualizations
+Fact-checking integration
+Interactive knowledge graphs
+User authentication system
+
+
+Key Features:
+
+Live broadcast content analysis
+Instant claim verification
+Source credibility tracking
+Detailed impact analysis
+Exportable reports
+
+
+
+Deployment:
+
+Cloud Platforms: AWS, Google Cloud
+Containerization: Docker
+Continuous Integration: GitHub Actions
+
+2. Web Browser Extension
+Tech Stack:
+
+Core Technology: React.js
+Language: TypeScript
+Browser APIs: Chrome/Firefox Extension API
+AI Integration: TensorFlow.js
+State Management: Redux Toolkit
+
+Implementation Approach:
+
+Develop modular extension components:
+
+Content script for webpage scanning
+Background script for processing
+Popup interface for settings/alerts
+Overlay mechanism for fact-checking
+
+
+Key Features:
+
+Hover-based claim verification
+Instant risk scoring
+Minimal, non-intrusive design
+Cross-site functionality
+
+
+
+Deployment:
+
+Chrome Web Store
+Firefox Add-ons
+Microsoft Edge Add-ons
+
+3. Mobile App Extension
+Tech Stack:
+
+Framework: React Native
+State Management: Redux
+AI Integration: TensorFlow Lite
+Backend: Node.js with Express
+Mobile-specific APIs
+
+Implementation Approach:
+
+Create cross-platform mobile application
+Features:
+
+News feed fact-checking
+Social media content analysis
+Offline mode for saved checks
+Push notifications for high-risk content
+
+
+
+Deployment:
+
+App Store
+Google Play Store
+Potential enterprise distribution
+
+4. Alternative Frontend Ideas
+4.1 Slack/Discord Bot
+Tech Stack:
+
+Node.js
+Discord.js/Slack API
+Machine Learning Integration
+
+Approach:
+
+Real-time message scanning
+Automatic fact-checking in chat environments
+Seamless integration with communication platforms
+
+4.2 Telegram/WhatsApp Extension
+Tech Stack:
+
+Language: Python or Node.js
+Telegram/WhatsApp API
+Serverless Functions
+
+Approach:
+
+Message content analysis
+Inline fact-checking
+Support for group chats
+Multilingual support
+
+4.3 Desktop Application
+Tech Stack:
+
+Electron.js
+React.js
+Machine Learning Integration
+Local data processing
+
+Approach:
+
+Standalone application
+Background monitoring of browsing
+Comprehensive reporting
+Advanced visualization
+
+Comparative Analysis
+ApproachProsConsBest ForWebsiteComprehensive, AccessibleRequires active navigationDetailed analysis, Professional useWeb ExtensionNon-intrusive, InstantLimited complex UICasual browsing, Quick checksMobile AppPortable, Push NotificationsScreen limitationsOn-the-go fact-checkingSlack BotWorkplace IntegrationLimited to platformProfessional environmentsDesktop AppPowerful, Offline CapableResource-intensivePower users, Deep analysis
+Recommended Implementation Strategy
+
+Start with Web Extension
+
+Fastest development
+Immediate user value
+Low barrier to entry
+Iterative improvement
+
+
+Parallel Development
+
+Web Dashboard for comprehensive analysis
+Mobile companion app
+Bot integrations as stretch goals
+
+
+
+Key Considerations
+
+Privacy-first design
+Lightweight AI models
+Minimal data transmission
+Cross-platform compatibility
+User-friendly interfaces
+Continuous model updating
+Transparent verification process
+
+Potential Challenges
+
+Real-time processing speed
+Accuracy of ML models
+API integration complexities
+User adoption and trust
+Handling multilingual content
+
+Long-term Vision
+
+Expand to multiple platforms
+Improve AI accuracy
+Build community-driven verification
+Educational components
+Global misinformation tracking

nexus-frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NEXUS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nexus-frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "nexus-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/press-start-2p": "^5.1.0",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "framer-motion": "^11.15.0",
+    "lucide-react": "^0.469.0",
+    "mui": "^0.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}

nexus-frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

nexus-frontend/src/App.tsx

@@ -0,0 +1,25 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import DeepfakeDetection from './pages/deepfake';
+import "./App.css";
+
+// Import your page components
+import Home from "./pages/Home";
+import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
+import Dashboard from "./pages/Dashboard";
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<SignIn />} />
+        <Route path="/register" element={<SignUp />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/deepfake" element={<DeepfakeDetection />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

nexus-frontend/src/components/FactCheckStream.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+
+interface CorrectionSource {
+  text: string;
+  url: string;
+}
+
+interface Claim {
+  claim: string;
+  verification_status: string;
+}
+
+interface MetaAnalysis {
+  information_ecosystem_impact: string;
+  recommended_actions: string[];
+}
+
+interface OverallAnalysis {
+  key_findings: string[];
+  patterns_identified: string[];
+  reliability_assessment: string;
+  truth_score: number;
+}
+
+interface DetailedAnalysis {
+  claim_analysis: Claim[];
+  meta_analysis: MetaAnalysis;
+  overall_analysis: OverallAnalysis;
+}
+
+interface Result {
+  timestamp: string;
+  original_text: string;
+  detailed_analysis: DetailedAnalysis;
+  correction_sources: {
+    [key: string]: {
+      [key: string]: CorrectionSource[];
+    };
+  };
+  url: string;
+  title: string;
+  summary: string;
+}
+
+interface ApiResponse {
+  result: Result;
+}
+
+const FactCheckStream = () => {
+  const [factChecks, setFactChecks] = useState<ApiResponse[] | []>([]);
+
+  useEffect(() => {
+    const ws = new WebSocket("http://localhost:8000/ws/factcheck-stream");
+
+    ws.onmessage = (event) => {
+      const result = JSON.parse(event.data);
+      console.log(result);
+      setFactChecks((prev) => [result, ...prev]);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+    };
+
+    return () => {
+      ws.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h2>Live Fact Checks</h2>
+      {factChecks.map((check, index) => (
+        <div key={index} className="fact-check-card">
+
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FactCheckStream;

nexus-frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

nexus-frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

nexus-frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,602 @@
+import React, { useState, memo } from 'react';
+import { FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare } from 'lucide-react';
+
+interface DetailedAnalysis {
+  gemini_analysis: {
+    predicted_classification: string;
+    confidence_score: string;
+    reasoning: string[];
+  };
+  text_classification: {
+    category: string;
+    writing_style: string;
+    target_audience: string;
+    content_type: string;
+  };
+  sentiment_analysis: {
+    primary_emotion: string;
+    emotional_intensity: string;
+    sensationalism_level: string;
+    bias_indicators: string[];
+    tone: {
+      formality: string;
+      style: string;
+    };
+    emotional_triggers: string[];
+  };
+  entity_recognition: {
+    source_credibility: string;
+    people: string[];
+    organizations: string[];
+    locations: string[];
+    dates: string[];
+    statistics: string[];
+  };
+  context: {
+    main_narrative: string;
+    supporting_elements: string[];
+    key_claims: string[];
+    narrative_structure: string;
+  };
+  fact_checking: {
+    verifiable_claims: string[];
+    evidence_present: string;
+    fact_check_score: string;
+  };
+}
+
+const AnimatedBackground = memo(() => {
+  const backgroundIcons = [
+    FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare
+  ];
+
+  return (
+    <div className="fixed inset-0 overflow-hidden">
+      <div className="absolute inset-0 transition-colors duration-300 bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 animate-gradient-dark" />
+      
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px)`,
+          backgroundSize: '50px 50px',
+          animation: 'moveGrid 15s linear infinite'
+        }} />
+      </div>
+
+      <div className="absolute inset-0">
+        {backgroundIcons.map((Icon, index) => (
+          <div key={index} 
+               className="absolute text-blue-400 opacity-10 animate-float-rotate"
+               style={{
+                 left: `${(index * 20) % 100}%`,
+                 top: `${(index * 25) % 100}%`,
+                 animationDelay: `${index * 2}s`,
+                 animationDuration: `${20 + index * 5}s`,
+                 transform: `scale(${0.8 + (index % 3) * 0.2})`
+               }}>
+            <Icon size={48} />
+          </div>
+        ))}
+      </div>
+
+      <div className="absolute inset-0">
+        {[...Array(5)].map((_, i) => (
+          <div key={`orb-${i}`}
+               className="absolute rounded-full bg-blue-400 blur-xl opacity-20 animate-pulse-float"
+               style={{
+                 width: `${150 + i * 50}px`,
+                 height: `${150 + i * 50}px`,
+                 left: `${(i * 30) % 100}%`,
+                 top: `${(i * 35) % 100}%`,
+                 animationDelay: `${i * 2}s`,
+                 animationDuration: `${10 + i * 2}s`
+               }} />
+        ))}
+      </div>
+
+      <div className="absolute inset-0">
+        {[...Array(20)].map((_, i) => (
+          <div key={`particle-${i}`}
+               className="absolute w-1 h-1 rounded-full bg-blue-300 opacity-30 animate-particle"
+               style={{
+                 left: `${Math.random() * 100}%`,
+                 top: `${Math.random() * 100}%`,
+                 animationDelay: `${Math.random() * 5}s`,
+                 animationDuration: `${5 + Math.random() * 10}s`
+               }} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+const Dashboard = () => {
+  const [inputText, setInputText] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [result, setResult] = useState<{
+    prediction: string;
+    detailed_analysis: {
+      gemini_analysis: {
+        predicted_classification: string;
+        confidence_score: string;
+        reasoning: string[];
+        text_classification: {
+          category: string;
+          writing_style: string;
+          target_audience: string;
+          content_type: string;
+        };
+        sentiment_analysis: {
+          primary_emotion: string;
+          emotional_intensity: string;
+          sensationalism_level: string;
+          bias_indicators: string[];
+          tone: {
+            formality: string;
+            style: string;
+          };
+          emotional_triggers: string[];
+        };
+        entity_recognition: {
+          source_credibility: string;
+          people: string[];
+          organizations: string[];
+          locations: string[];
+          dates: string[];
+          statistics: string[];
+        };
+        context: {
+          main_narrative: string;
+          supporting_elements: string[];
+          key_claims: string[];
+          narrative_structure: string;
+        };
+        fact_checking: {
+          verifiable_claims: string[];
+          evidence_present: string;
+          fact_check_score: string;
+        };
+      };
+    };
+  } | null>(null);
+  const [showDetailedAnalysis, setShowDetailedAnalysis] = useState(false);
+
+  const processInput = async () => {
+    if (!inputText.trim()) return;
+    setIsProcessing(true);
+    setResult(null);
+    setShowDetailedAnalysis(false);
+
+    try {
+      const response = await fetch('http://localhost:8000/analyze', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ text: inputText }),
+      });
+      
+      const data = await response.json();
+      setResult(data);
+    } catch (err) {
+      console.error('Analysis error:', err);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen relative overflow-hidden">
+      <AnimatedBackground />
+      <div className="relative z-10 max-w-3xl mx-auto p-6">
+        <div className="bg-gray-800/80 rounded-lg p-6 backdrop-blur-lg">
+          <div className="mb-6">
+            <h1 className="text-3xl font-bold text-white">
+              TruthTell Analysis
+            </h1>
+          </div>
+          
+          <div className="space-y-6">
+            <div className="relative">
+              <textarea
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                className="w-full h-40 p-4 rounded-xl bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
+                placeholder="Enter text to analyze..."
+              />
+              <button
+                onClick={processInput}
+                disabled={isProcessing || !inputText.trim()}
+                className="absolute bottom-4 right-4 px-6 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50"
+              >
+                Analyze
+              </button>
+            </div>
+
+            {isProcessing && (
+              <div className="text-center p-8">
+                <div className="text-blue-400">Processing...</div>
+              </div>
+            )}
+
+            {result && (
+              <div className="bg-gray-700/80 rounded-xl p-6">
+                <div className="text-center mb-4">
+                  <h2 className="text-2xl font-bold text-white capitalize">
+                    {result.prediction}
+                  </h2>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <div className="flex justify-between text-sm text-blue-300 mb-2">
+                      <span>Confidence</span>
+                      <span>{result.detailed_analysis.gemini_analysis.confidence_score}%</span>
+                    </div>
+                    <div className="h-2 bg-blue-900 rounded">
+                      <div
+                        style={{ width: `${result.detailed_analysis.gemini_analysis.confidence_score}%` }}
+                        className="h-full bg-blue-500 rounded"
+                      />
+                    </div>
+                  </div>
+                  
+                  <button
+                    onClick={() => setShowDetailedAnalysis(!showDetailedAnalysis)}
+                    className="w-full mt-4 px-6 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors"
+                  >
+                    {showDetailedAnalysis ? 'Hide Detailed Analysis' : 'View Detailed Analysis'}
+                  </button>
+
+                  {showDetailedAnalysis && (
+  <div className="mt-4 p-4 bg-gray-800 rounded-lg">
+    <h3 className="text-xl font-semibold text-white mb-3">Detailed Analysis</h3>
+    <div className="space-y-4 text-gray-300">
+      {result?.detailed_analysis?.text_classification && (
+        <div>
+          <h4 className="font-semibold text-blue-300">Text Classification</h4>
+          <p>Category: {result.detailed_analysis.text_classification.category || 'N/A'}</p>
+          <p>Writing Style: {result.detailed_analysis.text_classification.writing_style || 'N/A'}</p>
+          <p>Target Audience: {result.detailed_analysis.text_classification.target_audience || 'N/A'}</p>
+          <p>Content Type: {result.detailed_analysis.text_classification.content_type || 'N/A'}</p>
+        </div>
+      )}
+      
+      {result?.detailed_analysis?.sentiment_analysis && (
+        <div>
+          <h4 className="font-semibold text-blue-300">Sentiment Analysis</h4>
+          <p>Primary Emotion: {result.detailed_analysis.sentiment_analysis.primary_emotion || 'N/A'}</p>
+          <p>Emotional Intensity: {result.detailed_analysis.sentiment_analysis.emotional_intensity || 'N/A'}</p>
+          <p>Sensationalism Level: {result.detailed_analysis.sentiment_analysis.sensationalism_level || 'N/A'}</p>
+          <p>Tone: {result.detailed_analysis.sentiment_analysis.tone?.formality || 'N/A'}, 
+             {result.detailed_analysis.sentiment_analysis.tone?.style || 'N/A'}</p>
+        </div>
+      )}
+      
+      {result?.detailed_analysis?.entity_recognition && (
+        <div>
+          <h4 className="font-semibold text-blue-300">Entity Recognition</h4>
+          <p>Source Credibility: {result.detailed_analysis.entity_recognition.source_credibility || 'N/A'}</p>
+          <p>People: {result.detailed_analysis.entity_recognition.people?.join(', ') || 'None'}</p>
+          <p>Organizations: {result.detailed_analysis.entity_recognition.organizations?.join(', ') || 'None'}</p>
+          <p>Locations: {result.detailed_analysis.entity_recognition.locations?.join(', ') || 'None'}</p>
+        </div>
+      )}
+      
+      {result?.detailed_analysis?.fact_checking && (
+        <div>
+          <h4 className="font-semibold text-blue-300">Fact Checking</h4>
+          <p>Evidence Present: {result.detailed_analysis.fact_checking.evidence_present || 'N/A'}</p>
+          <p>Fact Check Score: {result.detailed_analysis.fact_checking.fact_check_score || 'N/A'}</p>
+          <p>Verifiable Claims: {result.detailed_analysis.fact_checking.verifiable_claims?.join(', ') || 'None'}</p>
+        </div>
+      )}
+    </div>
+  </div>
+)}
+
+
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Keep the existing style tag */}
+      <style dangerouslySetInnerHTML={{ __html: `
+        @keyframes floatRotate {
+          0% { transform: translate(0, 0) rotate(0deg); }
+          50% { transform: translate(20px, -20px) rotate(180deg); }
+          100% { transform: translate(0, 0) rotate(360deg); }
+        }
+        @keyframes pulseFloat {
+          0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+          50% { transform: translate(30px, -30px) scale(1.2); opacity: 0.3; }
+          100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+        }
+        @keyframes moveGrid {
+          0% { transform: translate(0, 0); }
+          100% { transform: translate(50px, 50px); }
+        }
+        @keyframes particle {
+          0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
+          50% { transform: translate(100px, -100px) scale(2); opacity: 0.6; }
+          100% { transform: translate(0, 0) scale(1); opacity: 0
+
+        }
+        @keyframes gradientAnimation {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+        }
+        .animate-float-rotate { animation: floatRotate 20s infinite linear; }
+        .animate-pulse-float { animation: pulseFloat 10s infinite ease-in-out; }
+        .animate-particle { animation: particle 8s infinite ease-in-out; }
+        .animate-gradient-dark { background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }
+      `}} />
+    </div>
+  );
+};
+
+export default Dashboard;
+
+// import React, { useState, memo } from 'react';
+// import { FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare } from 'lucide-react';
+
+// const AnimatedBackground = memo(() => {
+//   const backgroundIcons = [
+//     FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare
+//   ];
+
+//   return (
+//     <div className="fixed inset-0 overflow-hidden">
+//       <div className="absolute inset-0 transition-colors duration-300 bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 animate-gradient-dark" />
+      
+//       <div className="absolute inset-0 opacity-10">
+//         <div className="absolute inset-0" style={{
+//           backgroundImage: `linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px)`,
+//           backgroundSize: '50px 50px',
+//           animation: 'moveGrid 15s linear infinite'
+//         }} />
+//       </div>
+
+//       <div className="absolute inset-0">
+//         {backgroundIcons.map((Icon, index) => (
+//           <div key={index} 
+//                className="absolute text-blue-400 opacity-10 animate-float-rotate"
+//                style={{
+//                  left: `${(index * 20) % 100}%`,
+//                  top: `${(index * 25) % 100}%`,
+//                  animationDelay: `${index * 2}s`,
+//                  animationDuration: `${20 + index * 5}s`,
+//                  transform: `scale(${0.8 + (index % 3) * 0.2})`
+//                }}>
+//             <Icon size={48} />
+//           </div>
+//         ))}
+//       </div>
+
+//       <div className="absolute inset-0">
+//         {[...Array(5)].map((_, i) => (
+//           <div key={`orb-${i}`}
+//                className="absolute rounded-full bg-blue-400 blur-xl opacity-20 animate-pulse-float"
+//                style={{
+//                  width: `${150 + i * 50}px`,
+//                  height: `${150 + i * 50}px`,
+//                  left: `${(i * 30) % 100}%`,
+//                  top: `${(i * 35) % 100}%`,
+//                  animationDelay: `${i * 2}s`,
+//                  animationDuration: `${10 + i * 2}s`
+//                }} />
+//         ))}
+//       </div>
+
+//       <div className="absolute inset-0">
+//         {[...Array(20)].map((_, i) => (
+//           <div key={`particle-${i}`}
+//                className="absolute w-1 h-1 rounded-full bg-blue-300 opacity-30 animate-particle"
+//                style={{
+//                  left: `${Math.random() * 100}%`,
+//                  top: `${Math.random() * 100}%`,
+//                  animationDelay: `${Math.random() * 5}s`,
+//                  animationDuration: `${5 + Math.random() * 10}s`
+//                }} />
+//         ))}
+//       </div>
+//     </div>
+//   );
+// });
+
+// const Dashboard = () => {
+//   const [inputText, setInputText] = useState('');
+//   const [isProcessing, setIsProcessing] = useState(false);
+//   const [result, setResult] = useState<{
+//     detailed_analysis: {
+//       gemini_analysis: {
+//         predicted_classification: string;
+//         confidence_score: string;
+//         reasoning: string[];
+//       };
+//       text_classification: {
+//         category: string;
+//         writing_style: string;
+//         target_audience: string;
+//         content_type: string;
+//       };
+//       sentiment_analysis: {
+//         primary_emotion: string;
+//         emotional_intensity: string;
+//         sensationalism_level: string;
+//         bias_indicators: string[];
+//         tone: {
+//           formality: string;
+//           style: string;
+//         };
+//         emotional_triggers: string[];
+//       };
+//       fact_checking: {
+//         verifiable_claims: string[];
+//         evidence_present: string;
+//         fact_check_score: string;
+//       };
+//     };
+//   } | null>(null);
+//   const [showDetailedAnalysis, setShowDetailedAnalysis] = useState(false);
+
+//   const processInput = async () => {
+//     if (!inputText.trim()) return;
+//     setIsProcessing(true);
+//     setResult(null);
+//     setShowDetailedAnalysis(false);
+
+//     try {
+//       const response = await fetch('http://localhost:8000/analyze', {
+//         method: 'POST',
+//         headers: {
+//           'Content-Type': 'application/json',
+//         },
+//         body: JSON.stringify({ text: inputText }),
+//       });
+      
+//       const data = await response.json();
+//       setResult(data);
+//     } catch (err) {
+//       console.error('Analysis error:', err);
+//     } finally {
+//       setIsProcessing(false);
+//     }
+//   };
+
+//   return (
+//     <div className="min-h-screen relative overflow-hidden">
+//       <AnimatedBackground />
+//       <div className="relative z-10 max-w-3xl mx-auto p-6">
+//         <div className="bg-gray-800/80 rounded-lg p-6 backdrop-blur-lg">
+//           <div className="mb-6">
+//             <h1 className="text-3xl font-bold text-white">
+//               TruthTell Analysis
+//             </h1>
+//           </div>
+          
+//           <div className="space-y-6">
+//             <div className="relative">
+//               <textarea
+//                 value={inputText}
+//                 onChange={(e) => setInputText(e.target.value)}
+//                 className="w-full h-40 p-4 rounded-xl bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
+//                 placeholder="Enter text to analyze..."
+//               />
+//               <button
+//                 onClick={processInput}
+//                 disabled={isProcessing || !inputText.trim()}
+//                 className="absolute bottom-4 right-4 px-6 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50"
+//               >
+//                 Analyze
+//               </button>
+//             </div>
+
+//             {isProcessing && (
+//               <div className="text-center p-8">
+//                 <div className="text-blue-400">Processing...</div>
+//               </div>
+//             )}
+
+//             {result && (
+//               <div className="bg-gray-700/80 rounded-xl p-6">
+//                 <div className="text-center mb-4">
+//                   <h2 className="text-2xl font-bold text-white capitalize">
+//                     {result.detailed_analysis.gemini_analysis.predicted_classification}
+//                   </h2>
+//                 </div>
+
+//                 <div className="space-y-4">
+//                   <div>
+//                     <div className="flex justify-between text-sm text-blue-300 mb-2">
+//                       <span>Confidence</span>
+//                       <span>{result.detailed_analysis.gemini_analysis.confidence_score}%</span>
+//                     </div>
+//                     <div className="h-2 bg-blue-900 rounded">
+//                       <div
+//                         style={{ width: `${result.detailed_analysis.gemini_analysis.confidence_score}%` }}
+//                         className="h-full bg-blue-500 rounded"
+//                       />
+//                     </div>
+//                   </div>
+                  
+//                   <button
+//                     onClick={() => setShowDetailedAnalysis(!showDetailedAnalysis)}
+//                     className="w-full mt-4 px-6 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors"
+//                   >
+//                     {showDetailedAnalysis ? 'Hide Detailed Analysis' : 'View Detailed Analysis'}
+//                   </button>
+
+//                   {showDetailedAnalysis && (
+//                     <div className="mt-4 p-4 bg-gray-800 rounded-lg">
+//                       <h3 className="text-xl font-semibold text-white mb-3">Detailed Analysis</h3>
+//                       <div className="space-y-4 text-gray-300">
+//                         <div>
+//                           <h4 className="font-semibold text-blue-300">Text Classification</h4>
+//                           <p>Category: {result.detailed_analysis.text_classification.category || 'N/A'}</p>
+//                           <p>Writing Style: {result.detailed_analysis.text_classification.writing_style || 'N/A'}</p>
+//                           <p>Target Audience: {result.detailed_analysis.text_classification.target_audience || 'N/A'}</p>
+//                           <p>Content Type: {result.detailed_analysis.text_classification.content_type || 'N/A'}</p>
+//                         </div>
+                        
+//                         <div>
+//                           <h4 className="font-semibold text-blue-300">Sentiment Analysis</h4>
+//                           <p>Primary Emotion: {result.detailed_analysis.sentiment_analysis.primary_emotion || 'N/A'}</p>
+//                           <p>Emotional Intensity: {result.detailed_analysis.sentiment_analysis.emotional_intensity || 'N/A'}</p>
+//                           <p>Sensationalism Level: {result.detailed_analysis.sentiment_analysis.sensationalism_level || 'N/A'}</p>
+//                           <p>Tone: {result.detailed_analysis.sentiment_analysis.tone?.formality || 'N/A'}, 
+//                              {result.detailed_analysis.sentiment_analysis.tone?.style || 'N/A'}</p>
+//                         </div>
+                        
+//                         <div>
+//                           <h4 className="font-semibold text-blue-300">Fact Checking</h4>
+//                           <p>Evidence Present: {result.detailed_analysis.fact_checking.evidence_present || 'N/A'}</p>
+//                           <p>Fact Check Score: {result.detailed_analysis.fact_checking.fact_check_score || 'N/A'}</p>
+//                           <p>Verifiable Claims: {result.detailed_analysis.fact_checking.verifiable_claims?.join(', ') || 'None'}</p>
+//                         </div>
+//                       </div>
+//                     </div>
+//                   )}
+//                 </div>
+//               </div>
+//             )}
+//           </div>
+//         </div>
+//       </div>
+//       <style dangerouslySetInnerHTML={{ __html: `
+//         @keyframes floatRotate {
+//           0% { transform: translate(0, 0) rotate(0deg); }
+//           50% { transform: translate(20px, -20px) rotate(180deg); }
+//           100% { transform: translate(0, 0) rotate(360deg); }
+//         }
+//         @keyframes pulseFloat {
+//           0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+//           50% { transform: translate(30px, -30px) scale(1.2); opacity: 0.3; }
+//           100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+//         }
+//         @keyframes moveGrid {
+//           0% { transform: translate(0, 0); }
+//           100% { transform: translate(50px, 50px); }
+//         }
+//         @keyframes particle {
+//           0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
+//           50% { transform: translate(100px, -100px) scale(2); opacity: 0.6; }
+//           100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
+//         }
+//         @keyframes gradientAnimation {
+//           0% { background-position: 0% 50%; }
+//           50% { background-position: 100% 50%; }
+//           100% { background-position: 0% 50%; }
+//         }
+//         .animate-float-rotate { animation: floatRotate 20s infinite linear; }
+//         .animate-pulse-float { animation: pulseFloat 10s infinite ease-in-out; }
+//         .animate-particle { animation: particle 8s infinite ease-in-out; }
+//         .animate-gradient-dark { background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }
+//       `}} />
+//     </div>
+//   );
+// };
+
+// export default Dashboard;

nexus-frontend/src/pages/Home.css

@@ -0,0 +1,91 @@
+.retro-theme {
+  background: #0a0a2a;
+  color: #00ff41;
+  font-family: "Press Start 2P", monospace;
+}
+
+.hero-section {
+  text-align: center;
+  margin: 4rem 0;
+}
+
+.glitch-text {
+  text-shadow: 2px 2px #ff00ff;
+  animation: glitch 1s infinite;
+}
+
+.subtitle {
+  color: #00ff41;
+  margin: 1rem 0;
+}
+
+.cta-button {
+  background: #ff00ff;
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  font-size: 1.2rem;
+  cursor: pointer;
+  border-radius: 4px;
+  font-family: inherit;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin: 4rem 0;
+}
+
+.feature-card {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 8px;
+  border: 1px solid #00ff41;
+  text-align: center;
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: #ff00ff;
+}
+
+.tech-stack {
+  text-align: center;
+  margin: 4rem 0;
+}
+
+.tech-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.badge {
+  background: #ff00ff;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.9rem;
+}
+
+@keyframes glitch {
+  0% {
+    text-shadow: 2px 2px #ff00ff;
+  }
+  25% {
+    text-shadow: -2px 2px #00ff41;
+  }
+  50% {
+    text-shadow: 2px -2px #ff00ff;
+  }
+  75% {
+    text-shadow: -2px -2px #00ff41;
+  }
+  100% {
+    text-shadow: 2px 2px #ff00ff;
+  }
+}

nexus-frontend/src/pages/Home.tsx

@@ -0,0 +1,100 @@
+import { Link } from 'react-router-dom';
+import { motion } from "framer-motion";
+import { FaCheckCircle, FaBolt, FaDatabase, FaBrain } from "react-icons/fa";
+import "./Home.css";
+
+const Home = () => {
+  const features = [
+    {
+      icon: <FaBolt className="text-4xl text-fuchsia-500" />,
+      title: "Real-Time Detection",
+      description: "Instant fact-checking during live broadcasts",
+    },
+    {
+      icon: <FaBrain className="text-4xl text-fuchsia-500" />,
+      title: "AI-Powered Analysis",
+      description: "Advanced machine learning for accurate verification",
+    },
+    {
+      icon: <FaDatabase className="text-4xl text-fuchsia-500" />,
+      title: "Knowledge Graph",
+      description: "Comprehensive fact database with Neo4j",
+    },
+    {
+      icon: <FaCheckCircle className="text-4xl text-fuchsia-500" />,
+      title: "Truth Detection",
+      description: "Sophisticated NLP for misinformation detection",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen retro-theme p-8">
+      <motion.div
+        className="text-center my-16"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <h1 className="text-5xl md:text-8xl font-bold mb-4 glitch-text">
+          NEXUS OF TRUTH
+        </h1>
+        <p className="text-xl md:text-2xl mb-8">
+          Real-Time Misinformation Detection System
+        </p>
+        <Link to="/dashboard">
+        <motion.button
+          className="bg-fuchsia-600 text-white px-8 py-4 rounded-lg text-lg font-bold hover:bg-fuchsia-700 transition-colors"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          >
+          Get Started
+        </motion.button>
+        </Link>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 my-16">
+        {features.map((feature, index) => (
+          <motion.div
+            key={index}
+            className="p-6 rounded-xl border border-[#00ff41] bg-opacity-5 bg-white backdrop-blur-sm"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: index * 0.2 }}
+            whileHover={{ scale: 1.05 }}
+          >
+            <div className="flex justify-center mb-4">{feature.icon}</div>
+            <h3 className="text-xl font-bold mb-2 text-center">
+              {feature.title}
+            </h3>
+            <p className="text-center text-sm">{feature.description}</p>
+          </motion.div>
+        ))}
+      </div>
+
+      <motion.div
+        className="text-center my-16"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1 }}
+      >
+        <h2 className="text-3xl font-bold mb-8">
+          Powered by Advanced Technology
+        </h2>
+        <div className="flex flex-wrap justify-center gap-4">
+          {["Python", "TensorFlow", "PyTorch", "BERT", "Kafka", "Neo4j"].map(
+            (tech, index) => (
+              <span
+                key={index}
+                className="px-4 py-2 bg-fuchsia-600 text-white rounded-full text-sm"
+              >
+                {tech}
+              </span>
+            )
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Home;

nexus-frontend/src/pages/SignIn.tsx

@@ -0,0 +1,5 @@
+const SignIn = () => {
+  return <div>SignIn</div>;
+};
+
+export default SignIn;

nexus-frontend/src/pages/SignUp.tsx

@@ -0,0 +1,5 @@
+const SignUp = () => {
+  return <div>SignUp</div>;
+};
+
+export default SignUp;

nexus-frontend/src/pages/deepfake.tsx

@@ -0,0 +1,177 @@
+import React, { useState, memo } from 'react';
+import { FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare } from 'lucide-react';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+const AnimatedBackground = memo(() => {
+  const backgroundIcons = [
+    FileCheck, Shield, Database, Newspaper, Search, CheckCircle, AlertTriangle, Lock, Unlock, MessageSquare
+  ];
+
+  return (
+    <div className="fixed inset-0 overflow-hidden">
+      <div className="absolute inset-0 transition-colors duration-300 bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 animate-gradient-dark" />
+      
+      {/* Grid Background */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px)`,
+          backgroundSize: '50px 50px',
+          animation: 'moveGrid 15s linear infinite'
+        }} />
+      </div>
+
+      {/* Floating Icons */}
+      <div className="absolute inset-0">
+        {backgroundIcons.map((Icon, index) => (
+          <div key={index} 
+               className="absolute text-blue-400 opacity-10 animate-float-rotate"
+               style={{
+                 left: `${(index * 20) % 100}%`,
+                 top: `${(index * 25) % 100}%`,
+                 animationDelay: `${index * 2}s`,
+                 animationDuration: `${20 + index * 5}s`,
+                 transform: `scale(${0.8 + (index % 3) * 0.2})`
+               }}>
+            <Icon size={48} />
+          </div>
+        ))}
+      </div>
+
+      {/* Glowing Orbs */}
+      <div className="absolute inset-0">
+        {[...Array(5)].map((_, i) => (
+          <div key={`orb-${i}`}
+               className="absolute rounded-full bg-blue-400 blur-xl opacity-20 animate-pulse-float"
+               style={{
+                 width: `${150 + i * 50}px`,
+                 height: `${150 + i * 50}px`,
+                 left: `${(i * 30) % 100}%`,
+                 top: `${(i * 35) % 100}%`,
+                 animationDelay: `${i * 2}s`,
+                 animationDuration: `${10 + i * 2}s`
+               }} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+const DeepfakeDetection = () => {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleImageSelect = (event) => {
+    const file = event.target.files[0];
+    setSelectedImage(file);
+  };
+
+  const handleUpload = async () => {
+    if (!selectedImage) return;
+    setLoading(true);
+    const formData = new FormData();
+    formData.append('image', selectedImage);
+
+    try {
+      const response = await fetch('http://localhost:8000/detect-deepfake', {
+        method: 'POST',
+        body: formData,
+      });
+      const data = await response.json();
+      setResult(data);
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen relative overflow-hidden">
+      <AnimatedBackground />
+      <div className="relative z-10 max-w-3xl mx-auto p-6">
+        <div className="bg-gray-800/80 rounded-lg p-6 backdrop-blur-lg">
+          <div className="mb-6">
+            <h1 className="text-3xl font-bold text-white">
+              Deepfake Detection
+            </h1>
+          </div>
+          
+          <div className="space-y-6">
+            <div className="flex flex-col items-center">
+              <input
+                accept="image/*"
+                className="hidden"
+                id="image-upload"
+                type="file"
+                onChange={handleImageSelect}
+              />
+              <label htmlFor="image-upload">
+                <div className="px-6 py-3 rounded-lg bg-blue-500 hover:bg-blue-600 text-white cursor-pointer flex items-center gap-2">
+                  <CloudUploadIcon />
+                  Upload Image
+                </div>
+              </label>
+              
+              {selectedImage && (
+                <div className="mt-4 text-center">
+                  <p className="text-blue-300">Selected: {selectedImage.name}</p>
+                  <img 
+                    src={URL.createObjectURL(selectedImage)} 
+                    alt="Preview" 
+                    className="max-w-md mt-4 rounded-lg mx-auto"
+                  />
+                </div>
+              )}
+              
+              <button
+                onClick={handleUpload}
+                disabled={!selectedImage || loading}
+                className="mt-4 px-6 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50"
+              >
+                Analyze
+              </button>
+            </div>
+
+            {loading && (
+              <div className="text-center p-8">
+                <div className="text-blue-400">Processing...</div>
+              </div>
+            )}
+
+            {result && (
+              <div className="bg-gray-700/80 rounded-xl p-6 mt-4">
+                <h2 className="text-xl font-semibold text-white mb-3">Detection Results:</h2>
+                <pre className="text-gray-300 overflow-auto p-4 bg-gray-800 rounded-lg">
+                  {JSON.stringify(result, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <style dangerouslySetInnerHTML={{ __html: `
+        @keyframes floatRotate {
+          0% { transform: translate(0, 0) rotate(0deg); }
+          50% { transform: translate(20px, -20px) rotate(180deg); }
+          100% { transform: translate(0, 0) rotate(360deg); }
+        }
+        @keyframes pulseFloat {
+          0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+          50% { transform: translate(30px, -30px) scale(1.2); opacity: 0.3; }
+          100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
+        }
+        @keyframes moveGrid {
+          0% { transform: translate(0, 0); }
+          100% { transform: translate(50px, 50px); }
+        }
+        .animate-float-rotate { animation: floatRotate 20s infinite linear; }
+        .animate-pulse-float { animation: pulseFloat 10s infinite ease-in-out; }
+        .animate-gradient-dark { background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }
+      `}} />
+    </div>
+  );
+};
+
+export default DeepfakeDetection;

nexus-frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

nexus-frontend/tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        'scan-lines': {
+          '0%, 100%': { transform: 'translateY(-50%)' },
+          '50%': { transform: 'translateY(50%)' }
+        }
+      },
+      animation: {
+        'scan-lines': 'scan-lines 2s linear infinite'
+      }
+    },
+  },
+  plugins: [],
+}

nexus-frontend/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

nexus-frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

nexus-frontend/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

nexus-frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})