Skip to content

gopinathsjsu/cmpe202-02-team-project-ctrl-alt-react

Repository files navigation

Campus Marketplace

Project Overview

Campus Marketplace is a web application designed exclusively for SJSU students to buy and sell textbooks, gadgets, and other essentials within the campus community. Similar to Facebook Marketplace but tailored for university use, this platform ensures a safe and convenient trading environment for students.

Team Information

  • Course: CMPE 202
  • University: San Jose State University
  • Project Deadline: December 4, 2025
  • Team Members: Samved Sandeep Joshi, Prathamesh Ravindra Sawant, Dhruv Verma

Tech Stack

Frontend

  • React.js - UI framework
  • React Router - Client-side routing
  • Axios - HTTP client for API calls
  • TailwindCSS - Utility-first CSS framework
  • Socket.io Client - Real-time chat functionality

Backend

  • Node.js - Runtime environment
  • Express.js - Web application framework
  • MongoDB - NoSQL database
  • Mongoose - MongoDB ODM
  • Socket.io - Real-time bidirectional communication
  • JWT - Authentication tokens
  • Bcrypt - Password hashing
  • Multer - File upload handling
  • Nodemailer - Email verification

External APIs

  • Google Gemini API - Natural language search functionality

Deployment

  • AWS EC2 - Auto-scaled cluster
  • AWS Load Balancer - Traffic distribution
  • AWS S3 - Image storage (future implementation)
  • MongoDB Atlas - Cloud database (or self-hosted on EC2)

Project Structure

campus-marketplace/
├── backend/
│   ├── src/
│   │   ├── config/          # Configuration files (database, Gemini AI)
│   │   │   ├── database.js
│   │   │   └── geminiConfig.js
│   │   ├── models/          # Mongoose schemas (User, Listing, Category, Chat, Message, Report)
│   │   │   ├── User.js
│   │   │   ├── Listing.js
│   │   │   ├── Category.js
│   │   │   ├── Chat.js
│   │   │   ├── Message.js
│   │   │   └── Report.js
│   │   ├── routes/          # API route definitions
│   │   │   ├── auth.js
│   │   │   ├── listings.js
│   │   │   ├── categories.js
│   │   │   ├── search.js
│   │   │   ├── chats.js
│   │   │   ├── reports.js
│   │   │   └── admin.js
│   │   ├── controllers/     # Business logic for routes
│   │   │   ├── authController.js
│   │   │   ├── listingController.js
│   │   │   ├── categoryController.js
│   │   │   ├── searchController.js
│   │   │   ├── chatController.js
│   │   │   ├── reportController.js
│   │   │   └── adminController.js
│   │   ├── middleware/      # Authentication, validation, error handling
│   │   │   ├── auth.js
│   │   │   └── errorHandler.js
│   │   ├── utils/           # Helper functions (email, file upload, seeding)
│   │   │   ├── email.js
│   │   │   ├── fileUpload.js
│   │   │   └── seed.js
│   │   └── server.js        # Main server entry point
│   ├── uploads/             # Local storage for listing images
│   ├── .env.example         # Environment variables template
│   ├── .env                 # Actual environment variables (not in git)
│   ├── Dockerfile           # Docker configuration for backend
│   ├── docker-compose.yml   # Docker compose for development
│   └── package.json         # Backend dependencies
│
├── frontend/
│   ├── src/
│   │   ├── components/      # Reusable React components
│   │   │   ├── common/      # Navigation, ProtectedRoute
│   │   │   ├── listings/    # ListingCard, ReportButton
│   │   │   └── admin/       # AdminLayout
│   │   ├── pages/           # Page components
│   │   │   ├── auth/        # Login, Register, VerifyEmail
│   │   │   ├── listings/    # CreateListing, MyListings, ListingDetails
│   │   │   ├── chat/        # ChatList, ChatConversation, CreateChat
│   │   │   ├── admin/       # AdminDashboard, UserManagement, ListingManagement, ReportManagement
│   │   │   ├── reports/     # MyReports
│   │   │   └── Home.js      # Main browse/search page
│   │   ├── services/        # API service functions
│   │   │   ├── authService.js
│   │   │   ├── listingService.js
│   │   │   ├── categoryService.js
│   │   │   ├── searchService.js
│   │   │   ├── chatService.js
│   │   │   ├── reportService.js
│   │   │   └── adminService.js
│   │   ├── context/         # React Context for state management
│   │   │   └── AuthContext.js
│   │   ├── App.js           # Main App component with routing
│   │   └── index.js         # Entry point
│   ├── public/              # Static assets
│   ├── .env.example         # Frontend environment variables template
│   ├── .env                 # Actual frontend environment variables
│   └── package.json         # Frontend dependencies
│
├── diagrams/                # UML diagrams for documentation
│   ├── class-diagram.png    # Database schema with models, attributes, and relationships
│   ├── component-diagram.png # System architecture and component interactions
│   └── deployment-diagram.png # Docker deployment configuration
│
├── Project_journal.md/      # Project documentation and tracking
│   ├── Scrum reports/       # Weekly scrum reports
│   │   ├── Week1_Scrum_Report_and_Sprint1_Backlog.md
│   │   ├── Week2_Scrum_Report (1).md
│   │   ├── Week3_Scrum_Report.md
│   │   ├── Week4_Scrum_Report.md
│   │   ├── Week5_Scrum_Report_full.md
│   │   ├── Week6_Scrum_Report_full.md
│   │   ├── Week7_Scrum_Report_full.md
│   │   ├── Week8_Scrum_Report_full.md
│   │   ├── Week9_Scrum_Report_full.md
│   │   ├── Week10_Scrum_Report_full.md
│   │   ├── Week11_Scrum_Report_full.md
│   │   └── Week12_Scrum_Report_full.md
│   └── Sprint/              # Sprint reports and burndown charts
│       ├── Sprint1_Report_with_StoryPoints.md
│       ├── sprint_1_burndown.png
│       ├── Sprint2_Report_with_StoryPoints.md
│       ├── sprint_2_burndown.png
│       ├── Sprint3_Report_full.md
│       ├── sprint_3_burndown.png
│       ├── Sprint4_Report_full.md
│       ├── sprint_4_burndown.png
│       ├── Sprint5_Report_full.md
│       ├── sprint_5_burndown.png
│       ├── Sprint6_Report_full.md
│       └── sprint_6_burndown.png
│
├── README.md                # This file
└── .gitignore              # Git ignore rules

Features

Core Functionality

  1. User Authentication

    • Registration with SJSU email (@sjsu.edu)
    • Email verification via link
    • JWT-based authentication
    • Role-based access control (Student, Admin)
  2. Listing Management

    • Create listings with photos (max 3)
    • Edit and delete own listings
    • Mark items as sold
    • Browse all active listings
    • View listing details
  3. Search & Filter

    • Search by keywords (title/description)
    • Filter by category, price range, condition
    • Sort by newest, price (low to high, high to low)
    • Natural Language Search powered by Google Gemini API
      • Example: "Do you have a textbook for CMPE 202?"
  4. Real-time Chat

    • Buyer-seller communication per listing
    • Persistent chat history
    • Unread message count
    • Socket.io for real-time messaging
  5. Admin Moderation

    • Separate admin registration portal
    • View all listings and users
    • Delete inappropriate listings
    • Delete user accounts
    • Manage categories (add/edit/delete)

Listing Details

  • Title
  • Description
  • Price
  • Category (Textbooks, Electronics, Furniture, Clothing, Miscellaneous)
  • Condition (New, Used, Like New)
  • Photos (up to 3)
  • Seller information
  • Status (Active, Sold, Deleted)

User Roles & Permissions

Student (Buyer/Seller)

  • Register and verify account with @sjsu.edu email
  • Create, edit, and delete own listings
  • Search and browse all listings
  • Contact sellers via real-time chat
  • Mark own items as sold
  • View chat history

Admin

  • Separate registration portal
  • View all users and listings
  • Delete any listing
  • Delete user accounts
  • Manage product categories
  • Access admin dashboard with statistics

Database Schema

Collections

  1. Users

    • Email, password, role, verification status, profile info
  2. Listings

    • Title, description, price, category, condition, photos, seller, status
  3. Categories

    • Name, description, created by admin
  4. Chats

    • Listing reference, buyer, seller, messages array
  5. Messages

    • Chat reference, sender, content, timestamp, read status

Detailed schema definitions will be added in the implementation phase.

API Endpoints

Authentication

  • POST /api/auth/register - Register new user
  • POST /api/auth/login - Login user
  • GET /api/auth/verify-email/:token - Verify email
  • POST /api/auth/resend-verification - Resend verification email

Listings

  • POST /api/listings - Create listing
  • GET /api/listings - Get all active listings (with filters)
  • GET /api/listings/:id - Get single listing
  • PUT /api/listings/:id - Update listing
  • DELETE /api/listings/:id - Delete listing
  • PATCH /api/listings/:id/mark-sold - Mark as sold

Search

  • GET /api/search - Basic keyword search with filters
  • POST /api/search/nl - Natural language search using Gemini

Chat

  • GET /api/chats - Get user's all chats
  • GET /api/chats/:listingId - Get chat for specific listing
  • POST /api/chats/:listingId/messages - Send message
  • Socket.io events for real-time messaging

Admin

  • POST /api/admin/register - Admin registration (protected)
  • GET /api/admin/users - Get all users
  • DELETE /api/admin/users/:id - Delete user
  • GET /api/admin/listings - Get all listings
  • DELETE /api/admin/listings/:id - Delete listing
  • POST /api/admin/categories - Create category
  • PUT /api/admin/categories/:id - Update category
  • DELETE /api/admin/categories/:id - Delete category

Detailed API documentation with request/response examples will be available in /docs/api-documentation.md

Setup Instructions

Prerequisites

  • Node.js (v18 or higher)
  • MongoDB (local or Atlas)
  • npm or yarn
  • AWS Account (for deployment)
  • Google Gemini API Key

Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create .env file from .env.example
cp .env.example .env

# Update .env with your credentials

# Start development server
npm run dev

Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Create .env file from .env.example
cp .env.example .env

# Update .env with backend API URL

# Start development server
npm start

Environment Variables

Backend (.env)

  • PORT - Server port
  • MONGODB_URI - MongoDB connection string
  • JWT_SECRET - Secret key for JWT tokens
  • JWT_EXPIRE - Token expiration time
  • EMAIL_HOST - SMTP host
  • EMAIL_PORT - SMTP port
  • EMAIL_USER - Email username
  • EMAIL_PASSWORD - Email password
  • EMAIL_FROM - Sender email address
  • CLIENT_URL - Frontend URL for verification links
  • GEMINI_API_KEY - Google Gemini API key

Frontend (.env)

  • REACT_APP_API_URL - Backend API base URL
  • REACT_APP_SOCKET_URL - Socket.io server URL

Development Workflow

  1. Phase 1: Project setup and database schema design
  2. Phase 2: Backend API development (authentication, listings, search)
  3. Phase 3: Frontend development (pages and components)
  4. Phase 4: Real-time chat implementation
  5. Phase 5: Natural language search integration
  6. Phase 6: Admin dashboard
  7. Phase 7: Testing and bug fixes
  8. Phase 8: Documentation (wireframes, diagrams)
  9. Phase 9: AWS deployment

Deployment Architecture

AWS Infrastructure

  • EC2 Instances: Auto-scaled cluster running Node.js application
  • Load Balancer: Distributes traffic across EC2 instances
  • Auto Scaling Group: Automatically scales based on demand
  • S3: Storage for listing images
  • MongoDB Atlas or EC2-hosted MongoDB: Database
  • Route 53: DNS management (optional)

Detailed deployment diagram will be available in /docs/diagrams/

Documentation

Wireframes

  • Login/Registration screens
  • Create Listing form
  • Listing Details page
  • Search Results page
  • Admin Dashboard

Wireframes will be available in /docs/wireframes/

Diagrams

  • Component Architecture Diagram
  • Deployment Diagram
  • Database ER Diagram

Diagrams will be available in /docs/diagrams/

Git Workflow

# Clone repository
git clone <repository-url>

# Create feature branch
git checkout -b feature/feature-name

# Make changes and commit
git add .
git commit -m "Description of changes"

# Push to remote
git push origin feature/feature-name

# Create pull request for review

Testing

Backend Testing

  • API endpoint testing with Postman/Thunder Client
  • Unit tests for controllers and utilities
  • Integration tests for API routes

Frontend Testing

  • Component testing
  • End-to-end testing for user flows

Future Enhancements

  • Push notifications for new messages
  • Rating and review system for sellers
  • Wishlist functionality
  • Advanced analytics for admin
  • Mobile application (React Native)
  • Payment integration

Project Timeline

  • Start Date: September 8, 2025
  • End Date: Decemebr 4, 2025

License

This is an academic project for CMPE 202 at San Jose State University.

Support

For questions or issues, please contact the team members or create an issue in the GitHub repository.


About

cmpe202-02-team-project-ctrl-alt-react created by GitHub Classroom

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages