Building with AI

The Building Blocks of a Website

The Building Blocks of a Website

A practical guide to building typical websites, what each one needs, and the responsibilities that add as a website becomes more capable.

A practical guide to building typical websites, what each one needs, and the responsibilities that add as a website becomes more capable.

Below4k.ai is primarily a publishing website. People visit it to read articles, look through projects and browse curated resources. It also has a Contact form, which allows visitors to submit information.

To understand where that places it among other websites, it helps to compare what different sites are expected to do.

The sections below follow the same structure:

- the purpose of the website;
- what it can do;
- what it needs;
- examples of services that can provide those components;
- a familiar website example;
- what the owner must manage.

These are not exclusive categories. One website may combine several of them, and the capabilities do not have to be added in a particular order.

1. Publishing websites

Purpose

A publishing website gives an individual or organisation a public presence.

Its main job is to organise and present information.

What can the site do?

A publishing website may contain:

- a Home page;
- an About page;
- information about services or products;
- articles or news;
- projects;
- images and video;
- contact details.

Visitors mainly browse and read public content. The website does not need to recognise each visitor or remember what they have done.

What does it need?

The basic components are:

- pages and navigation;
- a design and layout;
- hosting;
- a domain name;
- possibly a content management system.

A content management system, or CMS, provides an editing area where content can be written and published without changing the website code directly.

A small website that changes rarely may not need a CMS. A publication that adds or updates material regularly usually benefits from one.

Common providers

Examples include:

- WordPress or Webflow for building and publishing websites;
- Sanity or Contentful for managing structured content;
- Vercel or Netlify for hosting custom-built sites;
- Porkbun, GoDaddy or Cloudflare for domains and DNS.

These services approach different parts of the work. A website may use one platform for several jobs or combine specialist services.

Familiar example

BBC News is a familiar publishing-led website. Its main public purpose is to organise and present articles, images and video across different sections.

A company website, portfolio, blog or below4k.ai also begins with this publishing capability.

What must the owner manage?

The owner must keep the information accurate, organise it clearly and make sure the pages continue to work across different devices.

As the amount of content grows, navigation and editorial maintenance become more important. Even a straightforward publishing website needs someone to decide what belongs there and keep it in order.

2. Interactive and data-collecting websites

Purpose

Interaction allows visitors to respond, make choices or submit information.

Some interactions last only while the visitor is using the page. Others create information that the website must remember.

What can the site do?

Common functions include:

- Contact forms;
- questionnaires;
- booking requests;
- newsletter subscriptions;
- search and filters;
- feedback forms;
- saved preferences.

A filter may simply change what appears on the screen. A submitted enquiry is different because the information must be stored or passed to someone.

What does it need?

Depending on the function, the website may require:

- a form or another interactive control;
- rules for checking submitted information;
- processing behind the public page;
- a database;
- an email or notification service.

A database is an organised place where information can be stored and retrieved later.

The website also needs a clear response when something goes wrong. A visitor should not be left wondering whether a form was submitted successfully.

Common providers

Examples include:

- Google Forms or Typeform for forms and questionnaires;
- Microsoft Bookings for appointments;
- Airtable or Supabase for storing submitted information;
- Mailchimp for mailing lists;
- Resend for email notifications from a custom website.

The right service depends on what the information is for and what must happen after it is submitted.

Familiar example

Google Forms is a simple and recognisable example. Someone completes a form, submits it and the responses are collected for review.

A consultation website might use the same broad process for an initial client questionnaire or enquiry.

Below4k.ai uses this capability for its Contact form. The message is stored in Supabase, and Resend sends an email notification that it has arrived.

What must the owner manage?

The owner must decide:

- what information to collect;
- which fields are required;
- how the information will be checked;
- where it will be stored;
- who can access it;
- how long it should be kept;
- what happens if storage or notification fails.

Once a website collects information from visitors, privacy and security become more important.

The form itself may look simple. The process behind it still needs to be reliable.

3. Account-based websites

Purpose

Accounts allow a website to recognise individual users.

They are useful when different people need their own information, preferences or access.

What can the site do?

Account-based functions may include:

- registration;
- signing in;
- password recovery;
- private pages;
- saved work or history;
- personal settings;
- subscription access;
- different user roles.

A public visitor and a registered member may see different content or be allowed to perform different actions.

What does it need?

This normally requires:

- user records;
- a secure sign-in system;
- authentication;
- permissions;
- account-recovery processes.

Authentication confirms who the user is. Permissions determine what that person is allowed to see or do.

The website must still define the rules. An authentication service can confirm someone’s identity, but it does not decide what each type of user should be allowed to access.

Common providers

Examples include:

- Auth0, Clerk, Firebase Authentication or Supabase Auth for sign-in and identity;
- Supabase or Firebase for information connected to individual users.

Some website platforms include account functions as part of a larger package.

Familiar example

Netflix is a familiar account-based website. Users sign in, and individual profiles can have their own preferences, viewing history and access controls.

A consultation website might use accounts to give each client a private area containing reports, documents or appointment details.

The editing account used by a website owner is not the same as a public visitor account. Below4k.ai requires authorised access to manage its content, but readers do not need accounts to use the site.

What must the owner manage?

The owner must protect personal information, prevent unauthorised access and help users who have problems with their accounts.

That includes forgotten passwords, lost access to old email addresses and requests to correct or delete personal information.

Accounts should be added when recognising individual users provides a clear benefit. Otherwise, registration creates an extra obstacle for visitors and an extra support responsibility for the owner.

4. Transactional websites

Purpose

A transactional website records a payment, order, booking, reservation or another formal commitment.

The website now supports part of the organisation’s day-to-day operations.

What can the site do?

Transactions may include:

- buying a product;
- paying for a consultation;
- booking an appointment;
- reserving a room;
- purchasing a ticket;
- paying for a subscription;
- making a donation.

The website may also need to handle confirmations, cancellations and refunds.

What does it need?

This may require:

- prices or availability;
- a basket, checkout or booking process;
- a payment provider;
- transaction records;
- order or reservation management;
- confirmation messages;
- cancellation and refund rules.

A payment provider processes payments securely. The website normally connects to a specialist service rather than storing card details itself.

Accounts and payments are separate capabilities. A website can allow guest checkout or accept a booking deposit without creating a permanent account for every customer.

Common providers

Examples include:

- Stripe or PayPal for payments;
- Shopify for a complete online-shop system;
- Square for businesses combining online and in-person payments;
- a database or commerce platform for supporting transaction records.

The provider may process the payment, but the website owner still defines the product, price, booking rules and customer process.

Familiar example

Amazon is a familiar transactional website. A customer selects an item, checks out, pays and creates an order that can be tracked and managed afterwards.

A smaller example would be a consultant’s website where a visitor selects a service, chooses a time and pays a deposit.

What must the owner manage?

The owner must deal with:

- payment failures;
- duplicate transactions;
- incorrect prices or availability;
- cancellations;
- refunds;
- confirmations;
- customer enquiries;
- accounting records.

The payment button is only the visible part of a larger operation.

A transaction is not complete merely because the payment went through. The organisation must still deliver what was purchased and handle exceptions when the process does not go as planned.

5. Platforms and marketplaces

Purpose

A platform or marketplace connects different groups of users through the same website.

Instead of dealing only with the website owner, users may interact with one another.

What can the site do?

A platform or marketplace may support:

- user profiles;
- listings;
- search and filters;
- messaging;
- reviews;
- bookings;
- buying and selling;
- payments involving different parties;
- different functions for different user roles.

A seller and buyer, or host and guest, use the same website for different purposes.

What does it need?

This type of website usually combines several earlier capabilities:

- publishing;
- databases;
- accounts;
- permissions;
- search;
- messaging;
- payments;
- moderation;
- administrative controls.

It also needs rules governing how the different groups interact.

The difficulty comes from both the number of components and the relationships between the users.

Common providers

Examples include:

- Sharetribe for marketplace functions;
- Stripe Connect for payments involving several parties;
- Algolia for search and filtering;
- Twilio for messaging and notifications;
- Auth0, Clerk or Supabase Auth for user accounts.

A specialist provider may supply part of the system, but the operator still needs to define the service, its rules and how problems will be handled.

Familiar example

eBay is a familiar marketplace. Sellers create listings, while buyers search, compare and purchase items.

Airbnb follows a similar broad model. Hosts publish accommodation or services, while guests search and make bookings.

Both websites combine publishing, accounts, search, communication and transactions. They also have to manage the relationship between different groups of users.

What must the owner manage?

The operator may need to handle:

- trust and safety;
- misleading listings;
- user behaviour;
- reviews;
- fraud;
- payment disputes;
- moderation;
- complaints between users.

At this point, operating the website may become a substantial part of operating the organisation itself.

Technical services can support the process, but they cannot remove the need for rules, judgement and human intervention.

One website can combine several types

Consider a personal consultation website.

It might begin by publishing information about the consultant and their services.

It could then add a Contact form or booking request. This introduces interaction and possibly stored information.

The consultant might later allow clients to choose a time and pay a deposit. This adds availability, transaction records and cancellation rules.

Private accounts could give clients access to reports, documents or appointment details.

If the service expanded to include several consultants, the website might add profiles, comparisons, separate schedules and bookings involving different people.

The original publishing website has not disappeared. New capabilities have been added around it.

The sequence is not compulsory. Another business might need payments immediately but never need public accounts. A publication might add paid subscriptions without becoming a marketplace. An interactive tool might not store personal information at all.

Where below4k.ai fits

Below4k.ai is a publishing-led website with a limited amount of interaction and stored information.

Its main job is to publish articles, projects and curated resources. Sanity provides the content-management area used to organise that material.

The Contact form adds another capability. Messages are stored in Supabase, and Resend sends an email notification.

The website does not currently need public reader accounts, private member areas, payments, bookings or marketplace functions. Adding them would create operational responsibilities without supporting its present purpose.

This is why the below4k.ai project may still be relevant to someone considering a different kind of website.

A company site, online shop, membership service or marketplace may use some of the same foundations. The differences come from the additional capabilities required and the responsibilities attached to them.

More functionality does not automatically make a website more useful.

A clear publishing site may be better than a complicated platform containing accounts, payments and other functions its visitors do not need. If the purpose changes, another capability can be added.

The aim is to choose the right components for the job and understand the work that comes with them.

Below4k.ai is primarily a publishing website. People visit it to read articles, look through projects and browse curated resources. It also has a Contact form, which allows visitors to submit information.

To understand where that places it among other websites, it helps to compare what different sites are expected to do.

The sections below follow the same structure:

- the purpose of the website;
- what it can do;
- what it needs;
- examples of services that can provide those components;
- a familiar website example;
- what the owner must manage.

These are not exclusive categories. One website may combine several of them, and the capabilities do not have to be added in a particular order.

1. Publishing websites

Purpose

A publishing website gives an individual or organisation a public presence.

Its main job is to organise and present information.

What can the site do?

A publishing website may contain:

- a Home page;
- an About page;
- information about services or products;
- articles or news;
- projects;
- images and video;
- contact details.

Visitors mainly browse and read public content. The website does not need to recognise each visitor or remember what they have done.

What does it need?

The basic components are:

- pages and navigation;
- a design and layout;
- hosting;
- a domain name;
- possibly a content management system.

A content management system, or CMS, provides an editing area where content can be written and published without changing the website code directly.

A small website that changes rarely may not need a CMS. A publication that adds or updates material regularly usually benefits from one.

Common providers

Examples include:

- WordPress or Webflow for building and publishing websites;
- Sanity or Contentful for managing structured content;
- Vercel or Netlify for hosting custom-built sites;
- Porkbun, GoDaddy or Cloudflare for domains and DNS.

These services approach different parts of the work. A website may use one platform for several jobs or combine specialist services.

Familiar example

BBC News is a familiar publishing-led website. Its main public purpose is to organise and present articles, images and video across different sections.

A company website, portfolio, blog or below4k.ai also begins with this publishing capability.

What must the owner manage?

The owner must keep the information accurate, organise it clearly and make sure the pages continue to work across different devices.

As the amount of content grows, navigation and editorial maintenance become more important. Even a straightforward publishing website needs someone to decide what belongs there and keep it in order.

2. Interactive and data-collecting websites

Purpose

Interaction allows visitors to respond, make choices or submit information.

Some interactions last only while the visitor is using the page. Others create information that the website must remember.

What can the site do?

Common functions include:

- Contact forms;
- questionnaires;
- booking requests;
- newsletter subscriptions;
- search and filters;
- feedback forms;
- saved preferences.

A filter may simply change what appears on the screen. A submitted enquiry is different because the information must be stored or passed to someone.

What does it need?

Depending on the function, the website may require:

- a form or another interactive control;
- rules for checking submitted information;
- processing behind the public page;
- a database;
- an email or notification service.

A database is an organised place where information can be stored and retrieved later.

The website also needs a clear response when something goes wrong. A visitor should not be left wondering whether a form was submitted successfully.

Common providers

Examples include:

- Google Forms or Typeform for forms and questionnaires;
- Microsoft Bookings for appointments;
- Airtable or Supabase for storing submitted information;
- Mailchimp for mailing lists;
- Resend for email notifications from a custom website.

The right service depends on what the information is for and what must happen after it is submitted.

Familiar example

Google Forms is a simple and recognisable example. Someone completes a form, submits it and the responses are collected for review.

A consultation website might use the same broad process for an initial client questionnaire or enquiry.

Below4k.ai uses this capability for its Contact form. The message is stored in Supabase, and Resend sends an email notification that it has arrived.

What must the owner manage?

The owner must decide:

- what information to collect;
- which fields are required;
- how the information will be checked;
- where it will be stored;
- who can access it;
- how long it should be kept;
- what happens if storage or notification fails.

Once a website collects information from visitors, privacy and security become more important.

The form itself may look simple. The process behind it still needs to be reliable.

3. Account-based websites

Purpose

Accounts allow a website to recognise individual users.

They are useful when different people need their own information, preferences or access.

What can the site do?

Account-based functions may include:

- registration;
- signing in;
- password recovery;
- private pages;
- saved work or history;
- personal settings;
- subscription access;
- different user roles.

A public visitor and a registered member may see different content or be allowed to perform different actions.

What does it need?

This normally requires:

- user records;
- a secure sign-in system;
- authentication;
- permissions;
- account-recovery processes.

Authentication confirms who the user is. Permissions determine what that person is allowed to see or do.

The website must still define the rules. An authentication service can confirm someone’s identity, but it does not decide what each type of user should be allowed to access.

Common providers

Examples include:

- Auth0, Clerk, Firebase Authentication or Supabase Auth for sign-in and identity;
- Supabase or Firebase for information connected to individual users.

Some website platforms include account functions as part of a larger package.

Familiar example

Netflix is a familiar account-based website. Users sign in, and individual profiles can have their own preferences, viewing history and access controls.

A consultation website might use accounts to give each client a private area containing reports, documents or appointment details.

The editing account used by a website owner is not the same as a public visitor account. Below4k.ai requires authorised access to manage its content, but readers do not need accounts to use the site.

What must the owner manage?

The owner must protect personal information, prevent unauthorised access and help users who have problems with their accounts.

That includes forgotten passwords, lost access to old email addresses and requests to correct or delete personal information.

Accounts should be added when recognising individual users provides a clear benefit. Otherwise, registration creates an extra obstacle for visitors and an extra support responsibility for the owner.

4. Transactional websites

Purpose

A transactional website records a payment, order, booking, reservation or another formal commitment.

The website now supports part of the organisation’s day-to-day operations.

What can the site do?

Transactions may include:

- buying a product;
- paying for a consultation;
- booking an appointment;
- reserving a room;
- purchasing a ticket;
- paying for a subscription;
- making a donation.

The website may also need to handle confirmations, cancellations and refunds.

What does it need?

This may require:

- prices or availability;
- a basket, checkout or booking process;
- a payment provider;
- transaction records;
- order or reservation management;
- confirmation messages;
- cancellation and refund rules.

A payment provider processes payments securely. The website normally connects to a specialist service rather than storing card details itself.

Accounts and payments are separate capabilities. A website can allow guest checkout or accept a booking deposit without creating a permanent account for every customer.

Common providers

Examples include:

- Stripe or PayPal for payments;
- Shopify for a complete online-shop system;
- Square for businesses combining online and in-person payments;
- a database or commerce platform for supporting transaction records.

The provider may process the payment, but the website owner still defines the product, price, booking rules and customer process.

Familiar example

Amazon is a familiar transactional website. A customer selects an item, checks out, pays and creates an order that can be tracked and managed afterwards.

A smaller example would be a consultant’s website where a visitor selects a service, chooses a time and pays a deposit.

What must the owner manage?

The owner must deal with:

- payment failures;
- duplicate transactions;
- incorrect prices or availability;
- cancellations;
- refunds;
- confirmations;
- customer enquiries;
- accounting records.

The payment button is only the visible part of a larger operation.

A transaction is not complete merely because the payment went through. The organisation must still deliver what was purchased and handle exceptions when the process does not go as planned.

5. Platforms and marketplaces

Purpose

A platform or marketplace connects different groups of users through the same website.

Instead of dealing only with the website owner, users may interact with one another.

What can the site do?

A platform or marketplace may support:

- user profiles;
- listings;
- search and filters;
- messaging;
- reviews;
- bookings;
- buying and selling;
- payments involving different parties;
- different functions for different user roles.

A seller and buyer, or host and guest, use the same website for different purposes.

What does it need?

This type of website usually combines several earlier capabilities:

- publishing;
- databases;
- accounts;
- permissions;
- search;
- messaging;
- payments;
- moderation;
- administrative controls.

It also needs rules governing how the different groups interact.

The difficulty comes from both the number of components and the relationships between the users.

Common providers

Examples include:

- Sharetribe for marketplace functions;
- Stripe Connect for payments involving several parties;
- Algolia for search and filtering;
- Twilio for messaging and notifications;
- Auth0, Clerk or Supabase Auth for user accounts.

A specialist provider may supply part of the system, but the operator still needs to define the service, its rules and how problems will be handled.

Familiar example

eBay is a familiar marketplace. Sellers create listings, while buyers search, compare and purchase items.

Airbnb follows a similar broad model. Hosts publish accommodation or services, while guests search and make bookings.

Both websites combine publishing, accounts, search, communication and transactions. They also have to manage the relationship between different groups of users.

What must the owner manage?

The operator may need to handle:

- trust and safety;
- misleading listings;
- user behaviour;
- reviews;
- fraud;
- payment disputes;
- moderation;
- complaints between users.

At this point, operating the website may become a substantial part of operating the organisation itself.

Technical services can support the process, but they cannot remove the need for rules, judgement and human intervention.

One website can combine several types

Consider a personal consultation website.

It might begin by publishing information about the consultant and their services.

It could then add a Contact form or booking request. This introduces interaction and possibly stored information.

The consultant might later allow clients to choose a time and pay a deposit. This adds availability, transaction records and cancellation rules.

Private accounts could give clients access to reports, documents or appointment details.

If the service expanded to include several consultants, the website might add profiles, comparisons, separate schedules and bookings involving different people.

The original publishing website has not disappeared. New capabilities have been added around it.

The sequence is not compulsory. Another business might need payments immediately but never need public accounts. A publication might add paid subscriptions without becoming a marketplace. An interactive tool might not store personal information at all.

Where below4k.ai fits

Below4k.ai is a publishing-led website with a limited amount of interaction and stored information.

Its main job is to publish articles, projects and curated resources. Sanity provides the content-management area used to organise that material.

The Contact form adds another capability. Messages are stored in Supabase, and Resend sends an email notification.

The website does not currently need public reader accounts, private member areas, payments, bookings or marketplace functions. Adding them would create operational responsibilities without supporting its present purpose.

This is why the below4k.ai project may still be relevant to someone considering a different kind of website.

A company site, online shop, membership service or marketplace may use some of the same foundations. The differences come from the additional capabilities required and the responsibilities attached to them.

More functionality does not automatically make a website more useful.

A clear publishing site may be better than a complicated platform containing accounts, payments and other functions its visitors do not need. If the purpose changes, another capability can be added.

The aim is to choose the right components for the job and understand the work that comes with them.