A full-stack e-commerce platform built for the Brock Computer Science Club, featuring secure payments, automated fulfillment, and a modern React interface.
✨ Features • 🏗️ Architecture • 🚀 Quick Start • 📊 API • 🤝 Contributing
Welcome to the BrockCSC Merch Store — a comprehensive e-commerce solution designed specifically for Brock University's Computer Science Club. This platform enables students to purchase official club merchandise while demonstrating modern web development practices with a focus on security, scalability, and user experience.
Managing merchandise sales for a student organization requires:
- Secure payment processing for student transactions
- Automated order fulfillment and notifications
- Student verification and community engagement
- Scalable infrastructure that can handle peak demand
This full-stack application combines:
- Frontend: Modern React SPA with TypeScript and Tailwind CSS
- Backend: Serverless Cloudflare Workers with D1 database
- Payments: Stripe integration with webhook handling
- Email: Automated confirmations via MailerSend
- Deployment: Cloudflare Pages & Workers for global performance
- Seamless Ordering: Intuitive interface for hoodie purchases in multiple sizes and colors
- Secure Payments: PCI-compliant Stripe integration with real-time processing
- Student Verification: Brock student ID validation for exclusive access
- Instant Confirmations: Branded email notifications with order details
- Type-Safe Development: Full TypeScript implementation across stack
- Serverless Backend: Cloudflare Workers for instant scaling
- Database Integration: Cloudflare D1 (SQLite) for reliable data storage
- Email Automation: Templated confirmations with responsive design
- Global CDN: Cloudflare Pages for fast worldwide delivery
- Webhook Security: Signature verification and origin validation
- Error Handling: Comprehensive logging and graceful failures
- Development Tools: ESLint, Prettier, and testing utilities
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ React SPA │ │ Cloudflare │ │ Stripe API │
│ (Frontend) │◄──►│ Workers │◄──►│ (Payments) │
│ │ │ (Backend) │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Cloudflare D1 │ │ MailerSend │ │ Webhooks │
│ (Database) │ │ (Emails) │ │ (Events) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Frontend Application
// React Router with TypeScript
export default function Home() {
return <Welcome />; // Customizable landing page
}Payment Processing
// Stripe payment intent creation
const paymentIntent = await stripe.paymentIntents.create({
amount: 4500, // $45.00 CAD
currency: 'cad',
customer: customer.id,
metadata: { name, email, studentId, color, size },
});Database Operations
-- Order storage schema
CREATE TABLE orders (
id INTEGER PRIMARY KEY,
name TEXT, email TEXT, studentId INTEGER,
color TEXT, size TEXT, paymentId TEXT,
createdAt TEXT
);Email Templates
<!-- Responsive HTML email with BrockCSC branding -->
<div style="background: linear-gradient(135deg, #aa3b3b, #d45a5a);">
<h1>Brock CSC Merch Order Confirmation</h1>
</div>- Node.js 18+
- Cloudflare account
- Stripe account
- MailerSend account
# Clone the repository
git clone https://github.com/BrockCSC/merch.brockcsc.ca.git
cd merch.brockcsc.ca
# Install dependencies
npm install# Create Cloudflare Worker secrets
wrangler secret put PAYMENT_API_KEY
wrangler secret put MAIL_API_KEY
wrangler secret put WEBHOOK_SECRET# Start frontend dev server
npm run dev
# Deploy backend
cd cloudflare && wrangler deploy# Create D1 database
wrangler d1 create merch-db
# Run schema
wrangler d1 execute merch-db --file=cloudflare/schema.sqlCreates a Stripe payment intent for merchandise orders.
Request:
{
"name": "John Doe",
"studentId": 123456,
"email": "john@brocku.ca",
"color": "BLACK",
"size": "L"
}Response:
{
"success": true,
"clientSecret": "pi_xxx",
"paymentId": "pi_xxx",
"message": "Payment intent created"
}Handles payment confirmations and triggers order processing.
Headers:
Stripe-Signature: t=123456,v1=signature
Our system includes professionally designed email templates featuring:
- BrockCSC Branding: Official colors and logo integration
- Responsive Design: Mobile-optimized layouts
- Order Details: Complete purchase summary
- Social Links: Connect with the community
Professional email confirmation with BrockCSC branding, order details, and community links
- Origin Validation: CORS and referrer checks
- Webhook Verification: Stripe signature validation
- Environment Secrets: Secure key management
- Type Safety: TypeScript prevents runtime errors
- Global CDN: Cloudflare's worldwide network
- Serverless Scaling: Instant capacity adjustment
- Optimized Bundling: Vite for fast builds
- Efficient Queries: Prepared statements in D1
| Metric | Value |
|---|---|
| Deployment Time | < 2 minutes |
| Payment Success Rate | > 99% |
| Email Delivery | 100% |
| Uptime | 99.9% |
Based on production monitoring and user feedback
We welcome contributions from Brock CSC members! Areas for improvement:
- Frontend Enhancements: UI/UX improvements and new features
- Payment Methods: Additional payment processors
- Email Templates: Enhanced designs and personalization
- Testing: Comprehensive test coverage
- Documentation: API docs and user guides
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
Built for the Brock Computer Science Club. All rights reserved.
- Brock University for fostering innovation
- Cloudflare for serverless infrastructure
- Stripe for secure payment processing
- MailerSend for reliable email delivery
- React Team for the amazing framework
Brock Computer Science Club
- Website: brockcsc.ca
- Email: admin@brockcsc.ca
- Discord: discord.gg/qsctEK2
