SecureSight

A Powerful and Elegant Next.js Surveillance System

🔐 SecureSight Dashboard

A powerful surveillance dashboard to manage security camera feeds, detect incidents, and track real-time analytics.

---

🚀 Live Demo

🌐 View Deployment

---

📸 Screenshots

Home	Admin	Analytics

Cameras	Incident	Day mode

✨ Features

• 📸 Real-time camera feed management
• ⚠️ Incident detection & resolution interface
• 📊 24-Hour timeline chart & historical tracking
• 🔒 Secure API routes using Next.js App Router
• 💅 Beautiful UI with TailwindCSS + Shadcn UI
• ☁️ Scalable architecture (ideal for cloud deploy)

---

🧱 Tech Stack

Category	Tools Used
Frontend	Next.js (App Router), TypeScript
UI Kit	TailwindCSS, Shadcn/UI, Lucide Icons
Backend (API)	RESTful Routes in Next.js
DB (if used)	PostgreSQL / SQLite / Supabase
Dev Tools	ESLint, Prettier, GitHub Actions (CI/CD)
Hosting	Vercel / Netlify / Railway / Fly.io

---

🛠️ Setup & Installation

# 1. Clone the repo
git clone https://github.com/your-username/securesight-dashboard.git
cd securesight-dashboard

# 2. Install dependencies
pnpm install  # or npm install

# 3. Start the dev server
pnpm dev  # or npm run dev

🌐 App will be running at http://localhost:3000

🔐 Environment Variables (Optional)

DATABASE_URL=your_database_url
NEXT_PUBLIC_API_URL=your_api_url
USE_MOCK=true  # or false

📁 Folder Structure

securesight-dashboard/
├── .gitignore
├── app/
│   ├── admin/
│   │   └── page.tsx
│   ├── analytics/
│   │   └── page.tsx
│   ├── api/
│   │   ├── cameras/
│   │   │   └── route.ts
│   │   └── incidents/
│   │       ├── [id]/resolve/route.ts
│   │       └── route.ts
│   ├── cameras/
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   ├── loading.tsx
│   └── page.tsx
├── components/
│   ├── Footer.tsx
│   ├── IncidentList.tsx
│   ├── IncidentPlayer.tsx
│   ├── IncidentTimelineChart.tsx
│   ├── Navbar.tsx
│   ├── Timeline24Hour.tsx
│   ├── theme-provider.tsx
│   └── ui/  📦 (Shadcn UI components)
│       ├── accordion.tsx
│       ├── alert-dialog.tsx
│       ├── alert.tsx
│       ├── aspect-ratio.tsx
│       ├── avatar.tsx
│       ├── badge.tsx
│       ├── breadcrumb.tsx
│       ├── button.tsx
│       ├── calendar.tsx
│       ├── card.tsx
│       ├── carousel.tsx
│       ├── chart.tsx
│       ├── checkbox.tsx
│       ├── collapsible.tsx
│       ├── command.tsx
│       ├── context-menu.tsx
│       ├── dialog.tsx
│       ├── drawer.tsx
│       ├── dropdown-menu.tsx
│       ├── form.tsx
│       ├── hover-card.tsx
│       ├── input.tsx
│       ├── input-otp.tsx
│       ├── label.tsx
│       ├── menubar.tsx
│       ├── navigation-menu.tsx
│       ├── pagination.tsx
│       ├── popover.tsx
│       ├── progress.tsx
│       ├── radio-group.tsx
│       ├── resizable.tsx
│       ├── scroll-area.tsx
│       ├── select.tsx
│       ├── separator.tsx
│       ├── sheet.tsx
│       ├── sidebar.tsx
│       ├── skeleton.tsx
│       ├── slider.tsx
│       ├── sonner.tsx
│       ├── switch.tsx
│       ├── table.tsx
│       ├── tabs.tsx
│       ├── textarea.tsx
│       ├── toast.tsx
│       ├── toaster.tsx
│       ├── toggle.tsx
│       ├── toggle-group.tsx
│       ├── tooltip.tsx
│       ├── use-mobile.tsx
│       └── use-toast.ts
├── components.json (shadcn UI config)
├── hooks/
│   ├── use-mobile.tsx
│   └── use-toast.ts
├── lib/
│   └── utils.ts
├── next.config.js
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public/
│   ├── logo.jpg
│   ├── admin.png
│   ├── home.png
│   ├── ...
├── scripts/
│   └── schema.sql
├── styles/
│   └── globals.css
├── tailwind.config.js
└── tsconfig.json

🧪 Coming Soon

• 🎯 AI-powered anomaly detection
• 📱 Mobile-friendly responsive view
• 🌍 Multi-language support
• 📈 Admin dashboard metrics

🧑‍💻 Author

👤 Adyaprana pradhan

• GitHub: @Adyaprana
• LinkedIn: Adyaprana Pradhan
• Website: adyaprana.com

📝 License

This project is licensed under the MIT License.

📌 What You Can Customize:

• Replace https://your-deployed-link.com with your actual live link.
• Replace your-username, your.email@example.com, etc., with your details.
• Add any unique features specific to your version (like role-based access, notifications, etc.).
• Customize the UI and design to fit your branding and preferences.
• Add more features or modify existing ones to enhance the functionality.
• Ensure that the code is well-documented and easy to understand.
• Consider adding unit tests and integration tests to ensure the code works as expected.