TradeLink

A full-stack peer-to-peer marketplace where users list, discover, and purchase items — with real-time messaging, wishlists, trending feeds, and an admin dashboard.

---

Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• Getting Started
• API Reference
• Project Structure
• Team

---

Overview

TradeLink is a campus-focused peer-to-peer marketplace built for students to buy and sell goods with ease. Users can browse listings by category, price, and location; save items to a wishlist; chat directly with sellers; and complete purchases — all within one platform. Admins have dedicated tools to monitor platform activity and manage reported content.

The application is built with a React + Vite frontend and a Node.js/Express REST API backed by a MariaDB database, with Socket.IO powering real-time chat.

---

Features

For Buyers

• Browse & Discover — Explore listings by category (Electronics, Furniture, Clothing, Other), filter by price range, and search by item name or location (township/county).
• Trending & Recent — Dedicated feeds for the top 10 most-viewed items and listings from the past 7 days.
• Wishlist — Save items for later; wishlist state is persisted per user account.
• Purchase Flow — Secure checkout with saved card info; automated email receipts sent to both buyer and seller via SendGrid.
• Rate Sellers — Post-purchase seller rating modal with a descriptive scale (Awful → Great).

For Sellers

• List Items — Upload items with up to 5 images, a description, price, category, and location.
• Manage Listings — Edit or remove active listings from the user dashboard.
• Earnings Dashboard — View total revenue, total sales count, and a full transaction history.
• Sales Notifications — Automatic email notification when an item sells.

Real-Time Messaging

• Direct messages between buyers and sellers powered by Socket.IO.
• Per-conversation unread message indicators.
• Persisted message history stored in the database, loaded in chronological order.
• Read-status tracking updated on conversation open.

Authentication & Security

• JWT-based sessions stored in HttpOnly cookies (immune to XSS).
• Passwords hashed with SHA-256 + server-side nonce (prevents dictionary attacks).
• Email verification via SendGrid — unverified accounts are automatically purged every 2 hours.
• SQL injection prevention via parameterized queries throughout.
• Role-based access control: perm = 0 (user) vs. perm = 1 (admin).

Admin Panel

• Item Report — Breakdown of total, active, completed, and reported listings per category.
• User Report — Per-user listing statistics across the platform.
• Flag and review reported items.

---

Tech Stack

Layer	Technology
Frontend	React 19, React Router v7, TanStack Query v5, Vite 6
Backend	Node.js, Express 4
Database	MariaDB
Real-Time	Socket.IO 4
Auth	JSON Web Tokens, HttpOnly Cookies
Email	SendGrid
File Uploads	Multer (images stored server-side)
Bundler	Vite (with SWC for fast transpilation)

---

Architecture

tradeLink/
├── client/         # React SPA (Vite)
│   └── src/
│       ├── Pages/  # Route-level page components
│       └── comp/   # Reusable UI components
└── server/         # Express REST API
    ├── server.js         # Entry point, route definitions
    ├── db.js             # MariaDB connection pool
    ├── itemHandler.js    # Listing CRUD, ratings, refunds
    ├── profileHandler.js # User profile, wishlist
    ├── transaction.js    # Purchases, earnings, card info
    ├── MessageHandler.js # Chat persistence & WebSocket events
    ├── imgHandler.js     # Multer image upload/fetch
    └── returnHandler.js  # Search & filter query builder

Data flow: The React client communicates with the Express API over HTTP (REST) and WebSocket (Socket.IO). The API queries MariaDB via a connection pool. Image files are served as static assets from the server's local filesystem.

---

Getting Started

Prerequisites

• Node.js ≥ 18
• MariaDB instance running locally or remotely
• A SendGrid API key with a verified sender email

Environment Variables

Create a .env file in /server:

JWTOKEN=your_jwt_secret
HASHNONCE=your_password_hash_nonce
SGMAIL=your_sendgrid_api_key
DB_HOST=your_db_host
DB_USER=your_db_user
DB_PASS=your_db_password
DB_NAME=your_db_name

Installation & Running

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

# Run both concurrently from /server
cd ../server
npm start

The backend starts on port 8080 and the Vite dev server on port 5173 (or the configured preview port).

---

API Reference

Auth

Method	Endpoint	Description
POST	/register	Create account, set JWT cookie
POST	/login	Authenticate, set JWT cookie
POST	/logout	Clear JWT cookie
GET	/send_token	Validate current session
POST	/auth	Send email verification code
GET	/verify	Confirm email verification link

Items

Method	Endpoint	Description
POST	/uploadItem	Create a new listing
POST	/filter	Search/filter listings
GET	/send_listings_guest	Fetch all listings (unauthenticated)
GET	/trending	Top 10 most-viewed items
GET	/recent	Items listed in the past 7 days
POST	/edit-item	Edit an existing listing
POST	/remove_item	Delete a listing
POST	/report_item	Flag a listing
POST	/rateitem	Submit an item rating
POST	/view_item	Increment item view count

Profile & Wishlist

Method	Endpoint	Description
GET	/profile	Get authenticated user's profile
GET	/info/:uid	Get any user's public info
POST	/updateProfile	Update name, bio, profile picture
GET	/wishlist	Fetch user's wishlist
POST	/wishlist/add	Add item to wishlist
POST	/wishlist/remove	Remove item from wishlist
GET	/userrating/:uid	Get a user's average seller rating
POST	/rateuser	Submit a seller rating

Transactions

Method	Endpoint	Description
POST	/transaction	Record a purchase, trigger emails
GET	/earnings/:uid	Seller earnings summary
POST	/saveCardInfo	Save payment card details

Messaging

Method	Endpoint	Description
POST	/sendMessage	Send a message + emit via Socket.IO
GET	/getMessages/:receiverId/:senderID	Fetch conversation history
GET	/getChats/:sender_id	List all conversations with unread status
POST	/updateStatus	Mark messages as read

Admin

Method	Endpoint	Description
GET	/item-report	Item stats grouped by category
GET	/user-report	Listing stats per user

---

Project Structure

client/src/
├── Pages/
│   ├── Home.jsx            # Landing page
│   ├── Login.jsx           # Login form
│   ├── Register.jsx        # Registration form
│   ├── Auth.jsx            # Email verification
│   ├── MainPage.jsx        # Marketplace browse page
│   ├── ListItem.jsx        # Create a listing
│   ├── PurschasePage.jsx   # Checkout & payment
│   ├── Wishlist.jsx        # Saved items
│   ├── Messages.jsx        # Messaging hub
│   ├── Trending.jsx        # Trending items feed
│   ├── MostRecent.jsx      # Recent listings feed
│   └── UserDashboard.jsx   # Profile & dashboard
└── comp/
    ├── Navbar.jsx
    ├── ItemCard.jsx         # Listing card (wishlist, edit, buy)
    ├── Chat.jsx             # Real-time chat window
    ├── Confirm.jsx          # Purchase confirmation modal
    ├── RateModal.jsx        # Post-purchase seller rating
    ├── Edit.jsx             # Inline listing editor
    ├── MP-comp/             # Marketplace sub-components
    │   ├── SearchBar.jsx
    │   ├── FilterSidebar.jsx
    │   ├── ItemListPage.jsx
    │   └── CatBox.jsx
    └── UD-comp/             # Dashboard sub-components
        ├── UserHome.jsx
        ├── UserListing.jsx
        ├── UserEarnings.jsx
        ├── AdminProfile.jsx
        ├── AdminReport.jsx
        ├── ItemReport.jsx
        └── UserReport.jsx

---

Team

Built by a team of five:

• Angel Vargas
• Danny Lin
• Deep Patel
• Manan Patel
• Oscar Lin