Mostage Studio

Mostage Studio is a simple online tool for making presentations with Markdown and HTML. Some features include AI Creation, Live Polling System, and Audience Q&A.

User profiles at /{username} with personalized dashboard, presentation management (create, edit, delete), visibility controls (Public/Private), and custom URL slugs.

Powered by Mostage JS

Mostage JS is a presentation framework based on Markdown and HTML. Available as NPM package, CLI and Web Editor.

• mostage.app/develop
• github.com/mostage-app/mostage

Tech Stack

Frontend

• Framework: Next.js 15 (App Router)
• UI Library: React 19
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Authentication: AWS Cognito (via AWS SDK)
• Analytics: Google Analytics 4
• Presentation Engine: Mostage
• Markdown Editor: Mostage-editor
• Onboarding Tour: Mostage-intro

Backend

• Language: TypeScript 5
• Runtime: Node.js 20 (AWS Lambda)
• Architecture: Serverless functions
• Database: AWS DynamoDB
• Deployment: AWS Lambda via AWS CDK

Infrastructure

• CI/CD: GitHub Actions
• Cloud Provider: AWS
• Infrastructure as Code: AWS CDK 2
• Services:
  • AWS Cognito (User Pool & User Pool Client) - Authentication
  • AWS API Gateway - REST API for backend services
  • AWS Lambda - Serverless functions
  • AWS DynamoDB - Database for presentations and users
  • AWS S3 - Object storage for image uploads
  • AWS Amplify - Frontend hosting and deployment
  • AWS SES - Email delivery (optional)
  • AWS Resource Groups - Resource organization and management
  • AWS CloudWatch Alarms - Monitoring and alerting (coming soon)
• Environments: Development & Production (separate stacks)
• Naming Convention: mostage-studio-<service>-<resource>-<environment>

Quick Start

Frontend Setup

cd frontend
npm install
npm run dev

Infrastructure Setup (AWS CDK)

cd infrastructure
npm install

# Bootstrap CDK (first time only)
aws configure
aws sts get-caller-identity --query Account --output text
cdk bootstrap aws://ACCOUNT-ID/REGION

# Configure environment variables (first time only)
cp .env.local.example .env.dev.local
# Edit .env.dev.local and add your Unsplash Access Key

# Preview changes for development
npm run diff:dev

# Deploy development stack
npm run deploy:dev

# After first deployment, configure .env in frontend with stack outputs
# See docs/infrastructure.md#first-time-deployment for details

See Infrastructure Setup for detailed instructions.

Documentation

Getting Started

• Project Structure - Architecture and development guide
• Authentication Setup - AWS Cognito authentication setup guide
• Infrastructure Setup - AWS CDK infrastructure setup and deployment

Development

• CI/CD - Continuous Integration and Deployment setup
• State Management - State management patterns and architecture
• Analytics - Analytics implementation and tracking
• Onboarding Tour - User onboarding tour system
• Toolbar - Markdown toolbar implementation

Reference

• FAQ - Frequently asked questions and explanations

Contributing

This project is part of the Mostage ecosystem. For contributions, please refer to the main Mostage repository.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0-or-later) with additional attribution requirements.

See the LICENSE file for the complete license text.