Skip to content

README.md

Latest commit

 

History

History
207 lines (154 loc) · 4.97 KB

README.md

File metadata and controls

207 lines (154 loc) · 4.97 KB

LinkedIn Word Cloud Generator

An online app for generating high-quality word clouds perfectly sized for LinkedIn profile banners (1200×400px).

LinkedIn Word Cloud Generator

Features

  • 🎨 Custom Color Palettes: Choose your own colors for the word cloud
  • 🔀 Shuffle Functionality: Generate new layouts with the same words
  • 📝 Line-Delimited Input: Enter one word per line for easy organization
  • 📏 LinkedIn Banner Size: Perfectly sized at 1200×400px for LinkedIn profiles
  • 💾 Download PNG: Save your word cloud as a high-quality PNG image
  • 🎯 Professional Design: Clean, modern interface with LinkedIn branding

Live Demo Screenshots

Initial Word Cloud

Initial Word Cloud

After Shuffle

Shuffled Word Cloud

Custom Professional Terms

Custom Words

Tech Stack

  • Frontend: React with TypeScript
  • Backend: CloudFlare Workers
  • Styling: Modern CSS with responsive design
  • Canvas: HTML5 Canvas for word cloud rendering

Project Structure

liwordcloud/
├── frontend/          # React TypeScript application
│   ├── src/
│   │   ├── components/
│   │   │   ├── WordCloudGenerator.tsx
│   │   │   └── WordCloudGenerator.css
│   │   ├── App.tsx
│   │   └── index.tsx
│   └── package.json
├── backend/           # CloudFlare Workers API
│   ├── src/
│   │   └── index.ts
│   ├── wrangler.toml
│   └── package.json
└── package.json       # Root package.json with scripts

Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
git clone https://github.com/tsew/liwordcloud.git
cd liwordcloud
  1. Install all dependencies:
npm run install:all

Development

Start both frontend and backend in development mode:

# Terminal 1: Start the backend (CloudFlare Workers)
npm run dev:backend

# Terminal 2: Start the frontend (React)
npm run dev:frontend

The application will be available at:

Building for Production

# Build frontend
npm run build:frontend

# Build backend
npm run build:backend

Configuration

The frontend needs to know the backend API URL. For local development, this is automatically set to http://localhost:8787.

For production deployment:

  1. Copy the environment example file:
cp frontend/.env.example frontend/.env.production.local
  1. Update the API URL in the file:
# In frontend/.env.production.local
REACT_APP_API_URL=https://your-worker.your-account.workers.dev
  1. Rebuild the frontend:
npm run build:frontend

API Endpoints

POST /api/generate-wordcloud

Generates a word cloud from input text.

Request Body:

{
  "input": "React\nTypeScript\nJavaScript\nWeb Development",
  "colors": ["#1a73e8", "#34a853", "#fbbc04", "#ea4335"],
  "width": 1200,
  "height": 400
}

Response:

{
  "success": true,
  "data": [
    {
      "text": "React",
      "size": 54,
      "color": "#1a73e8",
      "x": 429.7,
      "y": 396.5
    }
  ],
  "width": 1200,
  "height": 400
}

Usage

  1. Enter Words: Type your skills, technologies, or keywords (one per line) in the text area
  2. Choose Colors: Use the default colors or add your own using the color picker
  3. Generate: Click "Generate" to create your word cloud
  4. Shuffle: Click "🔀 Shuffle" to create a new layout with the same words
  5. Download: Click "📥 Download PNG" to save your word cloud

Deployment

CloudFlare Workers Deployment

  1. Configure your CloudFlare account with Wrangler:
npx wrangler login
  1. Deploy the backend from the root directory:
npm run deploy

Or use wrangler directly:

npx wrangler deploy

Frontend Deployment

The frontend can be deployed to any static hosting service:

  • Vercel: Connect your GitHub repository
  • Netlify: Drag and drop the frontend/build folder
  • GitHub Pages: Use the built files from frontend/build

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

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

Acknowledgments

  • Designed specifically for LinkedIn profile banners
  • Built with modern web technologies for optimal performance
  • Responsive design for all device types