Scribe Notes
Scribe Notes (internally called SeoMax) is a Next.js 15 platform that helps users create, manage, and share structured notes and templates with AI-assisted content generation. It has subscription tiers managed through Stripe, real-time collaboration via Socket.io, and a PWA setup so it works offline. We added Google reCAPTCHA and DOMPurify for security, and html2canvas for screenshot-to-PDF exports. The invitation flow lets users bring team members into shared workspaces. The trickiest part was the template system — users can create parameterized templates that generate content dynamically based on inputs.
The Result
A subscription SaaS platform combining AI content generation, real-time collaboration, and template management in a single PWA.
Tech Stack
5
Modules
7
Technologies
6
Highlights
Applications in This Project.
This project is built as 1 interconnected application, each with a distinct responsibility.
scribe-notes
Next.js 15 (App Router)AI note-taking & template platform
What It Does.
AI-assisted content generation with subscription tiers
Real-time collaboration via Socket.io
PWA support for offline access
How It's Built.
Frontend
Services & Infra
Under the Hood.
Every module shipped in Scribe Notes — what it does and the features it covers.
Note & Template Builder
Create structured notes and parameterized templates that auto-generate content based on user inputs.
What's Included
- Parameterized template creation
- Dynamic content generation
- Default templates browser
- Template categories & tags
- Markdown rendering (marked 4.x)
Subscription Management
Stripe subscription tiers controlling AI generation limits, storage, and collaboration features.
What's Included
- Stripe subscription tiers
- Upgrade/downgrade flows
- Usage limit enforcement
- Subscription history
- react-phone-input-2 + reCAPTCHA on signup
Team Workspaces
Invite team members into shared workspaces with role-based access to notes and templates.
What's Included
- Workspace invitation flow
- Role-based access
- Team note collaboration
- ActionCable real-time data streams
Real-Time Collaboration
Socket.io-powered live collaboration with concurrent editing and presence indicators.
What's Included
- Socket.io-client v4 real-time sync
- Concurrent editing
- Presence indicators
- react-top-loading-bar for live feedback
Content Export & PWA
Screenshot-to-PDF export via html2canvas and PWA support for offline access.
What's Included
- html2canvas PDF export
- react-h5-audio-player audio notes
- next-pwa for offline/installable support
- DOMPurify XSS sanitisation
- node-forge client-side crypto
The Interesting Parts.
Key architectural decisions, patterns, and technical details worth knowing.
Progressive Web App (PWA) via next-pwa — works offline and installable on desktop and mobile
Parameterized templates auto-generate content dynamically based on structured user inputs
DOMPurify sanitises all user-generated HTML to prevent XSS attacks before rendering
Google reCAPTCHA on auth flows + node-forge for client-side crypto operations
html2canvas powers one-click screenshot-to-PDF export of notes and generated content
ActionCable real-time data streams for live collaboration alongside Socket.io messaging
Key Pages & Routes.
The main routes built in the application.
/dashboardUser dashboard (protected)
/create-templateCreate new template
/default-templateDefault templates browser
/SubscriptionManagementSubscription upgrade/downgrade flows
/invitationTeam/workspace invitation flow
/blogBlog / content section
Want Something Like This?
We've built systems like this before — we know the pitfalls, the patterns that work, and how to scope it correctly from day one.