Student Exchange Platform

Abstract

The Student Exchange Platform is a web-based application designed to facilitate the exchange of goods and communication among students within a secure and user-friendly environment. The platform enables students to create accounts, manage their profiles, post and browse listings, and interact through a built-in messaging system. With features like profile picture management (including cropping and default avatars), responsive design, and real-time notifications, the platform aims to streamline student-to-student interactions and foster a trusted community for sharing resources.

A modern web application for students to exchange goods, communicate, and manage their profiles. Built with React and a Node.js/Express backend.

Features

• User authentication (login, signup, JWT-based)
• Profile management with avatar upload, crop, and removal (default SVG avatar fallback)
• Browse and post listings
• Messaging system with unread message count
• Responsive design with modern UI components
• Footer and navbar with consistent branding

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn
• Backend server (Node.js/Express, see below)

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd project2

2. Install dependencies:

   npm install
   # or
   yarn install

3. Configure environment variables:

   • If needed, create a .env file in the root directory for custom environment variables (e.g., backend API URL).

4. Start the development server:

   npm start
   # or
   yarn start

   The app will run at http://localhost:3000 by default.

Available Commands

• npm start / yarn start — Start the development server
• npm run build / yarn build — Build the app for production
• npm run lint / yarn lint — Lint the codebase
• npm run test / yarn test — Run tests (if available)

Folder Structure

project2/
├── public/                # Static assets
├── src/
│   ├── components/        # Reusable UI components (Footer, Layout, Navbar, etc.)
│   ├── pages/             # Page components (Login, Register, Profile, Browse, etc.)
│   ├── contexts/          # React context providers (AuthContext, DataContext)
│   ├── hooks/             # Custom React hooks
│   ├── App.jsx            # Main app component
│   └── index.js           # Entry point
├── package.json           # Project metadata and scripts
├── README.md              # Project documentation
└── ...

Database Information

The backend is designed to work with a document-based database such as MongoDB.

Default local connection string:

mongodb://localhost:27017/userdb

Below is a typical schema structure:

Users Collection

• username (String, unique): User's login name
• passwordHash (String): Hashed password
• name (String): Full name
• bio (String): User bio
• avatar (String): Path or URL to profile picture
• createdAt (Date)

Listings Collection

• title (String): Listing title
• description (String): Details about the item
• owner (String/ObjectId): Reference to user
• images (Array of Strings): Image URLs/paths
• createdAt (Date)
• status (String): e.g., available, exchanged

Messages/Conversations Collection

• participants (Array of Strings/ObjectIds): User references
• messages (Array of Objects):
  • sender (String/ObjectId)
  • content (String)
  • timestamp (Date)
  • read (Boolean)
• unreadCount (Number)

Note: Adjust field names/types as needed for your backend implementation (e.g., PostgreSQL, MySQL, etc.).

Backend Setup

• The frontend expects a backend running at http://localhost:4000 by default.
• Endpoints include /login, /signup, /profile/:username, /conversations/:username, etc.
• For avatar removal, the frontend sends a POST to /profile/:username with removeAvatar=true in the form data.
• Ensure CORS is enabled on the backend for local development.

Customization

• To change the backend API URL, update the fetch URLs in the React code or use an environment variable if supported.
• The default avatar is an inline SVG; you can replace it in Profile.jsx and Layout.jsx if desired.

Contribution

Pull requests and issues are welcome! Please follow standard code style and include clear commit messages.

Support

For questions or issues, please open an issue in the repository or contact the maintainer.

---

© 2025 Student Exchange. All rights reserved.