Blissify

Blissify is a multi-tenant saas wedding planning tool launching in the summer of 2024 to manage guests and other requirements of wedding planning. It features a broad range of features, from task management and budget planning to hosted websites and email managers. At completion, users will be able to register on the main website (blissify-app.com), and begin to manage their wedding at app.blissify-app.com. Each user will have a website generated for them at a unique subdomain ({user}.blissify-app.com) and have the ability to point a domain to their website. 

Additionally planned for release is a native IOS and Android app for guests to share photos from the ceremony/reception with the bride/groom in real time.

The Davis Media Company

Created tools with python to validate, format, combine, and prepare data for print directories. Created tools to parse WordPress databases in .json format and convert relationships into new database formats or schemas. Created tools

GAME ON

GAME ON is a sports media brand based out of Winnipeg, Manitoba. At the time of building, GAME ON was interested in a national expansion while maintaining a regional brand feel. The previous WordPress website was moved into a bespoke CMS, written in JavaScript with Next.js, to improve performance and better facilitate the national roll out. The CMS heavily relies on SSR for it's categories and over 5k posts and currently manages over 3k registered users and more than 40k page views per month. This includes auto generated weekly newsletters generated through CRON jobs and sent through SendGrid. 

Recently, I started writing a new SaaS app to handle the intricacies of wedding planning. The app is scheduled for beta release in September and features everything an overwhelmed bride (or groom) could need to plan a wedding. Everything from guest management to budgets and tasks to websites. And the website part is going to be our first topic in this blog. The design goal was to provide each user with their own website, delivered at their own private subdomain of the main site, with the ability to point a primary domain to that subdomain if they wanted. The app needs to be able to create new subdomains at runtime and be able to dynamically populate them with content.Of course, with any new project I start by researching solutions in case there was an obvious implementation, and I came across the Next.js Platforms Starter Kit, which seemed to be able to do exactly what I needed. The only problem? After an update to Drizzle ORM, the repo was completely broken, which means I had to work through the code base, pick out and understand the relevant bits, then rebuild the example for my tech stack. After discovering quite a bit of outdated, incorrect, and messy information relating to this topic and helping a few other devs navigate building their own multi-tenant app, I decided it would be a great place to start this blog. <h2>The overall idea</h2>The hardest part about this problem is understanding which pieces accomplish which task. We need: <ul><li>A database that can store the information for our individual sites</li><li>Incremental Site Regeneration (ISR) to dynamically build each of the pages</li><li>A way for the path to be displayed as a subdomain rather than a path of the main domain. Middleware is used for this one</li></ul><h2>Implementation</h2>So the first thing we do is install our ORM (for this discussion I'll be using Prisma) and connect our database. In our schema, we're going to create a table for our user data and a table called "Sites". At the minimum, we'll need an id, path, and the relation to the row in the User table that will own our site. Mine looks like this: <pre><code>model Site { 
id String @id @default(cuid()) 
name String? 
subdomain String? @unique 
user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade) 
userId String @unique 
@@index([userId]) 
} </code></pre>Now with this data, we can set up ISR to automatically create all of the pages during build. So, lets set up our directory structure to handle this. Here's how I have mine structured: <img src="https://jcumming.s3.us-east-2.amazonaws.com/next-s3-uploads/a31cb341-bffe-422f-8881-170d22582858/directory.png">You'll notice from this structure we actually have three distinct and separate directories we can drill down: <ol><li>The [domain] directory is where we apply our ISR for our subdomains. Sub pages in this directory will take the form of {path}.example.com/{page}. </li><li>The app directory (in app/app) is where the app itself is going to live. Users will log into app.example.com and interact with the software. Pages in this directory will take the form of app.example.com/{page}</li><li>The home directory is where the home page of our site is going to sit at example.com. </li></ol>In our [domain] directory we'll add a page.tsx, add our generateStaticParams() function and generate our paths. Here's an example from the Vercel Platforms Starter Kit that should work: https://github.com/vercel/platforms/blob/main/app/%5Bdomain%5D/page.tsxIn my case, I updated the database call to prisma. Now here's where all the magic happens. <h2>Middleware</h2>Middleware is a little bit special. If you don't have a firm grasp on how it works, the easiest way to understand it is that it runs on the edge of your server and intercepts, modifies or controls the flow of requests and responses within your app. It's important to note that it doesn't exist on your server exclusively and thus can't just run your server code. It actually runs outside of your servers operating system. Don't worry, it's pretty complicated to me too. All I know is it works. Essentially, we're going to intercept the request and rewrite the path if it matches certain criteria. The middleware is what's responsible for the entire effect in this case. Lets start by defining our matching criteria: <pre><code class="language-typescript">export const config = {
 matcher: [
 /*
 * Match all paths except for:
 * 1. /api routes
 * 2. /_next (Next.js internals)
 * 3. /_static (inside /public)
 * 4. all root files inside /public (e.g. /favicon.ico)
 */
 "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
 ],
};</code></pre>This tells our app which paths shouldn't be matched. Next, lets define our middleware function: <pre><code class="language-typescript">export default async function middleware(req: NextRequest) {

}</code></pre>Inside this function, we need to grab our request url, get our headers, and then start handling our rewrites.<pre><code class="language-typescript">export default async function middleware(req: NextRequest) {
 const url = req.nextUrl;

 // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
 let hostname = req.headers
 .get("host")!
 .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

 const searchParams = req.nextUrl.searchParams.toString();
 // Get the pathname of the request (e.g. /, /about, /blog/first-post)
 const path = `${url.pathname}${
 searchParams.length &gt; 0 ? `?${searchParams}` : ""
 }`;
 // rewrites for app pages

 if (hostname == `app.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`) {

 return NextResponse.rewrite(
 new URL(`/app${path === "/" ? "" : path}`, req.url),
 );
 }
 // rewrite root application to `/home` folder
 if (
 hostname === "localhost:3000" ||
 hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN
 ) {
 return NextResponse.rewrite(
 new URL(`/home${path === "/" ? "" : path}`, req.url),
 );
 }

 // rewrite everything else to `/[domain]/[slug] dynamic route
 return NextResponse.rewrite(new URL(`/${hostname}${path}`, req.url));
}</code></pre>This is a bit to look at, but if you spend some time and read what's happening, it's not terribly confusing. Our middleware is intercepting our request, grabbing the url, headers, and path and then returning a NextResponse that rewrites the url into the format that we desire.So for example, if a user types in app.example.com/some-path, we'll return a NextResponse.rewrite() with a new url object and point that to the location within our directory. In this case it points to '/app'. You can see if the user lands on the home page (localhost:3000 or the main domain declared in .env), we will be directed to the '/home' directory. We rewrite everything else to a dynamic route that sits on our [domain] path. <h2>In Summary</h2>Creating the bones of a multi-tenant app isn't terribly difficult but can easily be accomplished with a bit of middleware and some dynamic routes. This can be extended further by integrating the Vercel CLI to point top-level domains to the subdomains at runtime.

Creating Multi-Tenant SaaS Products in Next.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus quam, sodales tincidunt iaculis nec, feugiat non leo. Quisque pharetra nisi nec tellus bibendum faucibus. Maecenas mollis eget tortor facilisis condimentum. Ut malesuada mauris id nulla euismod cursus in quis eros. Sed eu ligula eget ex facilisis pretium. Maecenas porta metus quis tortor scelerisque elementum. Aliquam sed risus vitae odio tristique feugiat. Nam viverra semper sem sit amet vulputate. Vestibulum gravida ligula vel velit euismod vestibulum.Donec eget nisl eu enim accumsan facilisis. Pellentesque at ante elementum, mattis arcu ac, porta libero. Fusce bibendum sollicitudin rutrum. Nam blandit tellus nec consectetur fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu accumsan arcu, eget lobortis ante. Donec laoreet eros vel dolor tempus, pulvinar fringilla diam vulputate.Nulla consequat scelerisque pellentesque. Nam egestas justo a velit gravida, quis tincidunt dui accumsan. Pellentesque sed mi erat. Nulla non magna enim. Ut elementum, augue in pharetra placerat, mi est viverra lectus, sollicitudin sagittis mi sem id ex. Praesent ornare augue eu euismod sollicitudin. Donec efficitur blandit augue ornare vestibulum. Morbi sed metus pretium massa scelerisque semper a at purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla in ultrices libero, non mattis urna. Nam mauris nulla, porta id nibh ut, consequat hendrerit dolor. Proin ac scelerisque justo. Maecenas venenatis nisl vitae neque tempus blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean blandit erat id nunc cursus semper. Morbi sodales dolor nisi, vitae interdum odio lobortis non.Maecenas tempus quam sed mi tempus fringilla. Phasellus eleifend vestibulum nulla, ut vulputate est vehicula eu. Integer quis pulvinar sapien. Donec sem ipsum, lobortis tempor viverra malesuada, blandit non nibh. Etiam pharetra vehicula dolor, ac volutpat sem aliquam sit amet. Maecenas posuere tortor sed molestie tempor. Nulla blandit posuere felis, at cursus dolor laoreet nec. In at nisl non leo pulvinar euismod ultrices at arcu.Quisque sodales diam ut congue facilisis. Aliquam eu dui magna. Suspendisse faucibus neque risus, vel elementum nisi condimentum in. Nunc pharetra lectus non augue varius fermentum. Ut erat dolor, vulputate ac libero id, tempor maximus ex. Vestibulum lacinia lacus ac erat congue, in vehicula urna venenatis. Mauris iaculis, lectus sit amet ullamcorper elementum, risus nisi cursus massa, id posuere ligula sapien id diam. Etiam et velit blandit, tempus ante ac, rutrum risus. Mauris vestibulum nunc et arcu interdum cursus. Nulla volutpat eget arcu sit amet placerat. Integer vel porta sem, sit amet scelerisque purus. Ut nec semper est. Aliquam congue tellus in ultrices dictum. Vivamus vel velit sed tortor tristique pellentesque. Ut congue malesuada dignissim. Vivamus ut rutrum risus, vitae laoreet arcu.Sed dapibus libero quam, a condimentum diam ornare vehicula. Quisque varius commodo enim, faucibus vestibulum justo rhoncus ut. Sed eleifend molestie leo non commodo. Integer fringilla aliquam odio quis venenatis. Mauris feugiat erat et magna vestibulum, vitae maximus dui bibendum. Donec volutpat porta nunc nec molestie. Nulla sapien tortor, tincidunt maximus eros rutrum, placerat pretium justo. Maecenas eu mauris vitae leo fringilla bibendum. Sed suscipit, lorem ut varius tincidunt, lorem dolor gravida eros, eget dignissim dui lorem a turpis. Suspendisse eu lacus sit amet justo dignissim dictum id vel purus. Nam accumsan ultricies purus, eu convallis odio tempor nec. Duis at nisl et sem semper bibendum. Praesent eu lectus vel velit ultricies consequat quis sed massa. Suspendisse placerat egestas pulvinar. Ut imperdiet consectetur dapibus. Phasellus quis libero lobortis, maximus nisl posuere, egestas orci.Proin feugiat laoreet turpis, quis cursus elit vestibulum vel. Sed aliquam ultricies lacus et interdum. Fusce justo nisi, faucibus sit amet placerat et, rutrum in dui. Maecenas eget bibendum ex. Cras eu malesuada nibh. Curabitur vehicula tristique nibh, nec consequat metus finibus non. Sed tincidunt consectetur purus eu eleifend. Phasellus quam lacus, vulputate ac ipsum a, pulvinar fermentum dolor. Donec pellentesque tristique blandit. Aenean varius ultrices dolor eget tristique. Nullam in nisi nisl. Donec rhoncus, orci a viverra molestie, leo neque faucibus tellus, et finibus diam metus vehicula neque. Nam vehicula ligula quis vestibulum sagittis. Proin vel ligula nec odio ullamcorper tempor et eget sapien. Donec orci dui, egestas sit amet auctor sit amet, blandit in ante.Integer ut tincidunt nisi. Curabitur in volutpat dui. Vestibulum dapibus magna vitae elit sagittis dictum. Nam consectetur leo erat, quis venenatis erat mollis eget. Nullam pellentesque tellus ut tincidunt vestibulum. Fusce hendrerit est sodales, tincidunt dolor ut, viverra odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mauris eget mi vulputate pellentesque. Aenean tristique imperdiet erat id pellentesque. Sed ornare, mi vitae blandit maximus, nisi lectus pharetra mi, ut molestie nunc neque eget neque. Vivamus mollis ex quam, quis placerat sem aliquet at.Curabitur placerat nisl quis libero scelerisque, bibendum sagittis purus tempor. Nulla vulputate felis ac vulputate pretium. Pellentesque et faucibus lectus. Vivamus molestie dui in orci pulvinar, sed eleifend dui lacinia. Donec in turpis iaculis, blandit tortor vitae, consectetur eros. Quisque faucibus eu ex ut interdum. Maecenas laoreet bibendum lorem vel posuere.Nam neque justo, sodales sit amet dui in, volutpat rutrum tortor. Suspendisse cursus ante eget justo pretium sodales. Suspendisse vitae lacus lacus. Nullam et velit fringilla sem semper congue. Mauris maximus sed sem nec euismod. Fusce pulvinar feugiat eros et malesuada. Maecenas tellus dolor, sodales eget dignissim at, cursus vitae ligula. Nulla id turpis ornare diam pellentesque auctor ac eu lorem. Pellentesque quis porta massa, eu porttitor nibh. Cras varius quis nibh vel molestie. In elit lorem, malesuada nec dui ut, pretium condimentum velit. Vivamus orci elit, porttitor ut lacinia in, venenatis vitae turpis. Praesent faucibus diam at ultrices consectetur.Generated 10 paragraphs, 935 words, 6375 bytes of Lorem Ipsum

New test article

Hello World! 🌎️Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus quam, sodales tincidunt iaculis nec, feugiat non leo. Quisque pharetra nisi nec tellus bibendum faucibus. Maecenas mollis eget tortor facilisis condimentum. Ut malesuada mauris id nulla euismod cursus in quis eros. Sed eu ligula eget ex facilisis pretium. Maecenas porta metus quis tortor scelerisque elementum. Aliquam sed risus vitae odio tristique feugiat. Nam viverra semper sem sit amet vulputate. Vestibulum gravida ligula vel velit euismod vestibulum.Donec eget nisl eu enim accumsan facilisis. Pellentesque at ante elementum, mattis arcu ac, porta libero. Fusce bibendum sollicitudin rutrum. Nam blandit tellus nec consectetur fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu accumsan arcu, eget lobortis ante. Donec laoreet eros vel dolor tempus, pulvinar fringilla diam vulputate.Nulla consequat scelerisque pellentesque. Nam egestas justo a velit gravida, quis tincidunt dui accumsan. Pellentesque sed mi erat. Nulla non magna enim. Ut elementum, augue in pharetra placerat, mi est viverra lectus, sollicitudin sagittis mi sem id ex. Praesent ornare augue eu euismod sollicitudin. Donec efficitur blandit augue ornare vestibulum. Morbi sed metus pretium massa scelerisque semper a at purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla in ultrices libero, non mattis urna. Nam mauris nulla, porta id nibh ut, consequat hendrerit dolor. Proin ac scelerisque justo. Maecenas venenatis nisl vitae neque tempus blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean blandit erat id nunc cursus semper. Morbi sodales dolor nisi, vitae interdum odio lobortis non.Maecenas tempus quam sed mi tempus fringilla. Phasellus eleifend vestibulum nulla, ut vulputate est vehicula eu. Integer quis pulvinar sapien. Donec sem ipsum, lobortis tempor viverra malesuada, blandit non nibh. Etiam pharetra vehicula dolor, ac volutpat sem aliquam sit amet. Maecenas posuere tortor sed molestie tempor. Nulla blandit posuere felis, at cursus dolor laoreet nec. In at nisl non leo pulvinar euismod ultrices at arcu.Quisque sodales diam ut congue facilisis. Aliquam eu dui magna. Suspendisse faucibus neque risus, vel elementum nisi condimentum in. Nunc pharetra lectus non augue varius fermentum. Ut erat dolor, vulputate ac libero id, tempor maximus ex. Vestibulum lacinia lacus ac erat congue, in vehicula urna venenatis. Mauris iaculis, lectus sit amet ullamcorper elementum, risus nisi cursus massa, id posuere ligula sapien id diam. Etiam et velit blandit, tempus ante ac, rutrum risus. Mauris vestibulum nunc et arcu interdum cursus. Nulla volutpat eget arcu sit amet placerat. Integer vel porta sem, sit amet scelerisque purus. Ut nec semper est. Aliquam congue tellus in ultrices dictum. Vivamus vel velit sed tortor tristique pellentesque. Ut congue malesuada dignissim. Vivamus ut rutrum risus, vitae laoreet arcu.Sed dapibus libero quam, a condimentum diam ornare vehicula. Quisque varius commodo enim, faucibus vestibulum justo rhoncus ut. Sed eleifend molestie leo non commodo. Integer fringilla aliquam odio quis venenatis. Mauris feugiat erat et magna vestibulum, vitae maximus dui bibendum. Donec volutpat porta nunc nec molestie. Nulla sapien tortor, tincidunt maximus eros rutrum, placerat pretium justo. Maecenas eu mauris vitae leo fringilla bibendum. Sed suscipit, lorem ut varius tincidunt, lorem dolor gravida eros, eget dignissim dui lorem a turpis. Suspendisse eu lacus sit amet justo dignissim dictum id vel purus. Nam accumsan ultricies purus, eu convallis odio tempor nec. Duis at nisl et sem semper bibendum. Praesent eu lectus vel velit ultricies consequat quis sed massa. Suspendisse placerat egestas pulvinar. Ut imperdiet consectetur dapibus. Phasellus quis libero lobortis, maximus nisl posuere, egestas orci.Proin feugiat laoreet turpis, quis cursus elit vestibulum vel. Sed aliquam ultricies lacus et interdum. Fusce justo nisi, faucibus sit amet placerat et, rutrum in dui. Maecenas eget bibendum ex. Cras eu malesuada nibh. Curabitur vehicula tristique nibh, nec consequat metus finibus non. Sed tincidunt consectetur purus eu eleifend. Phasellus quam lacus, vulputate ac ipsum a, pulvinar fermentum dolor. Donec pellentesque tristique blandit. Aenean varius ultrices dolor eget tristique. Nullam in nisi nisl. Donec rhoncus, orci a viverra molestie, leo neque faucibus tellus, et finibus diam metus vehicula neque. Nam vehicula ligula quis vestibulum sagittis. Proin vel ligula nec odio ullamcorper tempor et eget sapien. Donec orci dui, egestas sit amet auctor sit amet, blandit in ante.Integer ut tincidunt nisi. Curabitur in volutpat dui. Vestibulum dapibus magna vitae elit sagittis dictum. Nam consectetur leo erat, quis venenatis erat mollis eget. Nullam pellentesque tellus ut tincidunt vestibulum. Fusce hendrerit est sodales, tincidunt dolor ut, viverra odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mauris eget mi vulputate pellentesque. Aenean tristique imperdiet erat id pellentesque. Sed ornare, mi vitae blandit maximus, nisi lectus pharetra mi, ut molestie nunc neque eget neque. Vivamus mollis ex quam, quis placerat sem aliquet at.Curabitur placerat nisl quis libero scelerisque, bibendum sagittis purus tempor. Nulla vulputate felis ac vulputate pretium. Pellentesque et faucibus lectus. Vivamus molestie dui in orci pulvinar, sed eleifend dui lacinia. Donec in turpis iaculis, blandit tortor vitae, consectetur eros. Quisque faucibus eu ex ut interdum. Maecenas laoreet bibendum lorem vel posuere.Nam neque justo, sodales sit amet dui in, volutpat rutrum tortor. Suspendisse cursus ante eget justo pretium sodales. Suspendisse vitae lacus lacus. Nullam et velit fringilla sem semper congue. Mauris maximus sed sem nec euismod. Fusce pulvinar feugiat eros et malesuada. Maecenas tellus dolor, sodales eget dignissim at, cursus vitae ligula. Nulla id turpis ornare diam pellentesque auctor ac eu lorem. Pellentesque quis porta massa, eu porttitor nibh. Cras varius quis nibh vel molestie. In elit lorem, malesuada nec dui ut, pretium condimentum velit. Vivamus orci elit, porttitor ut lacinia in, venenatis vitae turpis. Praesent faucibus diam at ultrices consectetur.Generated 10 paragraphs, 935 words, 6375 bytes of Lorem Ipsum