Gallonnova - A Digitized Edmontonian Retail Brand

At Callibist, we specialize in turning visionary ideas into functioning digital realities. When Gallonnova, an Edmontonian apparel company known for its hyper-local streetwear and neighborhood-themed designs, approached us, they needed more than just an e-commerce app. They needed an end-to-end digital ecosystem — one that could showcase their unique apparel, manage payments, handle shipment logistics, calculate and distribute worker wages, and drive marketing automation.

In this post, we’ll take you behind the scenes on how we designed and implemented Gallonnova’s digital backbone using tools like Adalo, Square, WordPress, and custom-built software.

🧱 Tech Stack Overview

• Backend Language: Node.js (Express)

• Database: PostgreSQL

• Authentication: JSON Web Tokens (JWT)

• Frontend Dashboard: React.js (admin panel)

• Integrations: Square Webhooks, REST APIs

• Hosting: Railway + Supabase (Postgres)

📦 MODULE 1: Shipments and Delivery Management

📌 Objective:

Track all outgoing orders, update their shipping status, manage delivery zones, and enable real-time updates from warehouse to driver to customer.

🧰 Database Design:

CREATE TABLE orders (
  id SERIAL PRIMARY KEY,
  customer_name TEXT,
  address TEXT,
  delivery_zone TEXT,
  status TEXT DEFAULT 'Pending',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE shipments (
  id SERIAL PRIMARY KEY,
  order_id INT REFERENCES orders(id),
  driver_assigned TEXT,
  dispatched_at TIMESTAMP,
  delivered_at TIMESTAMP,
  notes TEXT
);

---

🚚 Core API Logic (Node.js + Express):

// Assign driver and dispatch order
app.post("/shipments/dispatch", async (req, res) => {
  const { orderId, driver } = req.body;
  await db.query(`
    INSERT INTO shipments (order_id, driver_assigned, dispatched_at)
    VALUES ($1, $2, NOW())
  `, [orderId, driver]);

  await db.query(`
    UPDATE orders SET status = 'Out for Delivery' WHERE id = $1
  `, [orderId]);

  res.send({ success: true });
});

🔄 Delivery Completion Endpoint:

app.post("/shipments/complete", async (req, res) => {
  const { orderId } = req.body;

  await db.query(`
    UPDATE shipments SET delivered_at = NOW() WHERE order_id = $1
  `, [orderId]);

  await db.query(`
    UPDATE orders SET status = 'Delivered' WHERE id = $1
  `, [orderId]);

  res.send({ message: "Delivery marked complete." });
});

💼 MODULE 2: Worker Wage Management

📌 Objective:

Track hours worked, roles, calculate wages, and generate biweekly reports for each employee.

🧰 Database Schema:

CREATE TABLE workers (
  id SERIAL PRIMARY KEY,
  name TEXT,
  role TEXT,
  hourly_rate NUMERIC
);

CREATE TABLE work_logs (
  id SERIAL PRIMARY KEY,
  worker_id INT REFERENCES workers(id),
  clock_in TIMESTAMP,
  clock_out TIMESTAMP
);

⏱ Clock In/Clock Out Logic:

app.post("/log/start", async (req, res) => {
  const { workerId } = req.body;
  await db.query(`
    INSERT INTO work_logs (worker_id, clock_in) VALUES ($1, NOW())
  `, [workerId]);
  res.send({ status: "Clock-in recorded." });
});

app.post("/log/end", async (req, res) => {
  const { logId } = req.body;
  await db.query(`
    UPDATE work_logs SET clock_out = NOW() WHERE id = $1
  `, [logId]);
  res.send({ status: "Clock-out recorded." });
});

💰 Wage Calculation (Biweekly Report):

app.get("/wages/:workerId", async (req, res) => {
  const { workerId } = req.params;
  const { rows } = await db.query(`
    SELECT SUM(EXTRACT(EPOCH FROM (clock_out - clock_in))/3600) as hours
    FROM work_logs
    WHERE worker_id = $1 AND clock_out IS NOT NULL
      AND clock_in > NOW() - INTERVAL '14 days'
  `, [workerId]);

  const hoursWorked = parseFloat(rows[0].hours || 0);
  const rate = await db.query(`SELECT hourly_rate FROM workers WHERE id = $1`, [workerId]);

  const totalWage = hoursWorked * parseFloat(rate.rows[0].hourly_rate);
  res.send({ hoursWorked, totalWage });
});

📁 CSV Export for Payroll

We used the json2csv library to export wage logs for each worker every 2 weeks and integrate them into Gallonnova’s bookkeeping process.

const { Parser } = require('json2csv');

app.get("/wages/export", async (req, res) => {
  const { rows } = await db.query(`
    SELECT w.name, w.role, wl.clock_in, wl.clock_out,
      EXTRACT(EPOCH FROM (clock_out - clock_in))/3600 AS hours
    FROM work_logs wl
    JOIN workers w ON wl.worker_id = w.id
    WHERE wl.clock_in > NOW() - INTERVAL '14 days'
  `);

  const parser = new Parser();
  const csv = parser.parse(rows);
  res.attachment('biweekly-wages.csv').send(csv);
});

---

🔐 Security & Access Control

• JWT-based login system for warehouse staff and delivery drivers

• Role-based permissions (admin, driver, staff)

• Data encrypted in transit via HTTPS (SSL enabled on Railway and Vercel)

---

📊 Admin Dashboard (React)

Admins at Gallonnova can view:

• Current pending deliveries

• Map of driver activity

• Live clock-in/clock-out board

• Download payroll reports

We used React, TailwindCSS, and Chart.js for visualizing delivery volumes and wage expenses.

---

🧵 Phase 1: A Showroom in Your Pocket — The Gallonnova App

Gallonnova’s brand thrives on local pride and street culture, and we wanted that to shine in their digital storefront.

🛠 Built With: Adalo

We used Adalo to create a mobile-first progressive web app (PWA) where users can:

• Browse collections (Retro, Alternative, Vintage, and Official)

• Filter by neighborhoods (e.g., South Jasper Place, Thorncliff)

• View detailed product pages with embedded media

• Add items to cart and complete checkout

We used custom lists, conditional logic, and API components in Adalo to allow for rich filtering by neighborhood, design theme, and size availability.

---

💳 Phase 2: Seamless Payments — Square Integration

To handle payments, we integrated Square APIs directly within the Adalo environment using custom actions and external collections.

Key Payment Features:

• Accepts credit/debit cards and Apple Pay/Google Pay

• Handles taxes and regional shipping rates

• Syncs orders with Gallonnova’s Square dashboard in real-time

The Square webhook system also allowed us to trigger backend automation (e.g., shipments and invoice generation) as soon as a purchase was made.

---

📦 Phase 3: Order Fulfillment and Shipment Management

While the customer-facing side was running on Adalo, we built a custom logistics and order management platform to handle the backend complexity of Gallonnova’s operation.

🖥 Custom-Built Platform (Developed by Callibist)

This standalone software — built using Node.js and PostgreSQL — included modules for:

• Order tracking: Labels, dispatch coordination, delivery zone tagging

• Warehouse management: Inventory location by collection and size

• Returns and exchanges: Rules for processing based on purchase date

We created a lightweight dashboard with worker login credentials so they could track and update each stage of the fulfillment process.

---

💼 Phase 4: Payroll and Worker Wage Management

Gallonnova employs a growing team of packaging, shipping, and support staff. To ensure timely and accurate wage calculations, we built a custom payroll module in the backend software.

Features:

• Hour-tracking and shift logging

• Role-based wage brackets

• Direct integration with Gallonnova’s business bank via CSV exports

• Bi-weekly payment schedule generator with CRA deductions

The payroll software also logs historical wage data for accounting and tax purposes.

---

📢 Phase 5: Website and Marketing Automation

To enhance Gallonnova’s brand visibility and drive inbound traffic, we developed a dynamic marketing website using WordPress with WooCommerce disabled (since orders are handled by the app).

WordPress Stack Included:

• Elementor for drag-and-drop editing

• Custom templates to showcase product stories, behind-the-scenes blogs, and sports-themed fantasy narratives

• Embedded app CTA and newsletter signup (integrated with Mailchimp)

Marketing Automations:

• Abandoned cart reminders via email

• Referral program tracking using UTM codes

• Analytics dashboard powered by Google Tag Manager and custom event tracking

---

🔗 Cross-Platform Synchronization

We ensured a consistent and secure data flow between all platforms using:

• APIs and Webhooks between Adalo, Square, and our custom software

• Cron jobs to update shipment and payroll status every 15 minutes

• Role-based access control (RBAC) for internal users

• Cloud backup to Google Workspace with daily exports

---

🚀 Impact & Results

Since deployment, Gallonnova has:

• Doubled its conversion rate on mobile thanks to the fast and intuitive PWA

• Reduced order processing time by 40%

• Automated 90% of wage-related administrative tasks

• Increased newsletter signup by 3x through integrated marketing funnels

---

🔧 Future Features

We’re working on:

• GPS tracking module for delivery drivers

• Real-time push notifications for customers

• Payroll direct-deposit integration via Interac

---

✅ Final Result

This backend system enabled Gallonnova to:

• Automate all payroll calculations and reduce HR admin time

• Track shipments in real-time, improving delivery efficiency by 35%

• Eliminate the need for expensive third-party tools like ShipStation or QuickBooks Payroll

---

🎯 Final Thoughts

Our work with Gallonnova represents the kind of holistic, custom-built digital solutions that Callibist is passionate about. We don’t just build apps — we build ecosystems that help small businesses grow smarter, scale faster, and connect deeply with their communities.

If you're an apparel company, publisher, health startup, or visionary with an idea, we're here to bring your platform to life — from the screen to the street.

Contact us at Callibist today.

🛠 Need a Backend Like This?

If your business needs to connect logistics, staff, and wages in one lean and powerful system — Callibist is ready to build it. Whether it’s custom APIs, low-code integrations, or full-stack apps, we deliver scalable, elegant solutions for your business needs.

Let’s build something together.