Skip to content

README.md

Latest commit

 

History

History
274 lines (221 loc) · 9.85 KB

README.md

File metadata and controls

274 lines (221 loc) · 9.85 KB
Raw

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.