SJ Bay

Project Overview

SJ Bay is a full-stack e-commerce application with a React frontend and Node.js/Express.js backend, using Firebase for authentication and data storage and EmailJS for buyer and seller confirmation emails.

Features

• User authentication with SJSU email verification
• Product listings with images
• Shopping cart functionality
• Favorites
• Purchase history tracking
• Email notifications for buyers and sellers
• Responsive design for mobile and desktop
• Real-time database with Firebase

Architecture

Frontend (/frontend)

• React - UI framework with Create React App
• React Router DOM - Client-side routing
• Context API - State management (/contexts)
• Firebase SDK - Authentication and client-side operations
• CSS Modules - Component-scoped styling

Backend (/backend)

• Node.js/Express.js - REST API server
• Firebase Admin SDK - Server-side database operations
• Multer - File upload handling
• CORS - Cross-origin resource sharing

Database

• Firebase Firestore - NoSQL database
• Firebase Storage - Image/file storage
• Firebase Authentication - User management
• EmailJS - Transaction email service

Development Workflow

Daily Workflow

Step 1: Start Fresh Each Day

# Switch to main branch
git checkout main

# Get latest changes from remote
git pull origin main

# Switch to feature branch
git checkout feature-name

# Update branch with latest main
git merge main

- Getting Frontend Packages and Running

cd frontend
npm install
npm start  # Runs on http://localhost:3000

- Getting Backend Packages and Running

cd backend
npm install
npm run dev  # Runs on default port with nodemon

Step 2: Make Changes On Branch

# Add files with changes or new files
git add frontend/src/components/YourComponent.js
git add backend/src/routes/your-route.js
# Or add all changes
git add .

Step 3: Commit Changes

# Commit with message
git commit -m "feat: add search functionality with filters"

Step 4: Push Changes

# Push branch to remote
git push origin feature-name

Key Integration Points

Authentication Flow

1. User registers with SJSU email
2. Firebase sends verification email
3. User verifies email before posting products
4. JWT tokens manage session state

Email Notifications

• Buyer: Receives purchase confirmation with seller contact info
• Seller: Receives sale notification with buyer contact info
• Built with EmailJS templates and triggered on checkout

Project Conventions

1. Component Structure:
   • Separate routes for each feature (backend)
   • Component-specific CSS in frontend/src/styles/components
   • Page components in frontend/src/pages
2. State Management:
   • Global state via Context API
   • Custom hooks for data fetching and state logic
3. Authentication:
   • Email verification required
   • Firebase Auth for user management
4. Email Confirmations:
   • Using EmailJS API for sending confirmation emails
   • Buyer will get a confirmation email with the products they purchased and the contact information of the seller(s)
   • Seller will get a notification email saying one or more of their products has been purchased and the buyer's email

Common Tasks

• Adding new API endpoints: Create route in backend/src/routes
• New frontend features: Add component → Update context if needed → Add route
• File uploads: Use upload route with Multer middleware

Directory Guide

• frontend/src/components/: Reusable UI components
• frontend/src/contexts/: Global state management
• frontend/src/hooks/: Custom React hooks (used for local storage)
• frontend/src/services/: API and external service integration
• backend/src/routes/: API endpoints by feature (used for database storage)
• backend/src/config/: Server configuration

API Documentation

Authentication

• POST /api/users/register - Register new user
• POST /api/users/login - User login
• GET /api/users/verify - Check email verification

Products

• GET /api/listings - Get all products
• POST /api/listings - Create new product
• PUT /api/listings/:id - Update product
• DELETE /api/listings/:id - Delete product
• PATCH /api/listings/:id/status - Update product status

Cart & Purchases

• GET /api/cart/:userId - Get user's cart
• POST /api/cart - Add to cart
• DELETE /api/cart/:itemId - Remove from cart
• POST /api/purchases - Create purchase record
• GET /api/purchases/user/:userId - Get purchase history

Deployment

Deploying this project would work using Vercel for fronetend and Render for backend. Testing using these applications was successful, however at the moment the SJ-Bay is not deployed anymore due to how Render has a memory limit for the free version.

Frontend

Vercel

Pros:

• Free to use (base plan)
• Deploy using Github repository
• Updates website automatically with git pushes to git branch of choice (idealy main branch)

Cons:

• For the free version, only one user of the git repo is allowed to push changes to main for it to be automatically updated

Backend

Render

Pros:

• Free to use (base plan)
• Deploy using Github repository
• Updates website automatically with git pushes to git branch of choice (idealy main branch)

Cons:

• Limited to amount of memory usage per month
• If memory usage limit is surpassed, there will be a fee