image

About Us

At Ottawa SEO Inc., we are dedicated to enhancing your online presence through expert SEO and web design services. Our mission is to help your business achieve top search engine rankings, drive targeted traffic, and increase your sales and revenue.

Let’s Talk

Contact Information

Pure Clean Solutions - Technical Overview

Pure Clean Solutions - Technical Overview

The website architecture technology Stack:

  • React 18

    with TypeScript

  • Vite

    for fast development and optimized builds

  • Tailwind CSS

    with Shadcn/ui component library

  • Wouter

    for client-side routing

  • TanStack Query

    for server state management

  • React Hook Form

    with Zod validation

  • Framer Motion

    for animations

Pages & Features

Page

Description

Home

Hero section, featured services, testimonials, call-to-action

About

Company story, team profiles, values

Services

5 service cards with pricing, dynamic detail pages

Gallery

Before/after image grid with lightbox

Get a Quote

Multi-step form (property details → services → contact info)

Contact

Contact form, phone, email, service area map

Blog

SEO-optimized articles with rich content

Booking

Real-time price calculator with Stripe checkout

Admin Dashboard

Protected area for business management

Design System

  • Poppins

    font family throughout

  • Consistent spacing and color tokens

  • Accessible components (ARIA labels, keyboard navigation)

  • Responsive design for all screen sizes

  • Light/dark mode support

Backend

Technology Stack

  • Express.js

    with TypeScript

  • PostgreSQL

    database with

    Drizzle ORM

  • Standard pg driver

    with connection pooling

  • Passport.js

    for admin authentication

  • Bcrypt

    for password hashing

  • Zod

    for request validation

Database Tables

Table

Purpose

services

Cleaning service details and pricing

cleaners

Team member profiles

bookings

Customer bookings with payment status

quote_requests

Multi-step quote form submissions

contact_messages

Contact form submissions

admin_users

Admin login credentials

blogs

Blog posts with SEO metadata

banner_settings

Promotional banner configuration

API Endpoints

Endpoint

Methods

Purpose

/api/services

GET, POST, PATCH, DELETE

Manage cleaning services

/api/cleaners

GET, POST, PATCH, DELETE

Manage team members

/api/bookings

GET, POST, PATCH

Handle customer bookings

/api/quote-requests

GET, POST

Quote form submissions

/api/contact

POST

Contact form submissions

/api/blogs

GET, POST, PATCH, DELETE

Blog management

/api/admin/*

POST

Authentication endpoints

/api/create-payment-intent

POST

Stripe payment processing

/api/webhook

POST

Stripe webhook handler

/api/upload/*

POST

Image uploads to cloud storage

/api/health

GET

Health check for monitoring

External Integrations

Service

Purpose

Stripe

Payment processing and webhooks

Resend

Email notifications for quotes/bookings

Google Cloud Storage

Image storage for gallery and blog

Security Features

  • Session-based authentication with secure cookies

  • Password hashing with Bcrypt

  • Input validation on all endpoints

  • Protected admin routes

  • CORS configuration

Data Flow

User → React Frontend → Express API → PostgreSQL Database ↓ Stripe (Payments) ↓ Resend (Email Notifications) ↓ Cloud Storage (Images)

Deployment Architecture

  • Single server deployment

    - Frontend and backend served from same Express server

  • Static assets

    bundled and served from

    /dist/public

  • Environment-based configuration

    via environment variables

  • Health endpoint

    for container orchestration and monitoring

  • Connection pooling

    for database efficiency