Canadian Business Network: the website and membership platform of a business network in Saudi Arabia.

The problem

Canadian Business Network Saudi Arabia connects Canadian professionals and companies with business in the Kingdom. It runs on its members and its events: people join on one of its plans and pay for it, then come to networking evenings, business forums and talks. Every one of those steps needs someone on the team: a receipt to check, an account to open, an invoice to keep, a guest list to manage. And a member needs one place for their membership, their invoices and the events they are going to.

What we built

One platform for the network's public face and its membership, from choosing a plan to the next event, with each member's account and the team's admin in the same place.

• A website for the network. The network's story, mission and team, the chairperson's message, a programme offered to members and the ways to get involved, with a search across pages and events and a newsletter sign-up. The home page's photograph drifts and zooms slowly, and stays still for visitors who ask for less motion.
• Plans first. Every way to join leads to the plans, so nobody applies without choosing one. A signed-in member sees their current plan marked, with a way to renew it or move to another.
• Bank transfers the team checks. A payment by bank transfer waits for the team: they see the receipt beside the request and approve or reject it, and the membership starts or changes only then. Members upload the receipt as an image or a PDF.
• An account opened on approval. Approving an application opens the member's account and emails them a link to set a password. Members and the team use the same sign-in, with a way to reset a forgotten password.
• An invoice for every step. A new membership, a renewal, an upgrade or a downgrade each raises its own invoice. Members see theirs, paid, awaiting or rejected, and the team sees a ledger of who approved each one and when, with charts of revenue by month and by plan.
• Events and RSVPs. Upcoming and past events, each with its own page. A signed-in member RSVPs without typing their details, a guest gives theirs, and the team approves or rejects each RSVP. An event taken down is archived first, and can be brought back for thirty days.
• The member's own account. A photo and a short bio, the plan and the membership's details, invoices and receipts, the events they are going to, each with a way to cancel, and what is coming up next.
• One admin for the team. A dashboard of applications, events, RSVPs, newsletter subscribers and revenue. Applications in full, with the receipt, to approve, reject or correct. Events written in a rich text editor with their photo, the users, and a log of who did what.
• Ready for search engines. Structured data for the network and for every event, a sitemap that lists each published event, and the network's own image when a link to the site is shared.

How

The website, the members' account and the admin are one Next.js app on React, written in TypeScript and styled with Tailwind CSS. Pages are drawn on the server, and every form is checked again there before anything is saved. The data is in PostgreSQL through Prisma, mail goes out through Nodemailer, the admin's charts are drawn with Recharts and the home page's motion uses GSAP. Each change is linted, type-checked and built before it goes out. After the first version, the network's own team carried the platform further.

The result

Canadian Business Network Saudi Arabia has one site for its public face and its membership. A member chooses a plan, pays, and keeps their invoices and their events in one account, and the team approves payments, opens accounts and runs events from one admin.

Our role

Before the studio, our team led it: the first version of the website, the membership flow, the members' account and the admin.