Buy & sell social profiles — a full‑stack marketplace built with React, Tailwind, Clerk authentication, Prisma (Neon), ImageKit, Stripe, Nodemailer, Inngest, and more. A marketplace for buying and selling social profiles (Instagram, YouTube, TikTok, etc.) built with modern web technologies.

Hero Section	Latest Listings

Plans	Marketplace

Messages	My Listings

Listing Details	My Orders

Footer

Admin Dashboard	Verify Credentials

All Listings	Admin Footer

• About
• Key Features
• Tech Stack
• Project Structure
• Prerequisites
• Local Setup
• Environment Variables
• Database Setup
• Deployment
• API Routes Overview
• Development Tips
• Troubleshooting
• Contributing
• License
• Contact

FlipEarn is a full-stack marketplace platform that enables users to buy and sell social media profiles with secure authentication, payment processing, and admin verification. The application features a responsive frontend built with React and a robust backend powered by Express.js.

• Responsive UI with TailwindCSS
• User Authentication via Clerk
• Listings CRUD with media upload (create, edit, delete)
• Advanced Filters sidebar (sticky, mobile modal)
• Admin Dashboard for verification, credential changes, and transactions
• Secure Payments via Stripe integration
• Email Notifications using Nodemailer
• Image Management through ImageKit
• Background Tasks with Inngest
• Real-time Features using WebSocket
• Search & Filters for marketplace discovery

• React 19 (Vite)
• Tailwind CSS for styling
• React Router DOM for routing
• Redux Toolkit for state management
• Clerk for authentication
• Axios for API requests
• react-toastify & react-hot-toast for notifications
• lucide-react for icons

• Node.js + Express server
• Prisma ORM with PostgreSQL
• Neon serverless PostgreSQL adapter
• ImageKit for image uploads
• Stripe for payments
• Nodemailer for email notifications
• Inngest for serverless background tasks
• Multer for multipart form handling
• WebSocket (ws) for real-time chat

FlipEarn/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── app/
│   │   ├── assets/
│   │   ├── components/
│   │   │   ├── admin/
│   │   │   │   ├── AdminFooter.jsx
│   │   │   │   ├── AdminNavbar.jsx
│   │   │   │   ├── AdminSidebar.jsx
│   │   │   │   ├── AdminTitle.jsx
│   │   │   │   ├── CredentialChangeModal.jsx
│   │   │   │   ├── CredentialVerifyModal.jsx
│   │   │   │   ├── ListingDetailsModal.jsx
│   │   │   │   └── WithdrawalDetail.jsx
│   │   │   ├── ChatBox.jsx
│   │   │   ├── CredentialSubmission.jsx
│   │   │   ├── CTA.jsx
│   │   │   ├── FilterSidebar.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Hero.jsx
│   │   │   ├── LatestListing.jsx
│   │   │   ├── ListingCard.jsx
│   │   │   ├── Logger.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Plans.jsx
│   │   │   ├── Projects.jsx
│   │   │   ├── StatCard.jsx
│   │   │   ├── Title.jsx
│   │   │   └── WithdrawModal.jsx
│   │   ├── configs/
│   │   ├── pages/
│   │   │   ├── admin/
│   │   │   │   ├── AllListings.jsx
│   │   │   │   ├── CredentialChange.jsx
│   │   │   │   ├── CredentialVerify.jsx
│   │   │   │   ├── Dashboard.jsx
│   │   │   │   ├── Layout.jsx
│   │   │   │   ├── Transactions.jsx
│   │   │   │   └── Withdrawal.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── ListingDetails.jsx
│   │   │   ├── Loading.jsx
│   │   │   ├── ManageListing.jsx
│   │   │   ├── MarketPlace.jsx
│   │   │   ├── Messages.jsx
│   │   │   ├── MyListings.jsx
│   │   │   └── MyOrders.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── .env
│   ├── package.json
│   └── vite.config.js
│
├── server/
│   ├── configs/
│   │   ├── imageKit.js
│   │   ├── multer.js
│   │   └── nodemailer.js
│   ├── controllers/
│   │   ├── adminController.js
│   │   ├── chatController.js
│   │   ├── listingController.js
│   │   └── stripeWebhook.js
│   ├── middlewares/
│   │   └── authMiddleware.js
│   ├── prisma/
│   │   └── schema.prisma
│   ├── routes/
│   │   ├── adminRoutes.js
│   │   ├── chatRoutes.js
│   │   └── listingRoutes.js
│   ├── server.js
│   ├── .env
│   └── package.json
│
└── README.md

Before you begin, ensure you have the following installed and set up:

• Node.js v18 or higher
• npm or yarn package manager
• Git for version control
• Neon/PostgreSQL database account
• Clerk account (authentication)
• ImageKit account (image uploads)
• Stripe account (payment processing)
• SMTP credentials (for sending emails via Nodemailer or SendGrid)

git clone https://github.com/Gyanthakur/Flip-Earn.git
cd Flip-Earn

# Navigate to client directory
cd client

# Install dependencies
npm install

# Create .env file in client directory
### Add environment variables
.env  

# Start development server
npm run dev

• The frontend will run on http://localhost:5173 by default.

# Navigate to server directory (from project root)
cd server

# Install dependencies
npm install

# Create .env file in server directory
# Add environment variables (see Environment Variables section)
nano .env  # or use your preferred editor

# Generate Prisma client
npx prisma generate

#push in database
npx prisma db push

# Start development server
npm run server

# Or start production server
npm start

The backend will run on the port specified in your .env file (default: 8000).

Open your browser and navigate to:

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000 (or your configured port)

Create a .env file in the client/ directory:

VITE_BASE_URL=http://localhost:5000
VITE_CLERK_PUBLISHABLE_KEY=pk_xxx
VITE_IMAGEKIT_URL=https://ik.imagekit.io/your_id/
....... and many more variable

Note: Replace placeholder values with your actual credentials.

Create a .env file in the server/ directory:

# Server Configuration
PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

....... and many more variable

Important: Never commit .env files to version control. Add them to .gitignore.

1. Push code to GitHub
2. Connect repository to Vercel
3. Set environment variables in Vercel dashboard:
   • VITE_BACKEND_URL
   • VITE_ADMIN_EMAIL
   • VITE_CLERK_PUBLISHABLE_KEY
   • VITE_IMAGEKIT_URL
4. Deploy with build command: npm run build
5. Output directory: dist

1. Set all server environment variables in your deployment provider
2. Ensure DATABASE_URL points to your production Neon database
3. Run migrations before/after deployment:

npx prisma migrate deploy

4. Deploy using your provider's CLI or dashboard

For Vercel Serverless:

• Ensure webhooks (Stripe, etc.) are reachable
• Consider using persistent hosting for background tasks

1. Create a Neon project at https://console.neon.tech
2. Get production DATABASE_URL
3. Add to your backend deployment environment variables
4. Run migrations in production

app.use("/api/inngest", serve({ client: inngest, functions }));
app.use("/api/listing", listingRouter);
app.use("/api/chat", chatRouter);
app.use("/api/admin", adminRouter);

GET   /isAdmin                         - Check admin status
GET   /dashboard                       - Get admin dashboard stats
GET   /all-listings                    - Get all listings (admin)
PUT   /change-status/:listingId        - Change listing status
GET   /unverified-listings             - Get unverified listings
GET   /credential/:listingId           - Get listing credentials
PUT   /verify-credential/:listingId    - Verify credentials
GET   /unchanged-listings              - Get unchanged listings
PUT   /change-credential/:listingId    - Update credentials
GET   /transactions                    - Get all transactions
GET   /withdrawl-requests              - Get withdrawal requests
PUT   /withdrawl-mark/:id              - Mark withdrawal as paid

POST /                - Create / get chat
GET  /user            - Get all user chats
POST /send-message    - Send a chat message

POST   /                          - Add new listing
PUT    /                          - Update listing
GET    /public                    - Get all public listings
GET    /user                      - Get user listings
PUT    /:id/status                - Toggle listing status
DELETE /:listingId                - Delete user listing
POST   /add-credential            - Add credentials
PUT    /featured/:id              - Mark listing as featured
GET    /user-orders               - Get user orders
POST   /withdraw                  - Withdraw amount
GET    /purchase-account/:listingId - Purchase account

Note: All protected routes require authentication middleware. Admin routes additionally require admin authorization.

1. State Management: Use Redux for global state instead of local component state
2. Security: Always validate admin permissions on backend, never trust frontend-only checks
3. Images: Validate file sizes on both client and server
4. Local Webhooks: Use stripe listen or ngrok to test Stripe webhooks locally:

stripe listen --forward-to localhost:5000/webhook

5. Environment Variables: Keep .env files out of version control
6. Database: Always run migrations after schema changes
7. Linting: Run npm run lint before committing

• Verify backend server is running
• Check VITE_BACKEND_URL in client .env
• Inspect browser console and Network tab
• Ensure CORS is properly configured

• Verify Clerk API keys are correct
• Check Clerk dashboard for allowed domains
• Ensure Clerk middleware is properly installed

# Regenerate Prisma client
npx prisma generate

# Check DATABASE_URL format
# Verify database connection
npx prisma db push

# For local development
stripe listen --forward-to localhost:8000/webhook

# Copy webhook signing secret to .env
STRIPE_WEBHOOK_SECRET=whsec_...

# Kill process on port (e.g., 8000)
lsof -ti:5000 | xargs kill -9  # macOS/Linux
netstat -ano | findstr :8000   # Windows

MIT © Gyan Pratap Singh

👤 Gyan Pratap Singh – Developer & Maintainer
📧 Contact: [email protected]
🔗 GitHub: @gyanthakur

Give a ⭐ if you like this project!

Made with ❤️ by Gyan Pratap Singh

If you like this project, don't forget to leave a ⭐ Star on GitHub! 🚀