📝 Taskcall Article CMS (TinyMCE + Next.js)

A lightweight CMS-like editor built with Next.js and TinyMCE that allows users to write articles in a rich-text editor and export them as YAML.
This is useful for writing blog posts, documentation, or structured content that needs to be stored in YAML format.

🌐 Live Demo: https://taskcall-article-cms-tinymce.vercel.app/

---

🚀 Features

• ✅ Rich text editing with TinyMCE
• ✅ Comprehensive metadata fields (title, author, category, category ID, meta description, blog image, blog URL, tags)
• ✅ Automatic YAML export with structured output
• ✅ Multiple export options (copy to clipboard, download as .yaml file)
• ✅ Copy-friendly YAML output for static sites or APIs
• ✅ Deployable on Vercel (no backend required)
• ✅ Pre-configured similar content for blog recommendations

---

📂 Project Structure

taskcall-article-cms-tinymce/
├── pages/              # Next.js pages (Pages Router)
│   └── index.js        # Main editor page with full CMS functionality
├── public/             # Static assets (Next.js icons)
├── img/                # Project screenshots
│   └── screencapture-taskcall-article-cms-tinymce-vercel-app-2025-08-30-12_35_55.png
├── .env.example        # Environment variables template
├── .gitignore          # Git ignore rules
├── eslint.config.mjs   # ESLint configuration
├── jsconfig.json       # JavaScript configuration
├── next.config.mjs     # Next.js configuration
├── package.json        # Dependencies & scripts
├── package-lock.json   # Locked dependency versions
├── LICENSE             # MIT license
└── README.md           # Project documentation

---

⚙️ Setup & Installation

1️⃣ Clone the Repository

git clone https://github.com/FahimFBA/taskcall-article-cms-tinymce.git
cd taskcall-article-cms-tinymce

2️⃣ Install Dependencies

npm install

3️⃣ Configure Environment Variables

Copy the example environment file and configure it:

cp .env.example .env.local

Then edit .env.local with your TinyMCE API key:

NEXT_PUBLIC_TINYMCE_API_KEY=your_tinymce_api_key_here

👉 Get a free API key from TinyMCE Cloud.

4️⃣ Run Locally

npm run dev

Now open: http://localhost:3000

---

📤 Deploying to Vercel

1. Push your repo to GitHub.

2. Go to Vercel, import the project.

3. Add the environment variable in Vercel Dashboard → Settings → Environment Variables:

   NEXT_PUBLIC_TINYMCE_API_KEY=your_tinymce_api_key_here
   

4. Deploy 🚀

---

🖥️ Usage

1. Fill in metadata fields:

   • Title and Author
   • Category and Category ID (slug)
   • Meta Description for SEO
   • Blog Image URL and canonical Blog URL
   • Tags (comma-separated)

2. Write your article in the TinyMCE editor with full rich-text capabilities.

3. Export your content:

   • 📤 Export YAML - Generate and preview YAML output
   • 💾 Download .yaml - Download as a file
   • 📋 Copy YAML - Copy to clipboard for immediate use

4. Use the generated YAML in your static site generators, APIs, or content management workflows.

---

📸 Screenshot

---

📦 Tech Stack

• Frontend Framework: Next.js 15.5.2 with React 19.1.0
• Rich Text Editor: TinyMCE with React integration
• YAML Processing: js-yaml for serialization
• Code Quality: ESLint with Next.js configuration
• Deployment: Optimized for Vercel with Turbopack

---

🛠️ Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production with Turbopack
• npm run start - Start production server
• npm run lint - Run ESLint code quality checks

---

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit PRs.

---

📜 License

MIT License © 2025 Fahim Bin Amin