The exclusive marketplace for Simon Fraser University students. Buy, sell, and trade with confidence within the SFU community.
StormHacks 2025: Built by Amraj Koonar, Amar Koonar, Ekam Dhanoa
- ** Secure Authentication**: JWT-based authentication with SFU email verification
- Marketplace Features:
- Browse listings with advanced filters
- Create, edit, and delete your own listings
- Category-based organization
- Real-time search functionality
- Node.js 18+ installed
- Supabase account with database configured
- npm or yarn package manager
Ensure your Supabase database has the following tables:
accounts table:
CREATE TABLE accounts (
user_id SERIAL PRIMARY KEY,
username VARCHAR(255) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
is_verified BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP DEFAULT NOW()
);posts table:
CREATE TABLE posts (
post_id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES accounts(user_id),
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT NOW(),
updated_at TIMESTAMP DEFAULT NOW()
);- Clone the repository:
git clone <repository-url>
cd Sfu-Market- Install dependencies:
npm install- Configure environment variables:
cp .env.example .env.localEdit .env.local and add your credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
NEXT_PUBLIC_JWT_SECRET=your_secret_key- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
Sfu-Market/
├── app/
│ ├── api/ # Backend API routes
│ │ ├── account/ # Account management endpoints
│ │ │ └── login/ # Login endpoint
│ │ └── posts/ # Posts CRUD endpoints
│ │ └── [id]/ # Update/delete specific post
│ ├── components/ # Reusable React components
│ │ ├── Navbar.js # Navigation bar
│ │ └── Footer.js # Footer component
│ ├── contact/ # Contact page
│ ├── dashboard/ # User dashboard
│ ├── login/ # Login/signup page
│ ├── page.js # Homepage/landing page
│ ├── layout.js # Root layout
│ └── globals.css # Global styles
├── lib/
│ ├── auth.js # JWT authentication utilities
│ ├── api.js # API helper functions
│ ├── edgeCrypo.js # Cryptography utilities
│ └── supabaseAdmin.js # Supabase admin client
└── public/ # Static assets
- Primary Red:
#CC0633- Main brand color - Dark Red:
#A6192E- Accent and hover states - Dark Grey:
#54585A- Supporting elements - Black:
#000000- Background and text
- Long-form landing page with multiple sections
- GSAP-powered scroll animations
- Feature highlights and statistics
- Call-to-action buttons
- Combined login and signup interface
- SFU email validation (@sfu.ca required)
- Backend integration with JWT token generation
- Smooth toggle animations
- Protected route (requires authentication)
- View all marketplace listings
- Create new listings with category selection
- Edit and delete your own listings
- Advanced filtering and search
- Contact sellers for purchases
- Support request form
- Contact information display
- FAQ section
- Accessible from all pages
- User signs up with SFU email
- Password is hashed using SHA-256
- JWT token is generated and stored in cookies
- Token is verified on protected routes
- User data is accessible throughout the app
- Framework: Next.js 15.5.4
- Database: Supabase (PostgreSQL)
- Authentication: JWT (jose)
- Animations: GSAP
- Styling: Tailwind CSS 4
- Cookie Management: js-cookie
POST /api/account- Create new accountPOST /api/account/login- Login with credentialsPATCH /api/account/[id]- Update accountDELETE /api/account/[id]- Delete account
GET /api/posts- Get all posts (with optional filters)POST /api/posts- Create new postPATCH /api/posts/[id]- Update postDELETE /api/posts/[id]- Delete post
- Push your code to GitHub
- Import project in Vercel
- Add environment variables in Vercel dashboard
- Deploy!
npm run build
npm startThis project is built for Simon Fraser University students.
For issues or questions, visit the Contact page or reach out to ask36@sfu.ca
Made with ❤️ for the SFU Community