Cardboard - Sports Card Collector Social Platform

A full-stack social media platform designed specifically for sports card collectors to share, buy, sell, and trade cards.

Features

Social Features

• User authentication (signup/login with JWT)
• User profiles with bio, location, and profile images
• Follow/unfollow other collectors
• Create posts with text and up to 10 card images
• Like and comment on posts
• Direct messaging between users

Card-Specific Features

• Tag cards by sport, player, team, year, brand, and condition
• Advanced search by card attributes
• Three post types: Showcase, For Sale, For Trade
• Price listings for cards for sale
• Marketplace feed with filters

Collection Management

• Create multiple collections
• Add cards to collections with notes and values
• Track your card inventory
• Showcase your prized collections

Feeds

• Home feed (posts from followed users)
• Explore feed (all posts, chronological)
• Marketplace feed (for sale/trade only)

Tech Stack

Backend

• Node.js + Express
• SQLite database (better-sqlite3)
• JWT authentication
• Bcrypt password hashing
• Multer for file uploads

Frontend

• React 18
• React Router for navigation
• Axios for API calls
• Tailwind CSS for styling
• Vite as build tool

Project Structure

cardboard/
├── server/
│   ├── routes/         # API routes
│   ├── middleware/     # Authentication middleware
│   ├── utils/          # Helper functions
│   ├── database.js     # Database setup and schema
│   └── server.js       # Main server file
├── client/
│   ├── src/
│   │   ├── components/ # React components
│   │   ├── pages/      # Page components
│   │   ├── context/    # Auth context
│   │   ├── utils/      # API utilities
│   │   ├── App.jsx     # Main app component
│   │   └── main.jsx    # React entry point
│   └── public/         # Static assets
├── uploads/            # User uploaded images
├── cardboard.db        # SQLite database
└── package.json        # Backend dependencies

Installation

Prerequisites

• Node.js (v16 or higher)
• npm

Setup

1. Clone the repository:

git clone <your-repo-url>
cd cardboard

2. Install backend dependencies:

npm install

3. Install frontend dependencies:

cd client
npm install
cd ..

4. Create environment file:

cp .env.example .env

5. Edit .env and update the JWT_SECRET:

PORT=3000
JWT_SECRET=your-secure-random-secret-key
NODE_ENV=development
CLIENT_URL=http://localhost:5173

Running the Application

Development Mode

1. Start the backend server:

npm run dev

2. In another terminal, start the frontend:

npm run client

3. Open your browser to http://localhost:5173

Production Mode

1. Build the frontend:

npm run build

2. Start the production server:

npm start

3. The app will be available at http://localhost:3000

Deployment on Linux Server

Using PM2 (Recommended)

1. Install PM2 globally:

sudo npm install -g pm2

2. Build the frontend:

npm run build

3. Start the app with PM2:

pm2 start server/server.js --name cardboard

4. Save PM2 configuration:

pm2 save
pm2 startup

5. Configure reverse proxy (nginx example):

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Environment Variables for Production

Update .env for production:

PORT=3000
JWT_SECRET=your-very-secure-production-secret
NODE_ENV=production
CLIENT_URL=https://your-domain.com

API Endpoints

Authentication

• POST /api/auth/signup - Create new account
• POST /api/auth/login - Login to account

Users

• GET /api/users/:id - Get user profile
• PUT /api/users/:id - Update profile
• POST /api/users/:id/profile-image - Upload profile image
• GET /api/users/:id/posts - Get user's posts
• POST /api/users/:id/follow - Follow user
• DELETE /api/users/:id/follow - Unfollow user

Posts

• POST /api/posts - Create post
• GET /api/posts/:id - Get single post
• PUT /api/posts/:id - Update post
• DELETE /api/posts/:id - Delete post
• POST /api/posts/:id/like - Like post
• DELETE /api/posts/:id/like - Unlike post
• GET /api/posts/:id/comments - Get comments
• POST /api/posts/:id/comments - Add comment

Feeds

• GET /api/feed/home - Home feed (following)
• GET /api/feed/explore - Explore feed (all)
• GET /api/feed/marketplace - Marketplace feed

Search

• GET /api/search/users?q=query - Search users
• GET /api/search/posts?q=query&sport=... - Search posts

Messages

• GET /api/messages/conversations - Get conversations
• GET /api/messages/:userId - Get messages with user
• POST /api/messages - Send message

Collections

• GET /api/collections - Get user's collections
• POST /api/collections - Create collection
• GET /api/collections/:id - Get collection details
• POST /api/collections/:id/cards - Add card to collection

Database Schema

The application uses SQLite with the following main tables:

• users - User accounts
• posts - User posts/cards
• post_images - Card images
• post_tags - Card metadata (sport, player, etc.)
• follows - User follow relationships
• likes - Post likes
• comments - Post comments
• messages - Direct messages
• collections - User collections
• collection_cards - Cards in collections

Security Features

• Passwords hashed with bcrypt (10 rounds)
• JWT tokens for authentication
• Protected routes requiring authentication
• File upload validation (type and size limits)
• SQL injection protection (parameterized queries)
• CORS enabled for frontend communication

License

MIT

Support

For issues and questions, please open an issue on GitHub.