E-commerce Website

OrbitTech E-commerce Platform

A full-stack e-commerce website built from scratch for a student-run business selling 3D-printed fidget keyrings, featuring a custom storefront and secure payment integration.

Role

Lead Technical Developer

Environment

Web & Self-Hosted VPS

Tech Stack

HTML/CSS/JSPythonStripe APIPocketBaseVPS HostingDiscord Webhooks

Gallery

The Challenge

As part of The Young Enterprise Scotland Company Programme, the team needed a customized way to showcase their 3D-printed products and process secure online purchases without relying on the constraints of third-party selling platforms:

Core Operational Friction:

  • Lack of an independent online storefront to showcase unique product designs and dynamic color variants.
  • Need for a secure, professional checkout and payment processing system.
  • Required a centralized, easy-to-use system for teammates to view sales and be notified of new orders instantly.

The Solution

I developed a custom full-stack e-commerce website from scratch. The frontend, built with HTML, CSS, and JavaScript, allowed customers to browse multiple keyring designs, select colors, and manage a shopping cart.

To handle the business logic, I deployed PocketBase on a self-managed VPS to track product and order data, while connecting a Python backend to handle dynamic Stripe payment intents. This ensured a smooth checkout experience and provided the team with an accessible web UI for monitoring sales.


System Architecture

How the custom storefront handles orders, payments, and data management.

01 Frontend Storefront & Cart Management

The client-side UI provides an interactive shopping experience. Customers can view designs, select specific product colors, and manage their selections using a custom-built local cart functionality before proceeding to checkout.

02 Python Backend & Stripe Integration

The backend bridges the storefront with Stripe's API. When a user checks out, the system generates dynamic payment intents and automatically redirects them to a secure Stripe gateway to seamlessly complete their purchase.

03 Database & Real-time Notifications

A self-hosted PocketBase instance running on a VPS acts as the central database, managing all product and order information with a clean UI for teammates. Upon a successful sale, a Discord webhook triggers, instantly pinging the team with order details in real-time.


Technical Hurdles

Reflections & Future Evolutions: While the vanilla tech stack and PocketBase backend successfully solved the immediate business needs for the programme, revisiting the project with my current skill set opens up powerful modernization opportunities.

If building this today, I would transition the frontend to a modern framework like Svelte paired with Tailwind CSS and shadcn/ui to significantly accelerate development and enhance the visual polish. I would also upgrade the checkout process by implementing an in-house flow using Stripe Elements, removing the need for external redirects.

For backend management, migrating to Supabase would introduce robust user authentication and secure data storage. This infrastructure would pave the way for advanced features, such as an integrated customer loyalty system and automated UUID-based order confirmation emails via Brevo for live tracking.



Impact & Results

Independent Sales

Successfully bypassed third-party platforms with a self-hosted, secure e-commerce solution.

Automated Alerts

Kept the team instantly informed of incoming revenue through a real-time Discord webhook integration.

Centralized Management

Provided non-technical teammates with an easy-to-use PocketBase UI to securely view and manage sales data.


Skills Gained & Applied

Full-Stack Development Built an end-to-end e-commerce platform bridging a vanilla JavaScript frontend with a Python backend.
Payment Processing Implemented secure Stripe API checkout flows utilizing dynamic payment intents.
Server Management Deployed and configured PocketBase on a Virtual Private Server (VPS) for autonomous data handling.
API & Webhook Integration Connected webhooks and payment gateways to synchronize storefront actions with external team notification systems.