diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts index 3c00ae0..d06153c 100644 --- a/backend/src/controllers/products.ts +++ b/backend/src/controllers/products.ts @@ -16,11 +16,76 @@ const upload = multer({ }).array("images", 10); /** - * get all the products in database + * get all the products in database (keep filters, sorting in mind) */ export const getProducts = async (req: AuthenticatedRequest, res: Response) => { try { - const products = await ProductModel.find(); + const { sortBy, order, minPrice, maxPrice, condition, tags } = req.query; + + // object containing different filters we can apply + const filters: any = {}; + + // Check for filters and add them to object + if(minPrice || maxPrice) { + filters.price = {}; + if(minPrice) filters.price.$gte = Number(minPrice); + if(maxPrice) filters.price.$lte = Number(maxPrice); + } + + // Filter by specific condition + if(condition) { + filters.condition = condition; + } + + // Filter by category + if(tags) { + // Handle both single tag and multiple tags + let tagArray: string[]; + + if (Array.isArray(tags)) { + + // Already an array: ?tags=Electronics&tags=Furniture + tagArray = tags as string[]; + } else if (typeof tags === 'string') { + + // Single string, could be comma-separated: ?tags=Electronics,Furniture + tagArray = tags.includes(',') ? tags.split(',').map(t => t.trim()) : [tags]; + + } else { + tagArray = []; + } + + if (tagArray.length > 0) { + filters.tags = { $in: tagArray }; + } + } + + // sort object for different sorting options + const sortTypes: any = {} + + if(sortBy) { + const sortOrder = order === "asc" ? 1 : -1; + + switch(sortBy) { + case "price": + sortTypes.price = sortOrder; + break; + case "timeCreated": + sortTypes.timeCreated = sortOrder; + break; + case "condition": + sortTypes.condition = sortOrder; + break; + default: + // newest is default + sortTypes.timeCreated = -1; + } + } else { + // default sorting by newest + sortTypes.timeCreated = -1; + } + + const products = await ProductModel.find(filters).sort(sortTypes); res.status(200).json(products); } catch (error) { res.status(500).json({ message: "Error fetching products", error }); @@ -52,7 +117,63 @@ export const getProductById = async (req: AuthenticatedRequest, res: Response) = export const getProductsByName = async (req: AuthenticatedRequest, res: Response) => { try { const query = req.params.query; - const products = await ProductModel.find({ name: { $regex: query, $options: "i" } }); + const { sortBy, order, minPrice, maxPrice, condition, tags } = req.query; + + // Name is now a filter we can apply + const filters: any = { + name: { $regex: query, $options: "i" } + }; + + // price range + if (minPrice || maxPrice) { + filters.price = {}; + if (minPrice) filters.price.$gte = Number(minPrice); + if (maxPrice) filters.price.$lte = Number(maxPrice); + } + + // condition + if (condition) { + filters.condition = condition; + } + + // filter by category + if (tags) { + let tagArray: string[]; + + if (Array.isArray(tags)) { + tagArray = tags as string[]; + } else if (typeof tags === 'string') { + tagArray = tags.includes(',') ? tags.split(',').map(t => t.trim()) : [tags]; + } else { + tagArray = []; + } + + if (tagArray.length > 0) { + filters.tags = { $in: tagArray }; + } + } + + // Creates sorting options + const sortOptions: any = {}; + if (sortBy) { + const sortOrder = order === "asc" ? 1 : -1; + + switch (sortBy) { + case "price": + sortOptions.price = sortOrder; + break; + case "timeCreated": + sortOptions.timeCreated = sortOrder; + break; + default: + sortOptions.timeCreated = -1; + } + } else { + sortOptions.timeCreated = -1; + } + + const products = await ProductModel.find(filters).sort(sortOptions); + if (!products) { return res.status(404).json({ message: "Product not found" }); } @@ -63,19 +184,21 @@ export const getProductsByName = async (req: AuthenticatedRequest, res: Response }; /** - * add product to database thru name, price, description, and userEmail + * add product to database thru name, price, description, userEmail, and condition */ export const addProduct = [ upload, async (req: AuthenticatedRequest, res: Response) => { try { - const { name, price, description } = req.body; + const { name, price, description, category, condition } = req.body; if (!req.user) return res.status(404).json({ message: "User not found" }); const userId = req.user._id; const userEmail = req.user.userEmail; - if (!name || !price || !userEmail) { - return res.status(400).json({ message: "Name, price, and userEmail are required." }); + if (!name || !price || !userEmail || !condition) { + return res.status(400).json({ message: "Name, price, userEmail, and condition are required." }); } + + const tags = category ? [category] : []; const images: string[] = []; if (req.files && Array.isArray(req.files)) { @@ -101,6 +224,8 @@ export const addProduct = [ description, userEmail, images, + condition, + tags, timeCreated: new Date(), timeUpdated: new Date(), }); @@ -168,6 +293,12 @@ export const updateProductById = [ return res.status(400).json({ message: "User does not own this product" }); } + // handle tags input + let tags: string[] | undefined; + if (req.body.category) { + tags = [req.body.category]; + } + let existing = req.body.existingImages || []; if (!Array.isArray(existing)) existing = [existing]; @@ -183,15 +314,22 @@ export const updateProductById = [ const finalImages = [...existing, ...newUrls]; + const updateData: any = { + name: req.body.name, + price: req.body.price, + description: req.body.description, + condition: req.body.condition, + images: finalImages, + timeUpdated: new Date(), + }; + + if (tags) { + updateData.tags = tags; + } + const updatedProduct = await ProductModel.findByIdAndUpdate( id, - { - name: req.body.name, - price: req.body.price, - description: req.body.description, - images: finalImages, - timeUpdated: new Date(), - }, + updateData, { new: true }, ); diff --git a/backend/src/models/product.ts b/backend/src/models/product.ts index ca7386a..7ce1398 100644 --- a/backend/src/models/product.ts +++ b/backend/src/models/product.ts @@ -11,6 +11,7 @@ const productSchema = new Schema({ }, description: { type: String, + required: false, }, timeCreated: { type: Date, @@ -24,6 +25,16 @@ const productSchema = new Schema({ type: String, required: true, }, + tags: { + type: [String], + enum: ['Electronics', 'School Supplies', 'Dorm Essentials', 'Furniture', 'Clothes', 'Miscellaneous'], + required: false + }, + condition: { + type: String, + enum: ["New", "Like New", "Used", "For Parts"], + required: true, + }, images: [{ type: String }], }); diff --git a/backend/src/routes/product.ts b/backend/src/routes/product.ts index 581fb50..3945a82 100644 --- a/backend/src/routes/product.ts +++ b/backend/src/routes/product.ts @@ -11,8 +11,8 @@ import { authenticateUser } from "src/validators/authUserMiddleware"; const router = express.Router(); router.get("/", authenticateUser, getProducts); -router.get("/:id", authenticateUser, getProductById); router.get("/search/:query", authenticateUser, getProductsByName); +router.get("/:id", authenticateUser, getProductById); router.post("/", authenticateUser, addProduct); router.delete("/:id", authenticateUser, deleteProductById); router.patch("/:id", authenticateUser, updateProductById); diff --git a/frontend/.env.development b/frontend/.env.development deleted file mode 100644 index 3cd2602..0000000 --- a/frontend/.env.development +++ /dev/null @@ -1,3 +0,0 @@ -# Don't stop the React webpack build if there are lint errors. -ESLINT_NO_DEV_ERRORS=true -VITE_API_BASE_URL=http://localhost:5000 diff --git a/frontend/src/components/FilterSort.tsx b/frontend/src/components/FilterSort.tsx new file mode 100644 index 0000000..dd5fa69 --- /dev/null +++ b/frontend/src/components/FilterSort.tsx @@ -0,0 +1,220 @@ +import React, { useState } from 'react'; + +interface FilterBarProps { + filters: any; + setFilters: (filters: any) => void; +} + +const TAGS = [ + 'Electronics', + 'School Supplies', + 'Dorm Essentials', + 'Furniture', + 'Clothes', + 'Miscellaneous', +]; + +function Chevron({ open, className = '' }: { open: boolean; className?: string }) { + return ( + + + + ); +} + +export default function FilterBar({ filters, setFilters }: FilterBarProps) { + const [categoryOpen, setCategoryOpen] = useState(true); + const [filterOpen, setFilterOpen] = useState(true); + const [conditionOpen, setConditionOpen] = useState(false); + const [priceOpen, setPriceOpen] = useState(true); + + const handleTagToggle = (tag: string) => { + const currentTags = filters.tags || []; + const newTags = currentTags.includes(tag) + ? currentTags.filter((t: string) => t !== tag) + : [...currentTags, tag]; + setFilters({ ...filters, tags: newTags }); + }; + + const clearFilters = () => { + setFilters({ sortBy: 'timeCreated', order: 'desc', tags: [] }); + }; + + return ( +
+ + {/* ══ CATEGORY ══ */} +
+ + + {categoryOpen && ( +
+ {/* Continuous gold vertical spine */} +
+ + {TAGS.map((tag, i) => { + const active = filters.tags?.includes(tag); + const isLast = i === TAGS.length - 1; + return ( +
+ {/* Clip spine past midpoint of last row */} + {isLast && ( +
+ )} + +
+ ); + })} +
+ )} +
+ + {/* ══ FILTER ══ */} +
+ + + {filterOpen && ( +
+ + {/* border-l ends exactly at the midpoint of the Price Range row. + A 17px spacer inside the container represents the top half of + that row. Price Range button is then pulled up via -mt to overlap it. */} +
+ + {/* ── Condition ── */} +
+ + {conditionOpen && ( +
+ +
+ )} +
+ + {/* Top half of Price Range row height — spine ends here */} +
+ +
+ + {/* Price Range button — pulled up by 17px to sit over the spacer, + so its text visually aligns with where the branch meets the spine */} + + + {/* Price Range inputs */} + {priceOpen && ( +
+
+ + setFilters({ ...filters, minPrice: e.target.value ? Number(e.target.value) : undefined }) + } + /> + — + + setFilters({ ...filters, maxPrice: e.target.value ? Number(e.target.value) : undefined }) + } + /> +
+
+ )} + +
+ )} +
+ + {/* Clear Filters */} + +
+ ); +} \ No newline at end of file diff --git a/frontend/src/components/FilterSort_old.tsx b/frontend/src/components/FilterSort_old.tsx new file mode 100644 index 0000000..117ec48 --- /dev/null +++ b/frontend/src/components/FilterSort_old.tsx @@ -0,0 +1,232 @@ +import React, { useState } from 'react'; + +interface FilterBarProps { + filters: any; + setFilters: (filters: any) => void; +} + +const TAGS = [ + 'Electronics', + 'School Supplies', + 'Dorm Essentials', + 'Furniture', + 'Clothes', + 'Miscellaneous', +]; + +function Chevron({ open }: { open: boolean }) { + return ( + + + + ); +} + +function TreeItem({ + label, + isLast, + active, + onClick, + right, +}: { + label: string; + isLast?: boolean; + active?: boolean; + onClick: () => void; + right?: React.ReactNode; +}) { + return ( +
+ {/* Vertical gold spine — clips at midpoint for last item */} +
+ +
+ ); +} + +export default function FilterBar({ filters, setFilters }: FilterBarProps) { + const [categoryOpen, setCategoryOpen] = useState(true); + const [filterOpen, setFilterOpen] = useState(true); + const [conditionOpen, setConditionOpen] = useState(false); + const [priceOpen, setPriceOpen] = useState(false); + + const handleTagToggle = (tag: string) => { + const currentTags = filters.tags || []; + const newTags = currentTags.includes(tag) + ? currentTags.filter((t: string) => t !== tag) + : [...currentTags, tag]; + setFilters({ ...filters, tags: newTags }); + }; + + const clearFilters = () => { + setFilters({ sortBy: 'timeCreated', order: 'desc', tags: [] }); + }; + + const sectionHeaderClass = + 'flex items-center gap-2 w-full py-2 hover:opacity-80 transition-opacity'; + const iconBoxClass = + 'flex items-center justify-center w-5 h-5 rounded border border-ucsd-blue text-ucsd-blue shrink-0'; + + return ( +
+ + {/* ══ CATEGORY ══ */} + + + {categoryOpen && ( +
+ {TAGS.map((tag, i) => ( + handleTagToggle(tag)} + /> + ))} +
+ )} + + {/* ══ FILTER ══ */} + + + {filterOpen && ( +
+ + {/* Condition */} + setConditionOpen((o) => !o)} + right={} + /> + {conditionOpen && ( +
+ +
+ )} + + {/* Price Range */} + setPriceOpen((o) => !o)} + right={} + /> + {priceOpen && ( +
+ + {/* Row for Min / Max */} +
+ + setFilters({ + ...filters, + minPrice: e.target.value ? Number(e.target.value) : undefined, + }) + } + /> + — + + setFilters({ + ...filters, + maxPrice: e.target.value ? Number(e.target.value) : undefined, + }) + } + /> +
+ +
+ )} + + +
+ )} + + {/* Clear Filters */} + +
+ ); +} + diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index b35b3c6..0167fd1 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,6 +1,6 @@ -import { faBars, faCartShopping, faUser, faXmark, faHeart } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useContext, useEffect, useRef, useState } from "react"; +import { faBars, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FirebaseContext } from "src/utils/FirebaseProvider"; export function Navbar() { @@ -9,9 +9,7 @@ export function Navbar() { const menuRef = useRef(null); const buttonRef = useRef(null); - const toggleMobileMenu = () => { - setMobileMenuOpen(!isMobileMenuOpen); - }; + const toggleMobileMenu = () => setMobileMenuOpen((o) => !o); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -24,141 +22,192 @@ export function Navbar() { setMobileMenuOpen(false); } }; - const handleResize = () => { - if (window.matchMedia("(min-width: 768px)").matches) { - setMobileMenuOpen(false); - } + if (window.matchMedia("(min-width: 768px)").matches) setMobileMenuOpen(false); }; - document.addEventListener("mousedown", handleClickOutside); window.addEventListener("resize", handleResize); - return () => { document.removeEventListener("mousedown", handleClickOutside); window.removeEventListener("resize", handleResize); }; }, []); + // Shared circular icon button style + const iconBtn = + "w-9 h-9 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:text-ucsd-blue hover:border-ucsd-blue transition"; + return ( <> -
+ {/* Images */} +
+ +

Upload up to 10 photos

+ + {newPreviews.length > 0 && ( +
+
+ {newPreviews.map((src, idx) => ( +
+ + +
+ ))} +
+
+ )} + + +
{/* Name */}
- {/* Images */} + {/* Year */}
-
- {newPreviews.length > 0 && ( -
-
- {newPreviews.map((src, idx) => ( -
- - -
- ))} -
-
- )} + {/* Category */} +
+ + +
- + +
+
+ {/* Images */} +
+ +

Upload up to 10 photos

+ + {(newPreviews.length > 0 || existingImages.length > 0) && ( +
+ {existingImages.map((url) => ( +
+ + +
+ ))} + + {newPreviews.map((src, idx) => ( +
+ + +
+ ))} +
+ )} + + +
+
-
- {(newPreviews.length > 0 || existingImages.length > 0) && ( -
- {existingImages.map((url) => ( -
- - -
- ))} - - {newPreviews.map((src, idx) => ( -
- - -
- ))} -
- )} +
+ + +
- + +
@@ -257,4 +376,4 @@ export function EditProduct() { ); -} +} \ No newline at end of file diff --git a/frontend/src/pages/Individual-product-page.tsx b/frontend/src/pages/Individual-product-page.tsx index a54eb83..a36e59d 100644 --- a/frontend/src/pages/Individual-product-page.tsx +++ b/frontend/src/pages/Individual-product-page.tsx @@ -20,6 +20,7 @@ export function IndividualProductPage() { images: string[]; userEmail: string; description: string; + tags: string[]; }>(); const [error, setError] = useState(); const [hasPermissions, setHasPermissions] = useState(false); @@ -244,6 +245,18 @@ export function IndividualProductPage() {

)} + {product?.tags && ( +
+ {product.tags.map((tag) => ( +
+ {tag} +
+ ))} +
+ )} {!hasPermissions && (
setIsHovered(true)} diff --git a/frontend/src/pages/Marketplace.tsx b/frontend/src/pages/Marketplace.tsx index a80effd..c385c94 100644 --- a/frontend/src/pages/Marketplace.tsx +++ b/frontend/src/pages/Marketplace.tsx @@ -1,11 +1,23 @@ import { useState, useEffect, useContext } from "react"; import { Helmet } from "react-helmet-async"; +import { useNavigate } from "react-router-dom"; import Product from "src/components/Product"; import SearchBar from "src/components/SearchBar"; +import FilterSort from "src/components/FilterSort"; import { FirebaseContext } from "src/utils/FirebaseProvider"; import { get, post } from "src/api/requests"; +interface FilterState { + minPrice?: number; + maxPrice?: number; + condition?: "New" | "Used" | ""; + tags?: string[]; + sortBy?: "price" | "timeCreated"; + order?: "asc" | "desc"; +} + export function Marketplace() { + const navigate = useNavigate(); const [products, setProducts] = useState< Array<{ _id: string; @@ -15,6 +27,13 @@ export function Marketplace() { }> >([]); const [error, setError] = useState(""); + const [searchQuery, setSearchQuery] = useState(""); + const [filters, setFilters] = useState({ + sortBy: "timeCreated", + order: "desc", + tags: [], + }); + const { user } = useContext(FirebaseContext); const [savedProducts, setSavedProducts] = useState([]); @@ -44,50 +63,155 @@ export function Marketplace() { } }; - useEffect(() => { - fetchSavedProducts(); - }, [user]); + const fetchProducts = async () => { + try { + setError(""); + + const params = new URLSearchParams(); + if (filters.minPrice) params.append("minPrice", filters.minPrice.toString()); + if (filters.maxPrice) params.append("maxPrice", filters.maxPrice.toString()); + if (filters.condition) params.append("condition", filters.condition); + if (filters.tags && filters.tags.length > 0) { + filters.tags.forEach((tag) => params.append("tags", tag)); + } + if (filters.sortBy) params.append("sortBy", filters.sortBy); + if (filters.order) params.append("order", filters.order); + + const queryString = params.toString(); + + if (searchQuery && searchQuery.trim().length > 0) { + const res = await get( + `/api/products/search/${searchQuery}${queryString ? `?${queryString}` : ""}` + ); + if (res.ok) { + setProducts(await res.json()); + } else { + setError("Unable to search products. Try again later."); + } + return; + } + + const res = await get(`/api/products${queryString ? `?${queryString}` : ""}`); + if (res.ok) { + setProducts(await res.json()); + } else { + setError("Unable to display products. Try again later."); + } + } catch (err) { + setError("Unable to display products. Try again later."); + console.error(err); + } + }; + + useEffect(() => { fetchProducts(); }, [filters, searchQuery]); + useEffect(() => { fetchSavedProducts(); }, [user]); return ( <> - Low-Price Center Marketplace + Low-Price Center -
-
-
-

Marketplace

- -
- - {error &&

{error}

} - {!error && products?.length === 0 && ( -

No products available

- )} -
- {products.map((product) => ( -
- + +
+ UCSD Campus +
+ + {/* ── White card ── */} +
+
+
+ +
+ +
+ Low + Price Center +
+ + {/* Search bar + sort stacked on the right */} +
+ {/* Search bar */} +
+ +
+ + {/* Sort row — right-aligned, underneath search */} +
+ Sort: + + + +
- ))} +
+ + {/* Thin gold divider under the top banner */} +
+ +
+ + {/* LEFT SIDEBAR — fixed width, gold right border */} +
+ +
+ + {/* RIGHT: Product grid */} +
+ {error && ( +

{error}

+ )} + {!error && products?.length === 0 && ( +

No products available

+ )} + +
+ {products.map((product) => ( + + ))} +
+
+ +
+
); -} +} \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 1247a45..1d48fea 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -9,9 +9,13 @@ export default { xxl: "1300px", }, colors: { - "ucsd-blue": "#00629B", + // Figma mockup uses different blue + // "ucsd-blue": "#00629B", + "ucsd-blue": "#0E7395", "ucsd-darkblue": "#182B49", - "ucsd-gold": "#FFCD00", + // Figma mockup uses different gold + // "ucsd-gold": "#FFCD00", + "ucsd-gold": "#F6AE2D", }, fontFamily: { jetbrains: ["JetBrains Mono", "monospace"],