meme-generator — Vite 工具站模板

SHA-256: 865363e2fcffeb79b08e40d2e7549a90255f7dd686da8a72e5f52d34f248a255

2026-10-17T21:52:36.246Z

# 🔥 MemeForge — Meme Generator with Templates

A friendly, open-source meme generator. Pick a template (or upload your own),
add **free Photoshop-style text layers** you can drag anywhere, resize with a
handle, restyle, then **save & share** via a link.

**Tech stack:** React 18 · Firebase (Storage + Firestore) · Tailwind CSS · Vite

---

## ✨ Features

- **Template selection & custom images** — 14 popular built-in templates
  (Drake, Distracted Boyfriend, Expanding Brain, …) plus your own uploads.
- **Photoshop-style text layers** — drag any text anywhere on the canvas,
  drag the pink handle to resize, click to select. Add/reorder/show-hide/delete
  layers, each with its own font, color, outline, size, alignment, and ALL-CAPS.
- **Image resizing & formatting** — export at any width (200–2000 px) as PNG or
  JPEG, with one-click download and clipboard copy.
- **Save & share with links** — rendered memes upload to Firebase Storage and
  get a shareable URL (`#/m/<id>`) that opens a clean viewer for anyone.
- **Search & filter templates** — live search by name/tag, plus “Popular” and
  tag-chip filters.
- **Open-source contributions** — users can **submit new templates** from the
  Contribute tab; they're stored in Firestore and appear in the picker.
- **Works offline/local** — with no Firebase config the app runs in **local
  demo mode** (IndexedDB + data URLs), so it's fully usable for development and
  demos. Add Firebase for real cloud storage & cross-user sharing.

---

## 🚀 Quick start

```bash
npm install
npm run dev
# open the printed http://localhost:5173
```

No Firebase setup needed for local/demo use.

### Build for production

```bash
npm run build      # outputs to dist/
npm run preview    # serves dist/ on http://localhost:4173
```

---

## ☁️ Enable Firebase (already configured for "memegen")

This project's web app **MemeForge** is already registered in the
**memegen** project (project ID `memegen-7b3d4`). To turn on real cloud
sharing you only need two things:

### 1. Paste your API key
The other config values are already written into `.env.local`. You just need
to paste the web API key:

1. Firebase Console → **Project settings** → **Your apps** → **MemeForge** →
   SDK setup (`firebaseConfig`).
2. Copy `apiKey` and replace `PASTE_API_KEY_HERE` in `.env.local`:
   ```
   VITE_FIREBASE_API_KEY=AIza...your_key
   ```
   (Firebase web API keys are **not secret** — access is controlled by the
   security rules below, not by hiding this key.)

### 2. Enable the two services
In the Firebase console, for the **memegen** project:
- **Storage** → Get started (default bucket `memegen-7b3d4.appspot.com`,
  lock access to authed/validated — but this app writes unauthenticated, so
  keep the bundled `storage.rules` which allows validated writes).
- **Firestore Database** → Create database (production mode) → publish the
  bundled `firestore.rules`.

### 3. Deploy the rules (optional, recommended)
If you have the Firebase CLI:
```bash
npm install -g firebase-tools
firebase login
firebase use memegen-7b3d4
firebase deploy --only firestore:rules,storage
```
The rule files (`firestore.rules`, `storage.rules`) are already in the repo.
Without the CLI, you can paste them into the console's Rules editor instead.

### 4. Restart and verify
```bash
npm run dev
```
The "Local demo mode" banner should disappear and saving a meme returns a
real `#/m/<id>` link that works on any device.

> **Security note:** The bundled rules allow **open (unauthenticated) writes**
> so the app works with no login. This is fine for a demo but is abuseable.
> Before real public deployment, add **Firebase Auth** and require it in the
> rules (see `firestore.rules` / `storage.rules` comments).

---

## 🗂️ Project structure

```
meme-generator/
├─ index.html
├─ vite.config.js
├─ tailwind.config.js
├─ postcss.config.js
├─ firebase.json            # points at firestore.rules / storage.rules
├─ firestore.rules          # memes + templates collections
├─ storage.rules            # memes/<id>.png images
├─ .env.example
├─ .env.local              # your Firebase keys (gitignored)
├─ public/favicon.svg
└─ src/
   ├─ main.jsx
   ├─ App.jsx                 # layout, tabs, hash routing for share links
   ├─ index.css              # Tailwind + neumorphism theme
   ├─ firebase.js            # Firebase init (graceful null if unconfigured)
   ├─ data/templates.js      # built-in template library + search/filter
   ├─ lib/
   │  ├─ utils.js            # uid, slugify, formatDate, clamp
   │  ├─ storage.js          # Firebase + IndexedDB fallback (unified API)
   │  └─ renderMeme.js       # canvas draw, free-layer text-wrap, export
   └─ components/
      ├─ MemeCanvas.jsx      # interactive canvas: select/move/resize layers
      ├─ TemplatePicker.jsx  # search, filters, upload, community templates
      ├─ LayersPanel.jsx     # add/select/reorder/show/delete + properties
      ├─ ExportControls.jsx  # resize width, format, download, copy
      ├─ ShareControls.jsx   # save + shareable link
      ├─ Gallery.jsx         # recent memes
      ├─ ContributeForm.jsx  # submit a new template
      └─ MemeViewer.jsx      # standalone share-link viewer
```

---

## 🧠 Learning path covered

- **Image manipulation** — HTML5 Canvas: drawing, text wrapping, outlines,
  drag-to-position, scaling for export.
- **Firebase storage** — uploading data URLs to Storage, metadata in Firestore,
  with a robust local (IndexedDB) fallback when unconfigured.
- **User interaction** — live layer editing, sliders, search/filter, drag
  gestures, clipboard & download.

---

## 🤝 Contributing

Open-source contributions are welcome:

- **Add new templates** — submit via the Contribute tab, or add an entry to
  `src/data/templates.js` (Imgflip CDN URLs are auto-proxied for CORS-safe
  export).
- **Improve sharing** — add Firebase Auth, nicer share pages, or OG meta tags.
- **Advanced text editing** — rotation, per-line control, font uploads, etc.

1. Fork & clone.
2. `npm install && npm run dev`.
3. Make your change, open a PR.

---

## 📄 License

MIT — do what you like, just keep the memes funny.