wooden-marketplace

byKhyati Singh

Here’s a **clean, startup-level MASTER PROMPT** for building a **Full Stack Social Media + Listing Marketplace (PERN stack)** using **React JS**, with strong **UX/UI + real product thinking**. You can paste this into any AI tool and it should generate a solid full-stack base. --- # 🚀 MASTER PROMPT: Social Media + Listing Marketplace (React + PERN) ```id="react-pern-listing-social" Build a full-stack Social Media + Listing Marketplace web application using PERN stack (PostgreSQL, Express, React, Node.js). The platform should combine: 1) Social media features (posts, likes, follows) 2) Marketplace listing system (buy/sell products) The UI should be modern, mobile-first, and optimized for engagement + conversions. ---------------------------------- 🧩 CORE FEATURES ---------------------------------- 👤 Authentication & User Roles - JWT-based authentication - Email/password + Google login (optional) - Roles: - User (buyer/seller) - Admin 👤 User Profile - Profile image, bio, location - Followers / following - User listings - User posts ---------------------------------- 📸 SOCIAL MEDIA FEATURES ---------------------------------- 📰 Feed - Global feed (latest posts) - Personalized feed (following users) - Infinite scrolling 📸 Posts - Upload images/videos - Add captions + hashtags - Like, comment, share - Save/bookmark posts 💬 Interaction - Nested comments - Follow/unfollow users - Notifications (likes, comments, follows) ---------------------------------- 🛒 MARKETPLACE LISTING FEATURES ---------------------------------- 📦 Listings - Create listing: - Title, price, description - Category, condition - Location-based listing - Multiple images - Edit/delete listing 🔍 Search & Filters - Search listings + users - Filters: - Price range - Category - Location - Condition 📄 Listing Detail Page - Image gallery - Seller info - Similar listings - “Contact seller” CTA ---------------------------------- 💬 CHAT SYSTEM (IMPORTANT) ---------------------------------- - Real-time buyer-seller messaging - Socket.io integration - Chat inbox - Seen/delivered status ---------------------------------- 💳 TRANSACTIONS (OPTIONAL) ---------------------------------- - Stripe integration - Secure checkout - Order tracking - Payment history ---------------------------------- 🎨 UX/UI DESIGN SYSTEM ---------------------------------- Theme: - Clean, modern, social + commerce hybrid - Primary: dark navy / white - Accent: gradient (purple/blue) Layout: - Top navbar (search + actions) - Sidebar (desktop) - Bottom nav (mobile) - Feed + product grid hybrid Design: - Card-based UI - Grid for listings - Story-like UI for posts (optional) Micro-interactions: - Like animation ❤️ - Hover effects - Skeleton loaders - Toast notifications ---------------------------------- 📄 PAGES STRUCTURE ---------------------------------- - Home feed - Explore page - Listing page - Listing detail page - Create listing page - Chat page - Profile page - Notifications page - Login/signup page ---------------------------------- ⚡ ADVANCED FEATURES ---------------------------------- - AI-based recommendations (posts + products) - Trending listings - Recently viewed items - Save searches - Push notifications ---------------------------------- 🧠 EXPERIENCE INNOVATION ---------------------------------- - “Shop from posts” (tag products in posts) - Influencer selling system - Personalized feed based on interests ---------------------------------- 🔐 BACKEND ARCHITECTURE ---------------------------------- - REST API (Express) - PostgreSQL (Prisma ORM) Tables: - Users - Posts - Comments - Likes - Listings - Orders - Messages - Notifications Middleware: - Auth verification - Error handling - Role-based access ---------------------------------- ⚙️ TECH STACK ---------------------------------- Frontend: - React JS - Tailwind CSS - Redux Toolkit / Zustand Backend: - Node.js + Express Database: - PostgreSQL Other: - Socket.io (real-time) - Cloudinary (media upload) - Stripe API ---------------------------------- 🎯 GOAL ---------------------------------- Create a scalable platform combining social engagement + marketplace transactions. Focus on: - Engagement (likes, comments, follows) - Smooth UX - Fast performance - Real-time chat ---------------------------------- OUTPUT: ---------------------------------- - Full React frontend - Backend API (Node + Express) - PostgreSQL schema - Folder structure - Deployment steps (Vercel + Railway/Render) ``` --- # 💡 UX/UI IDEAS TO MAKE IT STAND OUT ### ✨ Add these: * Reels / short video feed * AI-generated captions * Smart price suggestion * Location-based discovery ### 🔥 Premium Product Features: * Verified seller badge * Trust score system * Escrow payment system * Boost listing (paid promotion) --- # 🧠 Real Advice This type of project can easily get messy. So build in this order: 1. Auth + profiles 2. Listings 3. Posts 4. Chat 5. Advanced features Keep UI simple at first, then polish. --- If you want, I can next: * generate **full backend schema + APIs** * give **step-by-step daily build plan** * or design **complete UI screens (like real startup)** 🚀