https://github.com/triptigithub/memer
https://github.com/triptigithub/memer
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/triptigithub/memer
- Owner: Triptigithub
- Created: 2025-06-17T15:55:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-17T16:20:02.000Z (8 months ago)
- Last Synced: 2025-06-17T17:32:56.165Z (8 months ago)
- Language: JavaScript
- Homepage: https://memer-inky.vercel.app/
- Size: 60.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MemeHustle
A cutting-edge meme marketplace where users can create memes, place bids, upvote favorites, and enjoy AI-generated captions and vibes. Built with a React + Vite frontend (styled with Tailwind CSS) and a Node.js + Express backend, powered by Supabase (PostgreSQL) and Socket.IO for real-time updates. AI caption and vibe features are stubbed with fallback logic, ready for full API integration.
[](https://nodejs.org/)
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://supabase.com/)
[](https://socket.io/)
---
## ✨ Features
- **📝 Meme Creation**:Easily add memes by submitting a title, image URL, and tags.
- **⚡ Real-Time Bidding**: Place live bids on memes with instant updates showing the highest bid.
- **👍 Upvote/Downvote & Leaderboard**: Upvote or downvote memes and explore the top-ranked submissions Generate clever captions and vibe descriptions (currently stubbed, replaceable with real AI API).Generate witty captions and “vibe” descriptions (stubbed with fallback; replace with real API if available).
- **🔍 Search & Grid View**: Search memes by title or tags with a clean, always-grid layout.
- **🔒 Mock Authentication**: User sessions identified by random UUIDs stored in localStorage.
- **🎨 Modern UI**: Responsive design featuring clean cards, a search bar, and smooth loading states.
---
## 🛠️ Tech Stack
- **Frontend**: React, Vite, Tailwind CSS, lucide-react icons, Axios, Socket.IO client.
- **Backend**: Node.js, Express, Socket.IO, @supabase/supabase-js, Axios (for AI stubs), dotenv.
- **Database**: Supabase (PostgreSQL). Tables: `memes`, `bids`; RPC for upvote increments.
- **Deployment**:
- Backend: Render.
- Frontend: Vercel.
- **AI Integration**: Stubbed calls with random fallback; replace in `backend/src/services/aiService.js` if you have a key/spec.
---
## 🔧 Prerequisites
- Node.js (v16+), npm
- Supabase project (hosted) with URL and Service Role Key
- (Optional) AI API key for real integration; otherwise stub/fallback is used
---
## Environment Variables
### Backend (`backend/.env`)
Copy `backend/.env.example` and fill:
```env
SUPABASE_URL=https://.supabase.co
SUPABASE_SERVICE_KEY=
GOOGLE_GEMINI_API_KEY=
PORT=5000
```
### Frontend (frontend/.env)
```env
VITE_API_URL=https:///api
VITE_SOCKET_URL=https://
```
## Supabase Schema
In Supabase Dashboard → SQL Editor, run:
1. **Enable UUID extension** (if needed):
```sql
create extension if not exists "uuid-ossp";
```
2. **Create memes table**:
```sql
create table if not exists memes (
id uuid primary key default uuid_generate_v4(),
title text not null,
image_url text not null,
tags text[] not null,
upvotes integer not null default 0,
owner_id text not null,
caption text,
vibe text,
created_at timestamp with time zone default now()
);
create index if not exists idx_memes_tags on memes using gin (tags);
```
3. **Create bids table**:
```sql
create table if not exists bids (
id uuid primary key default uuid_generate_v4(),
meme_id uuid references memes(id) on delete cascade,
user_id text not null,
credits integer not null,
created_at timestamp with time zone default now()
);
create index if not exists idx_bids_meme_id on bids(meme_id);
```
4. **Create RPC to increment upvotes**:
```sql
create or replace function increment_upvotes(p_meme_id uuid, p_delta int)
returns void language plpgsql as $$
begin
update memes
set upvotes = coalesce(upvotes, 0) + p_delta
where id = p_meme_id;
end;
$$;
```
Confirm tables and function in Table Editor.
## Local Development
### Backend
```bash
cd backend
npm install
cp .env.example .env
# Edit .env with your Supabase details
npm run dev
```
### Frontend
```bash
cd frontend
npm install
# (Optional) create .env with VITE_API_URL/VITE_SOCKET_URL if needed
npm run dev
```
## Deployment
### Backend on Render
- Root Directory:
```bash
backend
```
- Build Command:
```bash
npm install
```
- Start Command:
```bash
npm start
```
- Set environment variables in Render: SUPABASE_URL, SUPABASE_SERVICE_KEY, GOOGLE_GEMINI_API_KEY, etc.
- Ensure CORS allows your frontend domain.
## Frontend on Vercel
- Connect repo to Vercel.
- Build Command:
```bash
npm run build
```
- Output Directory:
```bash
dist
```
- Set environment variables:
```env
VITE_API_URL=https:///api
VITE_SOCKET_URL=https://
```
- Deploy and verify live site.
## Usage
- **Home**: Browse memes in a responsive grid.
- **Search**: Filter by title or tags.
- **Create**: Click “Create”, fill title, image URL, tags.
- **Bid**: Enter bid amount on a meme card; highest bid updates live.
- **Vote**: Upvote or Downvote; leaderboard reflects votes.
- **AI Buttons**: “Caption” / “Vibe” show fallback or real API result if configured.