AI Freelance Studio

AI Freelance Studio is a comprehensive, AI-powered project management and discovery platform designed specifically for freelance web developers. It leverages the Google Gemini API to automate and streamline the entire client onboarding process, from initial discovery interviews to generating code prototypes and legal contracts.

🚀 Features

• AI Discovery Chat: An intelligent chat interface that acts as a Senior Web Development Lead, interviewing the client to gather critical project requirements (Business DNA, Goals, Tech Requirements, Logistics).
• Automated Project Planning: Automatically generates a structured project plan including tasks, estimated budget, timeline, and milestones based on the discovery chat.
• Asset Generation: Generates placeholder copy and concept images (using Gemini Image models) for the website.
• Sitemap Generation: Automatically extracts and visualizes a sitemap from the generated project requirements or code.
• Rapid Prototyping: Generates a single-file HTML/Tailwind CSS prototype based on the project description or by uploading a UI sketch/mockup. Includes iterative refinement capabilities.
• Multi-Language Proposals: Generates professional project proposals in multiple languages (English, Romanian, Spanish, French, German, Italian) with one-click translation.
• Multi-Language Contracts: Generates legal service agreements with optional clauses (Liability, Force Majeure) in multiple languages.
• Client Communication: Drafts contextual client emails for status updates, asset requests, and payment reminders.
• Export & Print: Export proposals and contracts to PDF or print them directly from the dashboard.

🛠️ Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• AI Integration: @google/genai (Gemini 3.1 Flash/Pro, Gemini 2.5 Flash Image)
• PDF Generation: jspdf, html2canvas

📂 Project Structure

• src/App.tsx: The main application container, managing the high-level state between the initial dashboard and the active project view.
• src/components/ProjectDashboard.tsx: The core interface for managing a project. It contains tabs for Plan, Assets, Sitemap, Prototype, Proposal, Contract, and Emails.
• src/services/geminiService.ts: The AI service layer. This file contains all the prompts and API calls to the Gemini models, handling structured JSON outputs, code generation, and image generation.
• src/types.ts: TypeScript interfaces defining the core data models (ProjectData, Task, Asset, Milestone, etc.).

🧠 How It Works (The AI Workflow)

1. Discovery Phase: The user starts a new project by chatting with the AI. The AI uses systemInstruction to guide the conversation through a specific checklist (Brand, Goals, Tech, Logistics).
2. Structured Output: Once enough information is gathered, the generateProjectPlan function uses Gemini with a strict responseSchema to output a structured JSON object containing the budget, timeline, tasks, and milestones.
3. Generative UI: The generateWebsitePrototype function prompts Gemini to write raw HTML and Tailwind CSS. A custom cleanPrototypeCode function ensures the output is stripped of markdown but retains essential HTML tags for rendering in an iframe.
4. Multilingual Support: The proposal and contract generators take the structured project data and prompt Gemini to write professional documents in the user's selected language, maintaining HTML formatting for the UI.

🚦 Getting Started

1. Install Dependencies:

   npm install

2. Environment Variables: Create a .env file in the root directory and add your Gemini API key:

   API_KEY=your_gemini_api_key_here

3. Run the Development Server:

   npm run dev