InsightFlow – Futuristic B2B Analytics Platform

Turn Data Into Decisions. Instantly.

A comprehensive B2B analytics platform with a futuristic landing page, full authentication system, user analytics dashboard, and admin management panel — all built with pure HTML, CSS, and JavaScript using the RESTful Table API for data persistence.

---

🎯 Project Overview

InsightFlow is a complete SaaS-ready frontend that includes:

• Landing page — High-converting gateway with particle animations and glassmorphism
• Authentication — Login/register with session management and role-based access
• User Dashboard — Analytics overview, performance metrics, charts, reports, profile
• Admin Panel — Demo request management, user management, analytics data overview

---

✅ Completed Features

🌐 Landing Page (index.html)

• Hero section with animated gradient orbs, stat counters, dual CTAs
• 6 feature cards with icons, glow effects, hover animations
• 3 B2B use cases with impact statistics
• Interactive dashboard mockup with SVG charts
• About section with animated orbital rings
• 4-step "How It Works" timeline with scroll progress
• 3 customer testimonials
• Demo request form → saves to real database
• Canvas particle background with mouse interaction
• Custom AI cursor with hover states
• Preloader animation
• Sticky floating CTA button
• "Enter App" button → launches auth flow
• "Powered by Dipesh Kumar" branding with neon glow effects

🔐 Authentication System

• Login page (login.html) — Email/password auth with error handling
• Register page (register.html) — New account creation with validation
• Session management — localStorage-based sessions with Table API backend
• Role-based access — user and admin roles with route protection
• Demo credentials displayed on login page for easy testing

📊 User Dashboard (app.html)

• Overview — Revenue trend chart, traffic sources donut, 4 stat cards
• Performance — Monthly active users bar chart, conversion funnel, performance stats
• Reports — Auto-generated report list with status badges
• Profile — User info display with avatar, company, plan, role
• Settings — Email notifications toggle, data connections, danger zone
• Responsive sidebar navigation with mobile hamburger menu
• Admin link visible for admin users

🛡️ Admin Panel (admin.html)

• Dashboard — Total users, demo requests, plan distribution charts
• Demo Requests — Full table with inline status updates, delete actions
• Users — All registered users with plan/role/status/last login
• Analytics Data — Raw metrics table with category, value, change %
• Refresh button to reload all data
• Toast notifications for actions

🗄️ Data Persistence (RESTful Table API)

All data is persisted using the built-in Table API with 4 tables:

Table	Purpose
users	User accounts with email, password, company, plan, role
demo_requests	Landing page demo form submissions with status tracking
analytics	Business metrics (revenue, users, conversion, traffic)
sessions	Active login sessions with expiry timestamps

---

📁 Project Structure

index.html → Landing page (entry point)
login.html → Login page
register.html → Registration page
app.html → User analytics dashboard
admin.html → Admin management panel
css/
├── style.css → Core design system, layout, responsive
├── animations.css → Scroll, hover, micro-interaction animations
└── dashboard.css → Dashboard/auth page shared styles
js/
├── api.js → API service layer (CRUD wrappers for all tables)
├── auth.js → Authentication system (login, register, session, guards)
├── particles.js → Canvas particle system with mouse interaction
├── animations.js → Intersection Observer, counters, timeline progress
└── main.js → Landing page interactions (nav, form, cursor, etc.)
README.md → This file

---

🌐 Functional Entry URIs

Path	Auth Required	Description
/ or /index.html	❌	Landing page
/index.html#features	❌	Features section
/index.html#use-cases	❌	Use cases section
/index.html#product	❌	Product overview
/index.html#about	❌	About section
/index.html#how-it-works	❌	How it works
/index.html#testimonials	❌	Testimonials
/index.html#demo	❌	Demo request form
/login.html	❌	Login page
/register.html	❌	Registration page
/app.html	✅ User	User analytics dashboard
/admin.html	✅ Admin	Admin management panel

---

🔑 Demo Credentials

Role	Email	Password
Admin	admin@insightflow.io	admin123
User	demo@insightflow.io	demo123

---

🛠 Tech Stack

Technology	Usage
HTML5	Semantic markup
CSS3	Custom properties, glassmorphism, Grid/Flexbox, clamp()
Vanilla JavaScript	No framework dependencies
Chart.js	Dashboard data visualizations
Font Awesome 6.4	Icons (CDN)
Google Fonts	Inter + Orbitron (CDN)
Canvas API	Particle background system
RESTful Table API	Data persistence

---

📊 Database Schema

users

Field	Type	Description
id	text	Unique identifier
name	text	Full name
email	text	Email address
password_hash	text	Password (plain text for demo)
company	text	Company name
plan	text	free / pro / enterprise
role	text	user / admin
avatar_initials	text	Two-letter avatar
is_active	bool	Account status
last_login	datetime	Last login timestamp

demo_requests

Field	Type	Description
id	text	Unique identifier
name	text	Requester name
email	text	Requester email
company	text	Company name
company_size	text	Company size range
message	text	Optional message
status	text	new / contacted / scheduled / completed / declined
admin_notes	text	Admin notes

analytics

Field	Type	Description
id	text	Unique identifier
user_id	text	Associated user ID
metric_name	text	Metric name
value	number	Metric value
category	text	revenue / users / conversion / performance / engagement / traffic
period	text	Time period
change_percent	number	% change from previous period
is_positive	bool	Whether change is positive

sessions

Field	Type	Description
id	text	Session token
user_id	text	Associated user ID
email	text	User email
role	text	User role
is_active	bool	Session active
expires_at	datetime	Expiry timestamp

---

🔄 API Endpoints Used

Method	Endpoint	Used By
GET	tables/users?search={email}	Login (find user by email)
POST	tables/users	Registration
PATCH	tables/users/{id}	Update last login
GET	tables/users?limit=100	Admin user list, stats
POST	tables/demo_requests	Landing page demo form
GET	tables/demo_requests	Admin demo list
PATCH	tables/demo_requests/{id}	Admin status update
DELETE	tables/demo_requests/{id}	Admin delete
GET	tables/analytics?limit=1000	Dashboard charts, admin view
POST	tables/sessions	Login/register session creation
PATCH	tables/sessions/{id}	Logout (deactivate)

---

🚀 User Flow

Landing Page (index.html)
├── "Request a Demo" → Demo form → Saved to DB → Success modal
├── "Enter App" → Launch animation → login.html
└── Nav links → Scroll to sections
Login (login.html)
├── Enter credentials → Auth check → Session created
├── Admin role → admin.html
└── User role → app.html
Register (register.html)
└── Create account → Session created → app.html
App Dashboard (app.html)
├── Overview → Charts + Stats from API
├── Performance → Bar charts + Metrics
├── Reports → Generated report list
├── Profile → User info
├── Settings → Preferences
└── Sign Out → Session deactivated → login.html
Admin Panel (admin.html)
├── Dashboard → Platform stats + Charts
├── Demo Requests → CRUD management
├── Users → View all users
├── Analytics Data → Raw metrics view
└── Sign Out → login.html

---

🚀 Recommended Next Steps

1. Real Authentication — Replace client-side auth with JWT/OAuth server-side system
2. Password Hashing — Implement bcrypt or similar before production
3. Email Service — Connect demo form to email notifications
4. Stripe Integration — Add subscription billing
5. Real Analytics Connectors — Build actual data source integrations
6. SEO Optimization — Add Open Graph tags, structured data, sitemap
7. Performance — Add service worker, lazy loading, image optimization
8. Testing — Add unit tests and E2E tests
9. CI/CD — Set up automated deployment pipeline
10. Multi-language — Add i18n support

---

⚠️ Security Notice

This is a frontend prototype using client-side authentication simulation. For production:

• Never store passwords in plain text
• Implement server-side JWT/OAuth authentication
• Add CSRF protection
• Use HTTPS exclusively
• Implement rate limiting on the server

---

📄 License

© 2026 InsightFlow. Powered by Dipesh Kumar.