CampusSwap

A web application that lets university students list and swap their items.

Tech Stack

Frontend

• Next.js 15 (App Router)
• TypeScript
• Tailwind CSS
• shadcn-ui
• Axios

Backend

• Express.js
• TypeScript
• Prisma ORM
• PostgreSQL
• JWT Authentication
• bcrypt

Project Structure

.
├── frontend/          # Next.js frontend application
│   ├── app/          # Next.js App Router pages
│   ├── components/   # React components
│   ├── contexts/     # React contexts (Auth)
│   └── lib/          # Utility functions and API client
├── backend/          # Express.js backend API
│   ├── src/
│   │   ├── controllers/  # Route controllers
│   │   ├── routes/       # API routes
│   │   ├── middleware/   # Custom middleware
│   │   └── config/       # Configuration files
│   └── prisma/          # Prisma schema and migrations
└── docker-compose.yml   # PostgreSQL database setup

Features Implemented

Authentication

• User signup with email, password, name, and optional dorm room
• User login with JWT token-based authentication
• Protected routes for authenticated users only

User Profile

• View user profile
• Edit profile (name, dorm room, password)

Item Management

• View all items listed by other users (Shop page)
• Filter items by category (Electronics, Books, Furniture, Clothing, Sports, Other)
• Add new items with title, description, category, and condition
• Edit existing items
• Delete items
• View own items (My Stuffs page)

Design

• Minimalistic Apple-ish design with white background and black text
• Clean and modern UI using shadcn-ui components
• Responsive layout

Setup Instructions

1. Start PostgreSQL Database

npm run db:up

This will start a PostgreSQL container using Docker Compose.

2. Install Dependencies

Install dependencies for both frontend and backend:

npm install
cd backend && npm install
cd ../frontend && npm install
cd ..

3. Generate Prisma Client and Run Migrations

cd backend
npm run db:push
npm run db:generate
cd ..

4. Start the Application

You can start both frontend and backend concurrently:

npm run dev

Or start them individually:

# Terminal 1 - Backend
npm run dev:backend

# Terminal 2 - Frontend
npm run dev:frontend

5. Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:3001

API Endpoints

Authentication

• POST /api/auth/signup - Create a new user account
• POST /api/auth/login - Login with email and password

User

• GET /api/user/profile - Get current user profile (authenticated)
• PUT /api/user/profile - Update user profile (authenticated)

Items

• GET /api/items/all - Get all items from other users (authenticated, supports ?category= filter)
• GET /api/items/my - Get current user's items (authenticated)
• GET /api/items/:id - Get item by ID (authenticated)
• POST /api/items - Create a new item (authenticated)
• PUT /api/items/:id - Update an item (authenticated, owner only)
• DELETE /api/items/:id - Delete an item (authenticated, owner only)

Environment Variables

Backend (.env)

DATABASE_URL="postgresql://campusswap:campusswap_dev_password@localhost:5432/campusswap"
JWT_SECRET="your-secret-key-change-in-production"
PORT=3001

Frontend (.env.local)

NEXT_PUBLIC_API_URL=http://localhost:3001

Database Schema

User

• id (UUID, primary key)
• email (unique)
• password (hashed)
• name
• dormRoom (optional)
• createdAt
• updatedAt

Item

• id (UUID, primary key)
• title
• description
• category (enum: ELECTRONICS, BOOKS, FURNITURE, CLOTHING, SPORTS, OTHER)
• condition
• userId (foreign key to User)
• createdAt
• updatedAt

Notes

• Image upload functionality is not implemented (placeholders used)
• Swapping logic and pages are not implemented in this version
• The application uses placeholder images (📦 emoji) for items
• Dorm room information is only revealed when viewing item details (not implemented yet)