Agnific

Intelligence Built for Impact
Agentic AI Systems • Autonomous Intelligence Infrastructure • Enterprise-Grade Cognitive Architecture

💠 Overview

Agnific is an elite, high-performance web platform and technical academy engine engineered for autonomous intelligence systems, agentic AI solutions, and production software engineering. It connects brand identity, interactive enterprise project showcases (80+ projects), academy faculty leadership, cohort training programs, and real-time visitor analytics through an Express 5 & SQLite (agnific.db) Backend Architecture paired with Google Sheets 24-Hour Auto-Sync and a powerful Admin Control Center.

The platform features dual high-contrast theme systems:

• Dark Mode (Default): Deep Slate Obsidian Ground (#090D16) × Confident Royal Sapphire (#2563EB) × Cyber Neon Accents (#7C3AED, #10B981, #F97316).
• Light Mode: Clean Paper Ground (#F8FAFC) with crisp border hierarchy and high-contrast WCAG AA typography.

✨ Key Architectural Features & Innovations

1. 🎓 Academy Faculty & Interactive Instructor Grid (ChromaGrid)

• Interactive Multi-Color Cards: Rendered with dynamic cyber palette accents (Sapphire, Amethyst, Emerald, Amber, Rose, Cyan), pulsing active status indicators, and tech stack pills.
• Faculty Profile Modal: Staggered Framer Motion modals displaying complete instructor bios, mentorship philosophies, technical core skills, and direct GitHub/LinkedIn profile links.
• Training Cohorts Engine: Seeded with 13 production engineering courses (C++ & Python Fundamentals, DSA, AI/ML, NLP, Computer Vision, Web Scraping, Agentic AI) and live application submission handling (/api/cohort-applications).

2. ⚡ Automated Multi-Tier Project Sorting Engine

All project repositories across the site are automatically sorted using a deterministic two-pass algorithm (sortProjects):

1. Primary Pass (Featured Rank): Projects flagged as featured: true (or enabled in Admin) are pinned to the top.
2. Secondary Pass (Chronological Rank): Within each tier (featured and standard), projects are sorted strictly by date descending (parseProjectDate), ensuring the newest engineering releases appear first.

3. 🎨 Advanced Visual Components & Cyberpunk Design System

• LaserFlow.jsx: High-frequency canvas visualizer rendering animated laser beam circuits and particle paths.
• MagicBento.jsx: Glassmorphic bento grid showcase displaying capabilities, cloud infrastructure metrics, and core engineering pillars.
• ProfileCard.jsx & ProfileCard.css: Holographic 3D profile identity card with interactive hover tilt and social badges.
• ChromaGrid.jsx: Feature-rich, multi-colored instructor grid with modal detail drawers.

🗄️ SQLite Database Architecture (agnific.db)

All system data is natively persisted in a zero-dependency SQLite database file (agnific.db) initialized at root via server.js (powered by Node 22 node:sqlite in WAL mode).

SQLite Schemas & REST Endpoints:

| Table Name | REST Endpoint | Description | | :--- | :--- | :--- | | 🔑 settings | /api/settings | System security key (security_key), branding tokens, custom CSS variable overrides, and site flags. | | 🚀 projects | /api/projects | 80+ enterprise projects, screenshot galleries, tech stack tags, assigned dev UIDs, and featured flags. | | 👥 team | /api/team | Faculty & core team profiles, Base64 avatars, designations, biographies, skills, and instructor track tags. | | 🎓 courses | /api/courses | 13 default production engineering courses, curricula breakdowns, duration, and instructor assignments. | | 📋 cohort_applications | /api/cohort-applications | Student cohort applications, background details, contact info, and course selections. | | 💬 testimonials | /api/testimonials | External Google Sheet connections, column visibility matrices, and 24-hour background sync timestamps. | | 📊 visitors | /api/visits & /api/visits/stats | Visitor telemetry (IP address, path, user agent, browser, OS, device) and IP frequency breakdown. | | 📧 messages | /api/contact | Contact Us form submissions dispatched directly to SQLite for administrative management. |

🔄 Tri-Tier Data Fallback Engine

To guarantee 100% uptime across local environments, public Ngrok tunnels, and static deployments:

1. Backend SQLite API (Primary): Fetches /api/projects, /api/team, and /api/courses from local Express + SQLite backend.
2. Google Sheets Auto-Sync (Secondary): Fetches live CSV spreadsheet data from connected Google Spreadsheets configured in config.yml (with a 24-hour background refresh scheduler).
3. Local Snapshot Fallback (public/mock-data.json): If backend API or sheets are unreachable, seamlessly falls back to public/mock-data.json containing the complete 80+ project catalog and team snapshot.

🛠️ Technical Stack

| Layer | Technology | | :--- | :--- | | Frontend Framework | React 19 + Vite 6 | | Routing | React Router 7 | | Backend Server | Express 5 (Node.js) | | Database | Native SQLite (agnific.db via node:sqlite WAL mode) | | Animation & Motion | Framer Motion 12 | | Icons & Media | Lucide React + DevIcon SVG Set | | Sync Engine | Google Sheets CSV Parser + 24-Hour Auto-Scheduler | | Integrations | GitHub Public API (Repo & Profile auto-importer) |

🚀 Local Development & Setup

1. Standard Installation

# Clone the repository
git clone https://github.com/RasikhAli/Agnific.git
cd Agnific

# Install dependencies
npm install

# Start backend Express/SQLite server + Vite dev server concurrently
npm run dev

Note: npm run dev initializes agnific.db, starts the Express backend on http://localhost:5000, and starts the Vite dev server on http://localhost:5173. Requests to /api/* are automatically proxied to port 5000.

2. Exposing Locally via Ngrok

# Terminal 1: Run local dev server
npm run dev

# Terminal 2: Start Ngrok tunnel on port 5173
ngrok http 5173

vite.config.js is configured with allowedHosts: true and changeOrigin: true on /api, ensuring public tunnels seamlessly forward API calls to the local SQLite database.

🔐 Admin Control Center (/admin)

Access the administrative control center at http://localhost:5173/admin (Default Security Key: admin):

• 📊 Traffic & IP Intelligence: Real-time traffic stats, 14-day trend graphs, top visited pages, device distribution, and IP frequency logs.
• 🚀 Project Manager & GitHub Auto-Importer: Add/edit/delete projects, toggle featured rank, or paste a GitHub URL to auto-populate metadata.
• 👥 Faculty & Team Manager: Manage active instructors, assigned tracks, avatars, bio text, and social links.
• 🎓 Cohort Applications Viewer: Review student applications, contact details, and course choices.
• 🎨 Live Theme Customizer: Tweak brand colors with instant DOM CSS variable overrides and contrast checks.

🗂️ Repository Structure

Agnific/
├── agnific.db                # SQLite Database file (Auto-created by server.js)
├── server.js                 # Express 5 API server & SQLite database controller
├── public/
│   ├── mock-data.json        # Fallback database snapshot (80+ projects & team)
│   ├── config.yml            # Site configuration file
│   └── img/agnific/          # Logo & visual identity assets
├── scripts/
│   ├── build-config.js       # Config build helper
│   └── import-projects.js    # Bulk GitHub repo importer
├── src/
│   ├── components/           # Reusable UI components
│   │   ├── ChromaGrid.jsx    # Multi-color faculty instructor grid & bio modal
│   │   ├── LaserFlow.jsx     # Canvas laser beam particle visualizer
│   │   ├── MagicBento.jsx    # Glassmorphic bento showcase grid
│   │   ├── ProfileCard.jsx   # Interactive 3D personal identity card
│   │   ├── Hero.jsx          # Hero section with CTA & stats
│   │   ├── Projects.jsx      # Homepage portfolio grid
│   │   ├── SafeImage.jsx     # Image component with Drive/shimmer fallbacks
│   │   └── ...
│   ├── context/              # ConfigContext & theme management
│   ├── hooks/                # Custom React hooks (useData)
│   ├── pages/                # Application routes (Home, Trainings, Projects, Team, Admin...)
│   │   ├── TrainingsPage.jsx # Academy curriculum & faculty showcase
│   │   ├── Projects.jsx      # Full project archive with search & category filter
│   │   ├── Admin.jsx         # Administrative dashboard
│   │   └── ...
│   ├── services/
│   │   ├── dataService.js    # Data normalizer & sortProjects engine
│   │   └── analyticsService.js # IP visit tracking client
│   └── index.css             # Brand design tokens & theme utility classes
└── vite.config.js            # Vite build configuration with API proxy

© 2026 Agnific. Intelligence Built for Impact.