MemeHub is a Pinterest-style community meme platform built with the MERN stack. It combines powerful admin tools for bulk content management with community-driven improvements, allowing users to collaboratively enhance meme metadata.
👉 Live link: https://memehub-m4gy.onrender.com/
The goal of MemeHub is to provide a fun, open, and community-driven place where:
- Users can upload and explore memes.
- Images are hosted securely on Cloudinary, while MongoDB stores their URLs.
- Developers can contribute freely since the project is open-source.
Anyone can raise issues, suggest improvements, or build new features. 🚀
- Browse & Search - Instant search by name or tags with smart sorting
- Community Edits - Improve meme names and tags collaboratively
- Download - Save any meme with one click
- Responsive Design - Beautiful UI on mobile and desktop
- Featured Memes - Discover highlighted content
- JWT Authentication - Secure login system
- Bulk Upload - Upload up to 50 memes at once
- Moderation Tools - Lock, feature, or delete memes
- Edit History - Track all community contributions
- Admin Dashboard - Comprehensive management interface
- React + TypeScript - Type-safe UI components
- Tailwind CSS + Radix UI - Modern, accessible design
- TanStack Query - Efficient data fetching and caching
- Vite - Lightning-fast development
- Node.js + Express - RESTful API server
- MongoDB + Mongoose - Document database with schemas
- JWT - Secure authentication tokens
- bcrypt - Password hashing
- Multer - File upload handling
- Cloudinary - Image CDN and storage
- Zod - Runtime type validation
- Render - Full-stack hosting
- MongoDB Atlas - Cloud database
MemeHub/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── ui/ # Radix UI components
│ │ │ ├── meme-card.tsx # Meme display card
│ │ │ └── navbar.tsx # Navigation bar
│ │ ├── pages/ # Route pages
│ │ │ ├── home.tsx # Main gallery
│ │ │ ├── meme-preview.tsx # Full meme view
│ │ │ ├── admin-login.tsx # Admin authentication
│ │ │ └── admin-dashboard.tsx # Admin panel
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utilities and API client
│ └── index.html
├── server/ # Express backend
│ ├── index.ts # Server entry point
│ ├── routes.ts # API endpoints
│ ├── storage.ts # Database layer
│ ├── auth.ts # JWT authentication
│ └── vite.ts # Dev server config
├── scripts/ # Utility scripts
│ └── setup-admin.js # Create admin account
├── shared/ # Shared TypeScript types
│ └── schema.ts # Data models
└── package.json
- Edit Tracking - Every edit is logged with timestamps
- Edit Counter - Popular memes show community engagement
- Lock Protection - Admins can lock well-edited memes
- No Deletions - Users can only edit, preserving content
- Bulk Upload - Default metadata ("memename", "memetag") for quick uploads
- Lock/Unlock - Prevent or allow community edits
- Feature/Unfeature - Highlight quality content
- Delete - Remove memes from both database and Cloudinary
- View History - See all edits made to any meme
- Sort by Recent - Newest uploads first
- Sort by Popular - Most community-edited memes
- Sort by Featured - Admin-highlighted content
- Partial Matching - Search works on partial names and tags
- Node.js 18+
- MongoDB (local or Atlas)
- Cloudinary account
git clone https://github.com/yourusername/MemeHub.git
cd MemeHub
npm installCreate a .env file:
# Database
MONGODB_URI=your_mongodb_connection_string
# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
# JWT
JWT_SECRET=your_secret_key_change_in_production
# Server
PORT=5000node scripts/setup-admin.jsFollow the prompts to create your admin credentials.
npm run devVisit http://localhost:5000
npm run build
npm startGET /api/memes # Get all memes (with search & sort)
GET /api/memes/:id # Get single meme
PUT /api/memes/:id/edit # Edit meme (community)
POST /api/admin/register # Create admin account
POST /api/admin/login # Login and get JWT token
POST /api/admin/bulk-upload # Upload multiple memes
DELETE /api/memes/:id # Delete meme
PATCH /api/admin/memes/:id/lock # Lock/unlock meme
PATCH /api/admin/memes/:id/feature # Feature/unfeature meme
GET /api/admin/memes/:id/history # View edit history
- Browse - Visit homepage to see all memes
- Search - Use search bar to find specific memes
- View - Click any meme for full preview
- Edit - Click "Edit Meme" button to improve metadata
- Download - Save memes with the download button
- Login - Go to
/admin-loginwith your credentials - Bulk Upload:
- Click "Bulk Upload" tab
- Select multiple images (up to 50)
- Click "Upload" - all get default metadata
- Moderate:
- Switch to "Manage Memes" tab
- Lock memes to prevent edits
- Feature quality memes
- Delete inappropriate content
- Monitor - View edit counts and history
- JWT Authentication - 7-day token expiration
- Password Hashing - bcrypt with 10 salt rounds
- Role-Based Access - Admin-only routes protected
- Input Validation - Zod schemas on all endpoints
- CORS Protection - Configured for production
MemeHub is open-source (MIT License) and welcomes contributions!
This project is licensed under the MIT License - see the LICENSE file for details.
You're free to use, modify, and distribute this project.
- Cloudinary - Image hosting and CDN
- MongoDB - Database solution
- Radix UI - Accessible component primitives
- Render - Deployment platform
For questions, suggestions, or issues:
Built with ❤️ by the community