🚀 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.