Phullstack AI Marketing Platform

This is a personal, educational project that demonstrates a "Phullstack" (full-stack) approach to building, modern web application for AI-powered marketing content generation. It's built with a mobile-first mindset, featuring a beautiful and modern user interface.

Disclaimer: This is a personal project created for learning and demonstration purposes. It is not intended for production use without further development and security hardening.

✨ Features

• User authentication and management.
• Project and asset management.
• Upload and processing of various asset types (text, image, audio, video).
• Automatic speech-to-text transcription for audio and video assets using OpenAI's Whisper.
• Integration with Stripe for subscription-based services.
• ... and more to come!

🚀 Tech Stack

This project uses a modern, robust, and scalable technology stack:

Frontend

• Next.js: React framework for server-side rendering, static site generation, and more.
• React: A JavaScript library for building user interfaces.
• Node.js v20: JavaScript runtime environment.
• Yarn v3: Dependency management.
• Shadcn/ui: Beautifully designed components.
• Tailwind CSS: A utility-first CSS framework.

Backend & Services

• Python: For the asset processing service.
• Poetry: Dependency management for Python.
• OpenAI Whisper: For highly accurate speech-to-text transcription.
• FFmpeg: For audio and video manipulation.

Database

• PostgreSQL: Hosted on Neon.
• Drizzle ORM: A next-generation TypeScript ORM.

Infrastructure & DevOps

• Vercel: Cloud platform for hosting the Next.js frontend.
• Vercel Blob: For storing user-uploaded assets.
• Railway: For CI/CD and hosting the backend services.
• Docker: For containerizing services.

Authentication & Payments

• Clerk: For user authentication and management.
• Stripe: For payment processing and subscription management.

🏗️ Architecture Overview

The platform is built with a decoupled architecture:

1. Next.js Frontend: The main user-facing application, handling UI, user interaction, and authentication. It's hosted on Vercel.
2. Python Asset Processing Service: A separate backend service responsible for handling heavy-duty tasks like audio/video transcoding and AI-powered transcription. This service is containerized with Docker and can be deployed on platforms like Railway.
3. Database: A serverless Postgres database from Neon provides persistent storage, accessed via the type-safe Drizzle ORM.
4. File Storage: Vercel Blob is used for scalable and secure storage of user-uploaded media files.

This separation of concerns allows for independent scaling and development of the frontend and backend services.

🏁 Getting Started

Follow these instructions to get a local copy up and running for development and testing purposes.

Prerequisites

• Node.js v20 or later
• Yarn v3+
• Python 3.9+ and Poetry
• Docker and Docker Compose
• Access keys for various services (OpenAI, Clerk, Stripe, Neon, Vercel).

Installation

1. Clone the repository:

   git clone https://github.com/your-username/phullstack-ai-marketing-platform.git
   cd phullstack-ai-marketing-platform

2. Set up the Frontend (Next.js):

   cd nextjs
   yarn install

3. Set up the Backend (Python Service):

   cd asset-processing-service
   poetry install

Environment Variables

This project relies on several external services, which need to be configured via environment variables.

1. Frontend (/nextjs/.env.local):

   Create a .env.local file in the /nextjs directory. You will need to add your credentials for Clerk, Stripe, Vercel Blob, and the database.

   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   # Neon Database
   DATABASE_URL="postgresql://..."
   
   # Vercel Blob Storage
   BLOB_READ_WRITE_TOKEN=
   
   # Stripe
   STRIPE_SECRET_KEY=
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
   STRIPE_WEBHOOK_SECRET=

2. Backend (/asset-processing-service/.env):

   Create a .env file in the /asset-processing-service directory.

   # OpenAI
   OPENAI_API_KEY=
   
   # Other service configurations...

Running the Application

1. Start the Frontend Development Server:

   cd nextjs
   yarn dev

   The application will be available at http://localhost:3000.

2. Start the Asset Processing Service:

   cd asset-processing-service
   poetry run uvicorn src.asset_processing_service.main:app --reload

Enjoy exploring the application!