A modern, anonymous meme sharing platform built with React, TypeScript, and Appwrite. Share memes, comment, react, and have fun without needing to create an account!
- 🎭 Anonymous Sharing: Upload and share memes without creating an account
- 💬 Real-time Comments: Comment on memes with nested reply support
- 😂 Reactions: Express yourself with like, laugh, love, wow, sad, and angry reactions
- 📱 Responsive Design: Beautiful UI that works on all devices
- ⚡ Real-time Updates: See new memes and comments instantly
- 🔒 Privacy First: No personal data collection, completely anonymous
- Node.js 18 or higher
- An Appwrite account (cloud.appwrite.io)
git clone <your-repo-url>
cd meme-vault
npm installCreate a .env file in the root directory:
cp env.example .envEdit .env with your Appwrite credentials:
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id_here
VITE_APPWRITE_DATABASE_ID=meme-vault
VITE_APPWRITE_MEMES_COLLECTION_ID=memes
VITE_APPWRITE_COMMENTS_COLLECTION_ID=comments
VITE_APPWRITE_REACTIONS_COLLECTION_ID=reactions
VITE_APPWRITE_COMMENT_REACTIONS_COLLECTION_ID=comment_reactions
VITE_APPWRITE_STORAGE_BUCKET_ID=meme-imagesFollow the detailed guide in APPWRITE_SETUP.md to configure your Appwrite project.
npm run devVisit http://localhost:3000 to see your app!
- Appwrite Setup Guide - Complete Appwrite configuration
- Deployment Guide - Deploy to Vercel, Netlify, or GitHub Pages
- GitHub Setup - Repository setup instructions
npm run dev # Start development server
npm run build # Build for production
npm run build:prod # Production build with optimizations
npm run preview # Preview production build
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint errors
npm run type-check # Check TypeScript types- Frontend: React 19 + TypeScript + Vite
- Styling: Tailwind CSS + shadcn/ui components
- Backend: Appwrite (Database, Storage, Real-time)
- State Management: React Context + Custom Hooks
- Icons: Lucide React
Built with shadcn/ui components:
- Cards, Buttons, Dialogs
- Input fields and Textareas
- Avatar components
- Skeleton loaders
src/
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── MemeCard.tsx # Meme display component
│ ├── MemeUpload.tsx # Upload component
│ └── ...
├── contexts/ # React contexts
├── hooks/ # Custom hooks
├── lib/ # Utilities and configurations
├── services/ # API services
├── types/ # TypeScript type definitions
└── utils/ # Helper functions
- Anonymous Users: Device fingerprinting for persistent experience
- Real-time Updates: WebSocket connections via Appwrite
- Image Upload: Drag & drop with preview
- Comment System: Nested replies with real-time updates
- Reaction System: Multiple reaction types with counts
The app is ready for deployment on:
- Vercel (Recommended)
- Netlify
- GitHub Pages
- Any static hosting service
See DEPLOYMENT.md for detailed instructions.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
- Appwrite Connection Error: Check your environment variables
- Build Failures: Run
npm run type-checkandnpm run lint - Image Upload Issues: Verify storage bucket permissions
- Check the Appwrite Documentation
- Review the setup guides in this repository
- Open an issue for bugs or feature requests
- User authentication (optional)
- Meme collections and favorites
- Advanced search and filtering
- Moderation tools
- Mobile app (React Native)
Happy Meme Sharing! 🎭✨