cpojha/Sentinel

📌 Project Sentinel is a monitoring and analysis tool built to track online disinformation campaigns. It collects data in real time from social platforms, detects coordinated activity, and highlights emerging threats with live alerts and dashboards.

🚀 Project Sentinel

Project Sentinel is a full-stack React + Vite + TailwindCSS application designed to monitor, analyze, and visualize disinformation campaigns. It includes AI-powered dashboards, real-time updates via Socket.IO, and LLM-assisted analysis.

---

📑 Table of Contents

1. Tech Stack
2. Features
3. Installation
4. Running Locally
5. Available Scripts
6. Common Issues & Fixes
7. Contributing
8. License

---

⚙️ Tech Stack

• Frontend Framework: React.js (with Vite for fast builds)
• Styling:
  • Tailwind CSS (utility-first)
  • shadcn/ui for accessible UI components
  • Framer Motion for smooth animations
• State Management:
  • Redux Toolkit (for complex data flows)
  • React Query (for server data caching)
• Data Visualization:
  • Recharts
  • D3.js (for advanced graphs, optional)
• Real-Time Updates: Socket.IO
• Routing: React Router v7

---

✨ Features

• 🔐 Authentication Pages: Login & Signup flows
• 📊 Dashboard: Active campaigns, severity charts, real-time alerts
• 🤖 AI Assistant: Chat interface with an LLM for analyst queries
• 📂 Campaigns Archive: Searchable, filterable list of past disinformation campaigns
• 📈 Analytics & Trends: KPI flash cards, platform breakdown, geo-impact, AI detection summary
• ⚡ Real-Time Alerts: Streamed via Socket.IO
• 🎨 Responsive UI: Modern and consistent across devices

---

🛠 Installation

1. Clone the Repository

git clone https://github.com/CrazyBong/Sentinel/
cd project-sentinel

2. Install Dependencies

Make sure you have Node.js >= 18 and npm >= 9 installed. Then run:

npm install

3. Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

4. Install UI Libraries

npm install @radix-ui/react-icons class-variance-authority clsx tailwind-variants
npm install framer-motion recharts socket.io-client

---

▶️ Running Locally

Start the development server:

npm run dev

Open in browser:

http://localhost:5173

Build for production:

npm run build

Preview production build:

npm run preview

---

🐛 Common Issues & Fixes

1. Tailwind config not found

Can't resolve './tailwind.config.js'

✅ Ensure tailwind.config.js is in the project root, not inside src/.

2. Import alias @ not working

Failed to resolve import "@/pages/LoginPage"

✅ Fix by editing vite.config.js:

resolve: {
  alias: { "@": path.resolve(__dirname, "./src") }
}

3. Lucide icon import errors

does not provide an export named 'RedditLogo'

✅ Replace Lucide with custom inline SVG components (XIcon, RedditIcon).

4. White screen after npm run dev

• Check App.jsx for invalid syntax (often leftover Git conflict markers like <<<<<<< HEAD).
• Make sure all routes are wrapped correctly with <Routes> and <Route>.

5. Motion import unused

If not using animations, remove:

import { motion } from "framer-motion"

to avoid linter errors.

---

🤝 Contributing

1. Fork this repo
2. Create a new branch (feature/new-component)
3. Commit changes (git commit -m "Added new feature")
4. Push branch (git push origin feature/new-component)
5. Create a Pull Request

---

📜 License

This project is licensed under the Vortex team — free to use and modify with attribution.