hasnat.dev
← cd ../#projects
#Next.js#TypeScript#RBAC#GitHub Actions#Vercel CLI

Rext AI

AI-powered SEO content automation platform with one-click publishing and workspace dashboard

Full Stack Developer·Jun 2024 – ongoing·↗ live

Overview

Rext AI is a comprehensive SaaS platform and workspace ecosystem that automates the SEO content workflow—from keyword research to article generation and CMS publishing. The project encompasses two core engineering repositories: Rext Site (the high-converting public marketing website featuring blog navigation and conversion funnels) and Rext Admin (an internal multi-tenant workspace dashboard providing guided onboarding, persona management, and role-based access control).

The Problem & Challenges

Operating a dual-repository SaaS platform presented distinct frontend, DevOps, and access-control challenges across both environments:

  • Marketing & Conversion Friction: The public marketing site suffered from conversion drop-off due to legacy UI components, lacked structured navigation for long-form technical guides, and needed improved information architecture across pricing and team pages.
  • DevOps Attribution Blockers: Manual deployments to Vercel required local credentials and hit a critical platform limitation where deployments failed if a git commit author lacked a linked Vercel account.
  • Complex Workspace Onboarding: In the admin dashboard, new users and administrators lacked a guided onboarding path into workspace configuration and needed an intuitive system for defining client personas.
  • Access Control & Layout Consistency: Authentication, roles, and permissions required clearer UI visibility and strict unit test coverage to prevent security regressions during iteration. Furthermore, dashboard navigation and data tables suffered from inconsistent spacing and responsive layout glitches.

Solution & Architecture

I executed an end-to-end engineering overhaul across both the public marketing site and the internal workspace dashboard:

  • Marketing IA & Conversion Optimization: Restructured the public site's information architecture across mega menus, page headers, team profiles, and pricing tiers. Integrated high-converting email subscription CTAs, dynamic tables of contents, and category filtering for long-form blog content while removing obsolete authentication funnels.
  • Automated Token-Based CI/CD: Engineered an automated GitHub Actions deployment pipeline using the Vercel CLI. To permanently bypass Vercel's git-author attribution restriction without requiring team account links, configured the pipeline to strip git metadata prior to deployment, attributing releases cleanly to a secure deployment token. Standardized shared template scaffolding documentation across admin routes and API handlers.
  • Guided Workspace Onboarding: Built an interactive multi-step onboarding wizard in Rext Admin that walks new users through initial workspace configuration, organization setup, and persona creation.
  • Permission-Aware RBAC Navigation: Developed a permission-aware navigation system backed by a dedicated workspace permission provider and enhanced role management, surfacing active role states directly in sidebars and user menus so users only see accessible routes.
  • Dashboard Responsive Polish & Fallbacks: Reworked responsive header, navigation, and data-table layouts sitewide. Added resilient fallback pages—including maintenance, coming-soon, and global error boundaries—to stabilize the shell during outages.
  • Unit-Tested Access Control: Wrote comprehensive Jest unit test suites covering permission evaluation utilities and Zustand store logic, ensuring role-based access rules can be modified with total confidence.

Key Features & Contributions

  • Automated Token-Based CI/CD: GitHub Actions pipelines stripping git metadata to bypass Vercel attribution restrictions and eliminate local credential dependencies.
  • Guided Onboarding Wizard: Interactive multi-step setup flow for workspace creation, user onboarding, and persona configuration.
  • Permission-Aware Navigation: Dynamic RBAC system adapting dashboard UI, sidebars, and routing based on granular user roles.
  • Information Architecture Restructure: Complete redesign of marketing headers, mega menus, pricing tiers, and blog navigation.
  • Unit-Tested Access Control: Robust Jest test suites verifying permission evaluation utilities and state store logic.
  • Resilient Fallback Architecture: Implemented maintenance, coming-soon, and global error boundaries for high availability.

Tech Stack

  • Framework: Next.js (App Router)
  • Language: TypeScript
  • State & Access Control: Zustand, Role-Based Access Control (RBAC)
  • Testing & DevOps: Jest, GitHub Actions, Vercel CLI (Token-based pipelines)
  • UI & Styling: Tailwind CSS, Radix UI, Data Tables

Outcome & Impact

Combining a high-converting marketing site with an intuitive onboarding wizard and permission-aware dashboard created a seamless end-to-end user journey from initial discovery to active workspace management. The CI/CD engineering breakthrough completely eliminated manual, credential-dependent deployments and solved a major platform blocker around git-author attribution. Establishing unit test coverage on access control allowed the engineering team to iterate rapidly on permission structures with complete confidence and zero regressions.

share: