AI-Powered Article & Content Generation Platform

This platform is a full-stack application designed to streamline the automated creation of articles, tags, categories, and social media posts leveraging the Gemini API for artificial intelligence capabilities.

AI-Powered Article & Content Generation Platform

This platform is a full-stack application designed to streamline the automated creation of articles, tags, categories, and social media posts leveraging the Gemini API for artificial intelligence capabilities.

Key Features:

  • AI Content Generation: Creates articles, relevant tags, appropriate categories, and draft social media posts (Twitter, Facebook) based on user-provided topics, utilizing the Gemini API.
  • Database Content Management: All generated content is stored and managed in a MySQL database, accessed via Prisma ORM for efficient and secure data operations.
  • Modern Next.js Architecture: Built with the Next.js App Router, employing Server Components and Server Actions for backend logic and data fetching, resulting in a fast and interactive user experience.
  • Markdown Rendering & Security: Articles are rendered from Markdown format to HTML using the `marked` library, with HTML sanitization via `DOMPurify` to prevent XSS vulnerabilities.
  • Elegant User Interface: A clean, polished, and sophisticated UI/UX, implemented with Tailwind CSS and global CSS variables for a consistent theme.
  • Reusable Components: Structured frontend development with reusable React components for consistency and ease of maintenance.

Application Showcase

ArticleGen Platform Homepage

The ArticleGen platform homepage displaying a list of generated articles.

Content Generation Interface in ArticleGen

Interface for generating new article content using AI.

Article Creation Confirmation in ArticleGen

Confirmation screen after an article has been successfully generated.

Generated Article Display in ArticleGen

Example of a generated article about Deep Learning displayed on the platform.

Technologies Used:

Platform & Backend:

  • Framework: Next.js (App Router, Server Actions, Server Components)
  • Language: TypeScript, Node.js (Next.js environment)
  • ORM: Prisma
  • Database: MySQL
  • AI Service: Gemini API

Frontend:

  • Framework/Library: Next.js, React
  • Language: TypeScript
  • Styling: Tailwind CSS (Global CSS Variables)
  • Markdown Processing: Marked
  • HTML Sanitization: DOMPurify
  • Font: Inter (Sans-serif), Lora (Serif)

Project Objectives:

To develop an intuitive and efficient platform for the automated creation of article content and its supplementary materials with AI assistance. This project aims to demonstrate capabilities in building modern full-stack systems, from interacting with external APIs and managing databases to delivering an engaging and functional user interface, with a focus on code quality, sound architecture, and a positive user experience.