All projects

17 / 20 · AI animation SaaS experience

Roarly

A standalone marketing, account and payment experience for an AI studio that turns stories and images into animated videos.

View source
Role
Full-stack product development
Platform
Responsive web application
Built with
Node.js, SQLite, PayMongo
Roarly AI Animation Studio landing page with watercolor artwork and animated story preview

The story

  1. 01

    The challenge

    An AI animation product needs more than a visual landing page: visitors need to understand the creative possibilities, choose a plan and trust what happens after payment.

  2. 02

    Our approach

    We paired story-led previews with account and pricing flows and kept billing authority on the server: credits activate only after a signed PayMongo webhook confirms the expected payment details.

  3. 03

    What it delivers

    Roarly gives a coherent path from product discovery to checkout and account access, and its static preview can still explain the concept when the backend is unavailable.

What we built

  1. 01Responsive landing, pricing, account, payment-success and legal-policy pages
  2. 02Watercolor-inspired product storytelling and animation-style galleries
  3. 03Local sample-video playback with modal, backdrop and keyboard controls
  4. 04Registration, login, session hydration and account billing views
  5. 05Fixed plans plus validated custom credit tiers for Pro Plus
  6. 06PayMongo hosted checkout with card, GCash, Maya and QR Ph options
  7. 07Webhook-confirmed subscription and credit activation
  8. 08Server-authoritative plan, amount, currency and user validation
  9. 09Idempotent payment handling and account credit updates
  10. 10Hashed passwords, hashed session tokens, rate limiting and same-origin checks
  11. 11Static-preview fallbacks that protect backend-only checkout behavior
  12. 12Automated tests for authentication, plan validation and billing activation

Technology

Frontend
HTML, CSS, ES2022 JavaScript, responsive layouts and local video media
Backend
A native Node.js HTTP server with modular authentication and billing services
Storage
SQLite with indexed users, sessions, billing accounts, payments and WAL mode
Payments
PayMongo hosted checkout and signed, idempotent webhook processing
Security
scrypt password hashing, SHA-256 session hashes, validation and rate limiting
Delivery
Docker, persistent storage, health checks and static GitHub Pages previews

Keep scrolling
to see more

About us

Next page