IMPORTANT: Third-Party Services & Usage Costs

This script integrates with several third-party services. Accounts and any associated fees are the buyer’s responsibility and are NOT included in the purchase price:

• Supabase — backend, database, auth, storage (free tier available, paid plans for production usage)
• Stripe — card payments (per-transaction fees set by Stripe)
• PayPal — alternative payment provider (per-transaction fees set by PayPal)
• Google OAuth — social sign-in (free)
• Google Gemini API — AI Smart Matching & content suggestions (usage-based pricing)

You will need to provide your own API keys and manage all associated costs separately. Typical costs vary based on usage volume.

Nasper — Premium Multi-Role News & Magazine CMS Platform

Nasper is a production-ready, multi-role News, Magazine & Publishing CMS platform built with React 18, Vite, TypeScript, Tailwind CSS, shadcn/ui and Supabase. It ships with a complete Setup Wizard, PWA support, role-based access control, admin analytics, a rich article editor, and a developer-grade documentation portal — everything you need to launch a modern digital newsroom, blog network, or content platform in minutes.

Live Demo

Demo URL: https://nasper.wrapcoders.com

App Overview

Nasper is engineered as a clean, scalable, and SEO-optimized publishing platform. Whether you are launching a single-author blog, a multi-editor magazine, or a large newsroom with agents and moderators, Nasper provides a polished UI, secure backend, and a frictionless onboarding flow. It is fully self-hostable and production-ready from day one.

Key Features

• Modern React 18 + Vite + TypeScript codebase
• Tailwind CSS v3 with a fully tokenized semantic design system
• shadcn/ui components — accessible, themeable, dark-mode ready
• Supabase backend — Auth, Postgres, RLS, Storage, Realtime, Edge Functions
• Rich article editor — title, rich text, category, tags, cover image, draft/publish workflow
• Full CRUD admin panel for articles, categories, users, and roles
• Public news listing with search, filters, and pagination
• Analytics dashboard — publishing trends, top categories, most-viewed posts
• Newsletter signup with honeypot bot protection
• Breaking-news ticker with hover-pause and deep linking
• SEO-first: JSON-LD structured data, dynamic sitemap, Open Graph, Twitter cards
• Progressive Web App with offline support and installable manifest
• Setup Wizard for first-run installation
• Demo/Test mode with one-click role logins
• Comprehensive /docs/ documentation portal

Multi-Role System

Nasper includes a secure, database-backed role system mapped to a dedicated user_roles table with a SECURITY DEFINER function to prevent privilege-escalation and RLS recursion issues.

• User (Reader) — Browse, search, comment, subscribe to newsletter, manage profile.
• Agent — Submit and manage assigned content under editorial oversight.
• Provider / Author — Create, edit, and publish own articles with rich media support.
• Editor — Review, approve, schedule, and publish articles across authors.
• Moderator — Manage comments, flagged content, and community safety.
• Staff — Internal team access to operational dashboards.
• Admin / Super Admin — Full system control, settings, branding, PWA, roles, and analytics.

A built-in Role Matrix page in the admin panel visualizes permissions, and an access_denials audit table logs every blocked attempt for compliance and security review.

Authentication System

• Email & Password authentication
• Google OAuth sign-in
• Password reset & email verification flow
• Leaked password protection (HIBP integration)
• Secure session restoration & route protection via ProtectedRoute
• Multiple auth aliases — /login, /sign-in, /auth

Role-Based Redirect System

After login, users are routed automatically based on their assigned role — readers land on their public profile, authors and editors land in the editorial dashboard, and admins are routed to the full admin panel. Unauthorized access attempts are gracefully redirected and audited.

Setup Wizard (Installation Flow)

Nasper includes a polished 4-step SaaS Setup Wizard that runs automatically after self-hosted installation:

1. System Check — verifies environment, database, and storage.
2. Super Admin Creation — securely provisions the first administrator.
3. Branding — upload logo, favicon, OG banner, and set brand color.
4. Configure & Launch — system name, locale, SMTP, and SaaS settings.

The wizard locks itself automatically once setup completes and can only be re-opened via a secure server-side flag.

PWA System

• Installable on Android, iOS, Windows, and macOS
• Offline caching with NetworkFirst and CacheFirst strategies
• Dynamic, admin-controlled manifest (name, icons, theme color, splash)
• Device-specific install instructions
• Auto-update notification when new versions are deployed

Supabase Integration

• Auth — Email/password, Google OAuth, session management
• Database — Postgres with strict RLS on every public table
• Storage — CMS media bucket for images and branding assets
• Realtime — Live updates for tickers, comments, and dashboards
• Edge Functions — Setup bootstrap, demo seeder, sitemap generation
• Migrations — Idempotent, production-safe SQL with GRANTs and policies

Demo / Test Mode

Controlled via the VITE_DEMO_MODE environment variable, Nasper ships with a one-click demo login system for evaluating each role instantly — perfect for previews, sales demos, and QA. When DEMO_MODE is disabled, all demo UI and the seeding Edge Function are strictly blocked.

Responsive Navigation System

• Desktop (>1200px) — Full sidebar with labels & icons
• Tablet (768–1200px) — Mini 60px icon-only sidebar with tooltips
• Mobile (<768px) — Offcanvas drawer with auto-close on route change

The public masthead includes a clean single-column dropdown menu, a debounced search popover, and a sticky ticker for breaking news.

Documentation System

A complete /docs/ developer portal is bundled with the project:

• Introduction & architecture overview
• Installation & environment setup
• Deployment guides (Vercel, Netlify, self-hosted)
• Feature documentation
• API & Edge Functions reference
• Configuration guide & .env.example
• Security best practices
• Changelog (semantic versioning vX.X.X)
• FAQ & troubleshooting

Security Features

• Row-Level Security on all public tables
• Role checks via SECURITY DEFINER functions
• Audit logging of denied access attempts
• Honeypot anti-bot protection on forms
• HIBP leaked-password protection
• HTTPS-only secure sessions
• Strict CSP-ready architecture

Performance Optimization

• Route-based code splitting with React.lazy + Suspense
• LCP-optimized hero images with srcset & eager loading
• Service worker caching for instant repeat visits
• Tree-shaken Vite production builds
• Mobile-correct min-h-dvh viewport handling
• Debounced search & paginated listings

Deployment Guide Summary

• Clone the repository
• Configure .env from .env.example
• Run database migrations
• Deploy frontend to Vercel, Netlify, or any static host
• Deploy Edge Functions to Supabase
• Open the app — the Setup Wizard launches automatically

Use Cases / Who It Is For

• Digital newspapers & online magazines
• Niche blogs & multi-author publications
• Corporate newsrooms & internal communications
• Editorial agencies managing multiple contributors
• SaaS founders launching a content platform
• Developers needing a production-ready React + Supabase starter

Why Choose Nasper?

Nasper is more than a template — it is a complete, premium SaaS publishing platform with enterprise-grade security, a refined UI, and the developer ergonomics modern teams expect. Install it once, brand it your way, and start publishing today.