Brand Appeal Boardroom

Project overview

Your role

• Full stack development, Express REST API, MongoDB models, Next.js frontends
• Stripe integration, checkout, webhooks, billing portal, subscription lifecycle
• Canva integration, OAuth PKCE, admin template import, team access workflow
• User portal, template browsing, bookmarks, social calendar, profile, billing
• Admin portal, user management, template publish, Canva access queue, plans, FAQs
• Authentication and security, JWT, route guards, middleware, rate limiting
• Resend transactional email and Cloudinary media uploads
• Deployment on Vercel (Next.js frontends + serverless Express backend)

Tech stack used

• Frontend: Next.js 15 (App Router), React 19, Tailwind CSS 4, Lucide React, Axios
• UI Features: FullCalendar (social calendar), Stripe.js, react-toastify, react-paginate
• Backend: Node.js, Express, MongoDB, Mongoose
• Authentication: JWT, bcrypt, localStorage tokens
• Payments: Stripe Checkout, billing portal, webhooks (checkout.session.completed, subscription updated/deleted)
• Integrations: Canva API (OAuth PKCE, template import/edit), Resend, Cloudinary
• Security: Helmet, CORS, rate limiting, mongo-sanitize, xss-clean, hpp, compression, Winston logging
• Deployment: Vercel (@vercel/node for Express API)

Key features

• Register, login, email verification, and JWT based session handling
• Post checkout onboarding flow (/onboarding?session_id=...)
• Frontend route guards on /user/* and /admin/* paths
• Stripe plan CRUD, Checkout sessions, billing portal, cancel, and billing history
• Stripe webhooks for checkout completion and subscription updates
• Admin Canva template import with publish workflow and trending algorithm
• Template browse with search, filters, pagination, free tier (10) vs paid (unlimited)
• Canva team access request queue with admin approve/reject flow
• User Canva OAuth (PKCE) for in app template editing
• User dashboard: trending templates, Content Vault bookmarks, social calendar
• Admin dashboard: user stats, user management, template management, plans, FAQ CRUD
• Trending score from edit, bookmark, and view counts with recency weighting
• Multi layer gating: subscription → team access → Canva OAuth connection

Boardroom modules

User roles

Target audience

• Med spas, injectors, and skincare providers
• Beauty clinics needing consistent on brand social content
• Aesthetic professionals who want strategy and templates without an in house team

Code structure & architecture

brand-appeal-co/
├── brand-appeal-frontend/           # Marketing landing (redesign)
├── brand-user-dashboard/            # User portal (user.brandappeal.io)
├── brand-admin-dashboard/           # Admin portal
├── brand-backend2.0/Brand_appeal/backend/
│   ├── server.js                    # Express entry, middleware stack
│   ├── routes/                      # auth, user, stripe, canva, templates
│   ├── controllers/
│   ├── models/                      # User, Template, Plan, Subscription
│   ├── middleware/                  # Auth, Canva gates, validation
│   └── services/CanvaService.js
└── brand-appeal-2/                  # Bundled v2 snapshot (all apps)

Frontend (Next.js App Router):
src/
├── app/                             # Thin route files
├── components/pages/                # Page logic
├── components/router/               # Route guards
├── context/                         # Auth, Dashboard, Template, Bookmark
└── service/api.js                   # Axios + JWT interceptor

Performance optimizations

• Gzip compression via compression() middleware
• Rate limiting, 100 requests per 15 minutes on /api
• MongoDB indexes on Subscription, CanvaAccessRequest, UserTempHistory, Plan
• Pagination helper on list endpoints with lean queries for admin imports
• Graceful shutdown handlers (SIGTERM, unhandledRejection)
• next/font with display: swap (Poppins, Outfit, Playfair)
• next/image for heroes, logos, and template thumbnails
• Debounced template search (~300ms)
• Paginated API fetching for template lists and calendar history
• Turbopack dev server (next dev --turbopack)

• Marketing site + member portal + admin portal + REST API on Vercel
• React Context providers only, no Redux (Auth, Dashboard, Template, Bookmark, Plan)
• Standardized ApiResponse / ApiError pattern across REST /api routes
• express-async-handler with global error and 404 handlers
• Legacy ContentItem model coexists with newer Template system for backward compatibility
• Bearer token auth (not cookies), CORS with credentials pattern

Challenges & solutions

• Canva team management across admin and member workflows.

  Built CanvaService with admin import flow, user team access request queue, and admin approve/reject pipeline.

• PKCE OAuth on serverless Vercel invocations.

  Implemented PKCE flow with codeVerifier storage, noted serverless durability constraints for OAuth callback handling.

• Dual content systems (legacy ContentItem + new Template model).

  Maintained backward compatibility on User bookmarks/downloads while migrating primary flows to the Template system.

• Multi layer Canva gating before users can view or edit templates.

  Chained subscription check → team access approval → OAuth connection with middleware returning clear error messages.

• Subscription activation after Stripe Checkout.

  Post checkout onboarding UI paired with Stripe webhooks (checkout.session.completed, subscription updated/deleted).

• Trending content discovery at scale.

  Pre save trending algorithm weighting edit, bookmark, and view counts with recency decay on Template model.

Results

• Full SaaS platform delivered, marketing site, member portal, admin portal, and REST API.
• Live production at user.brandappeal.io with API deployed on Vercel.
• Monetization via Stripe subscriptions ($49/month unlimited access positioning).
• Canva powered workflow from admin template import to member edit in Canva.
• Member experience: trending library, bookmarks, social calendar, profile, and billing.
• Production ready authentication, subscription gating, and admin content operations.