FontPilot.io 🎨

Navigate typography with precision. An intelligent, AI-powered font pairing assistant designed for modern designers, developers, and creators who want to elevate their typography game without spending hours on experimentation.

✨ Features

AI-Powered Navigation: Navigate typography with precision using intelligent algorithms that understand your design needs
Live Previews: Experience your font choices in real-time with live previews of headers, blog titles, and landing pages
Export CSS: Get production-ready CSS code with Google Fonts links and optimized font-family declarations
Share & Save: Build your typography library by saving favorite combinations and sharing them with your team
Instant Results: Navigate to perfect typography in seconds, not hours. Get beautiful font pairings instantly
Google Fonts Integration: Access the complete Google Fonts library with expertly curated pairings that harmonize perfectly

🚀 Getting Started

Prerequisites

Node.js 18+ (for Next.js 14 features)
npm or yarn (package manager)
Git (for version control)

Quick Start

Clone the repository:

git clone https://github.com/NitinSemwal2605/fontpilot-io.git
cd fontpilot-io

Install dependencies:

npm install
# or
yarn install

Set up environment variables:

# Create .env.local file
cp .env.example .env.local

# Edit .env.local with your API keys
NEXT_PUBLIC_GOOGLE_FONTS_API_KEY=your_google_fonts_api_key
NEXT_PUBLIC_GOOGLE_GEMINI_API_KEY=your_google_gemini_api_key

Run the development server:

npm run dev
# or
yarn dev

Open your browser: Navigate to http://localhost:3000

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Google Fonts API Key
NEXT_PUBLIC_GOOGLE_FONTS_API_KEY=your_google_fonts_api_key_here

# Google Gemini AI API Key  
NEXT_PUBLIC_GOOGLE_GEMINI_API_KEY=your_google_gemini_api_key_here

Getting API Keys

Google Fonts API:
- Go to Google Cloud Console
- Enable the Google Fonts API
- Create credentials and get your API key
Google Gemini AI API:
- Go to Google AI Studio
- Create a new API key for Gemini Pro

🛠️ Tech Stack

Framework: Next.js 14 with App Router
Styling: Tailwind CSS with custom animations
UI Components: shadcn/ui with Radix UI primitives
Animations: Framer Motion
Icons: Lucide React
TypeScript: Full type safety
Toast Notifications: react-hot-toast
SEO: Structured data, sitemap, robots.txt
PWA: Web app manifest for mobile experience
AI Integration: Google Gemini Pro for intelligent recommendations
Font Management: Google Fonts API integration

🎯 Usage

AI-Powered Search: Describe your project like "Building a SaaS landing page" or "Creating a wedding website"
Browse Categories: Explore curated collections by style (Professional, Creative, Modern, etc.)
Live Previews: See font combinations in real UI components
Export CSS: Copy production-ready CSS with Google Fonts links
Save Favorites: Build your typography library with saved combinations

🎨 Design System

The application uses a modern design system with:

Gradient text effects
Smooth animations and transitions
Glass morphism effects
Responsive design
Dark mode support (coming soon)

📱 Responsive Design

FontPair.ai is fully responsive and works beautifully on:

Desktop (1200px+)
Tablet (768px - 1199px)
Mobile (320px - 767px)

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Google Fonts API Key
NEXT_PUBLIC_GOOGLE_FONTS_API_KEY=your_google_fonts_api_key_here

# Google Gemini AI API Key  
NEXT_PUBLIC_GOOGLE_GEMINI_API_KEY=your_google_gemini_api_key_here

Getting API Keys

Google Fonts API:
- Go to Google Cloud Console
- Enable the Google Fonts API
- Create credentials and get your API key
Google Gemini AI API:
- Go to Google AI Studio
- Create a new API key for Gemini Pro

📁 Project Structure

fontpilot-io/
├── app/                          # Next.js 14 App Router
│   ├── components/               # Shared components
│   │   └── structured-data.tsx  # SEO structured data
│   ├── favorites/               # Favorites page
│   │   └── page.tsx
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # Root layout with metadata
│   ├── manifest.ts              # PWA manifest
│   ├── page.tsx                 # Home page
│   ├── robots.ts                # SEO robots.txt
│   └── sitemap.ts              # SEO sitemap
├── components/                   # Reusable components
│   ├── ui/                      # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── input.tsx
│   ├── features.tsx             # Features section
│   ├── footer.tsx               # Footer component
│   ├── font-card.tsx            # Font pair card
│   ├── font-preview.tsx         # Font loading component
│   ├── navigation.tsx           # Navigation bar
│   └── ai-reasoning.tsx         # AI reasoning display
├── lib/                         # Utility libraries
│   ├── ai-recommendations.ts    # AI integration
│   ├── favorites.ts             # Local storage management
│   ├── fonts.ts                 # Google Fonts integration
│   ├── font-styles.ts           # Font categorization
│   └── utils.ts                 # Utility functions
├── public/                      # Static assets
└── package.json                 # Dependencies

🏗️ Architecture Overview

Core Components

AI Integration (lib/ai-recommendations.ts)
- Google Gemini Pro integration
- Context-aware font recommendations
- Fallback recommendations for different use cases
Font Management (lib/fonts.ts)
- Google Fonts API integration
- Dynamic font loading
- Font categorization and filtering
State Management
- React hooks for local state
- Local storage for favorites
- Session storage for font previews
UI Components
- Modular component architecture
- Reusable shadcn/ui components
- Responsive design with Tailwind CSS

Key Features Implementation

AI-Powered Recommendations

// lib/ai-recommendations.ts
export async function getAIRecommendations(userNeed: string): Promise<AIRecommendation[]>

Analyzes user input for context
Generates 10 tailored font combinations
Provides reasoning and use cases

Font Loading System

// lib/fonts.ts
export function loadFontsForPair(headingFont: string, bodyFont: string): Promise<void>

Dynamic Google Fonts loading
Prevents duplicate font requests
Handles loading states

Favorites System

// lib/favorites.ts
export function addToFavorites(fontPair: FontPair): boolean

Local storage persistence
Add/remove functionality
Dedicated favorites page

🔧 Development Guidelines

Code Style

TypeScript: Strict type checking enabled
ESLint: Code quality and consistency
Prettier: Automatic code formatting
Component Structure: Functional components with hooks

Adding New Features

New Font Categories

// Add to lib/font-styles.ts
export const fontStyles = {
  'New Category': {
    icon: '🎨',
    color: 'text-blue-500',
    description: 'Description here'
  }
}

New AI Recommendations

// Add to lib/ai-recommendations.ts
const newRecommendations = [
  {
    heading: 'Font Name',
    body: 'Font Name',
    category: 'Category',
    description: 'Description',
    reasoning: 'Why this works',
    useCase: 'Specific use case'
  }
]

New UI Components

// Create in components/
export default function NewComponent() {
  return (
    <div className="your-styles">
      {/* Component content */}
    </div>
  )
}

Environment Setup

Development
```
npm run dev
```
Build for Production
```
npm run build
npm start
```
Type Checking
```
npm run type-check
```
Linting
```
npm run lint
```

🧪 Testing

Manual Testing Checklist

AI recommendations work for different inputs
Font loading and preview functionality
Favorites system (add/remove/save)
CSS export functionality
Responsive design on different screen sizes
SEO metadata and structured data
PWA functionality

Performance Testing

Font loading performance
AI response times
Bundle size optimization
Lighthouse scores

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository
Set environment variables in Vercel dashboard
Deploy automatically on push to main branch

Other Platforms

Netlify: Similar to Vercel setup
Railway: Container-based deployment
AWS/GCP: Custom server setup

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Contribution Guidelines

Follow TypeScript best practices
Add proper error handling
Include loading states for async operations
Test on multiple browsers
Update documentation for new features

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Google Fonts API for font data
Google Gemini Pro for AI recommendations
shadcn/ui for beautiful components
Framer Motion for smooth animations
Tailwind CSS for utility-first styling

📞 Support

GitHub Issues: Report bugs or request features
Email: 55semwalnitin@gmail.com
Twitter: @nitintweetz

Made with ❤️ by Nitin Semwal

.animate-gradient-shift: Animated gradient background

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Google Fonts for the font library
shadcn/ui for the component library
Framer Motion for animations
Tailwind CSS for styling

📞 Support

🐛 Report bugs: GitHub Issues
💡 Feature requests: GitHub Discussions
📧 Email: hello@fontpair.ai

Made with ❤️ for designers and developers

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
app		app
components		components
lib		lib
public		public
.gitattributes		.gitattributes
.gitignore		.gitignore
INSTALL.md		INSTALL.md
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
setup.bat		setup.bat
setup.ps1		setup.ps1
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

NitinSemwal2605/FontPilot.io

Folders and files

Latest commit

History

Repository files navigation

FontPilot.io 🎨

✨ Features

🚀 Getting Started

Prerequisites

Quick Start

🔧 Environment Variables

Getting API Keys

🛠️ Tech Stack

🎯 Usage

🎨 Design System

📱 Responsive Design

🔧 Environment Variables

Getting API Keys

📁 Project Structure

🏗️ Architecture Overview

Core Components

Key Features Implementation

AI-Powered Recommendations

Font Loading System

Favorites System

🔧 Development Guidelines

Code Style

Adding New Features

Environment Setup

🧪 Testing

Manual Testing Checklist

Performance Testing

🚀 Deployment

Vercel (Recommended)

Other Platforms

🤝 Contributing

Contribution Guidelines

📝 License

🙏 Acknowledgments

📞 Support

🤝 Contributing

📄 License

🙏 Acknowledgments

📞 Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages