🚀 AI-Powered Proposal Generator

A modern, full-stack web application that leverages Google Gemini AI to generate professional business proposals in minutes. Built with cutting-edge Angular architecture and deployed on Vercel.

📋 Table of Contents

Overview
Key Features
Tech Stack
Architecture
Project Structure
Key Technical Highlights
Development Setup
Disclaimer

🎯 Overview

This application solves a real-world problem for freelancers and small businesses: creating professional, client-ready proposals quickly and efficiently. Instead of spending hours crafting proposals from scratch, users can input project details and receive a fully formatted, AI-generated proposal that can be edited, previewed, and exported as a professional PDF.

The Problem

Freelancers waste 2-4 hours per proposal
Inconsistent proposal quality and formatting
Manual pricing calculations and timeline planning
Difficulty maintaining professional tone across different clients

The Solution

AI-powered generation using Google Gemini API
4-step wizard interface for intuitive proposal creation
Real-time editing with section-by-section customization
Professional PDF export with intelligent page breaking
Multi-language support (English/Spanish)
Responsive design for desktop and mobile

✨ Key Features

🤖 AI-Powered Content Generation

Intelligent Proposal Writing: Leverages Google Gemini AI to generate contextually relevant proposals
Customizable Tone: Formal, casual, or professional tone selection
Multi-language Support: Generate proposals in English or Spanish
Structured Output: Automatically creates sections (Executive Summary, Scope, Deliverables, Timeline, Pricing, Terms & Conditions)

📝 Interactive Proposal Editor

4-Step Wizard Flow:
1. Project details and client information
2. AI-generated proposal preview
3. Section-by-section editing with live preview
4. PDF preview and download
Real-time Markdown Rendering: Live preview of formatted content
Section Management: Edit individual sections without affecting others
Auto-save Functionality: Proposals are saved automatically

📄 Professional PDF Generation

Intelligent Page Breaking: Prevents content from being cut off mid-section
Custom Cover Page: Dynamic cover with client name and proposal title
Responsive Layout: Adapts content to fit pages elegantly
Professional Styling: Clean, business-ready formatting
Direct Download: One-click PDF export

🎨 Modern UI/UX

Skeleton Loading States: Smooth loading animations during AI generation
Responsive Design: Works seamlessly on desktop, tablet, and mobile
Dark/Light Mode Ready: Tailwind CSS foundation supports theme switching
Accessible Components: Built with accessibility best practices

🛠 Tech Stack

Frontend Framework

Angular 20.3 - Latest version with Signals, standalone components, and modern architecture
TypeScript 5.9 - Type-safe development with strict mode
RxJS 7.8 - Reactive programming for state management

Styling & UI

Tailwind CSS 4.1 - Utility-first CSS framework
Custom Component Library - Reusable, accessible components
Responsive Design - Mobile-first approach

AI Integration

Google Gemini API (@google/genai) - Advanced AI for content generation
Intelligent Prompt Engineering - Context-aware proposal generation
Mock Data System - Development-friendly testing without API costs

PDF Generation

jsPDF 3.0 - Client-side PDF creation
html2canvas 1.4 - HTML to image conversion
Custom Page Break Logic - Intelligent content pagination

Build & Deployment

Angular CLI - Modern build tooling
Vercel - Serverless deployment platform
Environment Variable Management - Secure API key handling

Development Tools

ESLint - Code quality and consistency
Prettier - Code formatting
TypeScript Strict Mode - Enhanced type safety

🏗 Architecture

Component Architecture

Standalone Components: Modern Angular architecture without NgModules
Signal-based State Management: Reactive state with Angular Signals
Dependency Injection: Service-based architecture for separation of concerns
Lazy Loading: Route-based code splitting for optimal performance

Service Layer

AI Service: Handles all Gemini API interactions with error handling and fallbacks
Proposal Service: Manages proposal CRUD operations
i18n Service: Internationalization support

State Management

Angular Signals: Reactive primitives for component state
Form Management: Reactive Forms with validation
Session Storage: Client-side persistence for PDF previews

Security

Environment Variable Injection: Build-time API key injection
Gitignore Protection: Sensitive files excluded from version control
API Key Validation: Graceful fallback to mock data when keys are missing

📁 Project Structure

src/
├── app/
│   ├── components/          # Reusable UI components
│   │   └── shared/          # Sidebar, Header, Footer, Icons
│   ├── pages/               # Feature pages
│   │   ├── dashboard/       # Proposal list view
│   │   ├── proposal-editor/ # Main proposal creation flow
│   │   ├── pdf-viewer/      # PDF preview page
│   │   └── landing/         # Landing page
│   ├── services/            # Business logic services
│   │   ├── ai.ts           # Gemini AI integration
│   │   ├── proposal.ts     # Proposal data management
│   │   └── i18n.ts         # Internationalization
│   ├── models/              # TypeScript interfaces
│   ├── pipes/               # Custom Angular pipes
│   └── config/              # App configuration
├── environments/            # Environment-specific configs
└── assets/                  # Static assets

scripts/
└── generate-env-config.js   # Build-time env var injection

🎓 Key Technical Highlights

1. Advanced PDF Generation Algorithm

// Intelligent page breaking prevents content cutoff
- Separates cover page and content for independent rendering
- Dynamically calculates section heights
- Splits content by logical sections (<h2> tags)
- Ensures sections never break across pages
- Handles edge cases for long content sections

2. AI Integration with Fallback System

// Robust error handling and development-friendly mock system
- Graceful degradation when API keys are missing
- Configurable mock data for development
- Context-aware prompt engineering
- Multi-language AI responses

3. Modern Angular Patterns

// Leveraging latest Angular features
- Standalone components (no NgModules)
- Signals for reactive state management
- Dependency injection with inject() function
- Lazy-loaded routes for code splitting
- Type-safe reactive forms

4. Build-Time Environment Injection

// Secure API key handling
- Node.js script generates environment files at build time
- No process.env access in browser code
- Supports both local (.env) and Vercel environment variables
- Prevents API key exposure in source code

5. Responsive PDF Rendering

// Client-side PDF generation with professional formatting
- html2canvas for accurate HTML-to-image conversion
- Custom CSS cleaning to remove unsupported features
- Intelligent content pagination
- Professional cover page generation

🚀 Development Setup

Prerequisites

Node.js 18+ and npm
Angular CLI 20+
Google Gemini API key (optional, mock data available)

Installation

Clone the repository

git clone <repository-url>
cd proposal-app

Install dependencies
```
npm install
```

Configure environment variables (optional)

# Create .env file in root directory
GEMINI_API_KEY=your_api_key_here
USE_MOCK_DATA=false

Run development server
```
npm start
```
Navigate to http://localhost:4200

Build for Production

# Development build
npm run build

# Production build
npm run build:prod

Environment Configuration

The application uses a build-time script (scripts/generate-env-config.js) to inject environment variables. This ensures:

API keys are never exposed in source code
Different configurations for development and production
Support for Vercel environment variables

See README_ENV.md for detailed environment setup instructions.

📸 Screenshots & Demo

Note: Screenshots and live demo links can be added here. The application features:

Clean, modern interface with intuitive navigation

Real-time AI proposal generation

Professional PDF output with custom styling

Responsive design across all devices

🔒 Disclaimer

⚠️ Important Notice

This repository is a public showcase of the project for portfolio and demonstration purposes. The actual source code, including:

Complete implementation details
API integration code
Business logic and algorithms
Full configuration files
Production environment settings

...is maintained in a private repository for security and intellectual property protection.

This public repository serves as:

A demonstration of technical capabilities
A portfolio piece for potential employers
Documentation of the project's architecture and features
A reference for the technologies and patterns used

For inquiries about the full implementation or collaboration opportunities, please contact me directly.

📊 Project Metrics

Lines of Code: ~5,000+ (TypeScript, HTML, CSS)
Components: 10+ reusable components
Services: 3 core business logic services
Build Time: < 30 seconds
Bundle Size: Optimized with lazy loading
Performance: Lighthouse score 90+ (target)

🎯 Future Enhancements

Template library for different proposal types
Collaborative editing features
Integration with CRM systems
Advanced analytics and proposal tracking
Email integration for direct proposal sending
Custom branding options
Multi-user support with authentication

👨‍💻 About the Developer

Built with passion for creating efficient, user-friendly solutions that solve real business problems. This project demonstrates:

Full-stack capabilities with modern frontend frameworks
AI integration expertise with Google Gemini
Problem-solving skills in complex PDF generation
Best practices in Angular development
Production-ready code with proper error handling and security

📝 License

🤝 Contact

For questions, collaboration opportunities, or to see the full implementation:

Portfolio: [Your Portfolio URL]
LinkedIn: [Your LinkedIn Profile]
Email: [Your Email]

Built with ❤️ using Angular, TypeScript, and Google Gemini AI

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
README.md		README.md

frxncismor/proposal-public

Folders and files

Latest commit

History

Repository files navigation