Pulock Deb RoyUpdated How We Built Code Sphere Network's New Site
The Code Sphere Network site is a Next.js site with a page for every service, an AI assistant called Sphere, and an admin area where the team runs the content. This is how we built it, and why.
How is the site organised?
The site has a page for each of Code Sphere Network's ten services, from managed IT to AI systems, generated from a single list of services. The same list feeds the services page and the sitemap, so they never disagree.
There is also a page for managed IT services in Vancouver. It carries the office address, the opening hours and the areas the team visits in person.
What does Sphere, the AI assistant, do?
Sphere sits in the corner of every page. It answers questions about the services and helps a visitor book a consultation.
Sphere runs on Google Gemini, through a route on the server, so the key never reaches the browser. Its instructions list the company's services, partners and process. If Gemini hits a usage limit, Sphere shows a plain message rather than a raw error.
How does the team edit the site?
Articles, case studies, the home page hero, partners, office photos and site settings live in Supabase. The team edits them in an admin area.
The admin area sits behind a sign-in with a second step. Its address can be changed from the default, and the middleware turns away anyone who is not signed in.
When the team saves an article, the blog and the sitemap update without a new deploy.
How do search engines and AI tools read it?
- The home page answers the four questions clients ask first, and marks them up as an FAQ.
- The company is described as an organisation in structured data, with its contact details.
- A sitemap lists every page, service and article, and an RSS feed carries the articles.
- Two plain-text files,
llms.txtandllms-full.txt, describe the company for AI tools.
What else does the site do?
- A contact form sends each enquiry to the team by email through Resend.
- A weekly feed pulls cybersecurity news and summarises it for busy readers.
- A site search page.
What is it built with?
- Next.js 15, React 19 and TypeScript.
- Supabase for content and the admin sign-in.
- Google Gemini for the assistant, and Resend for email.
- Tailwind for styling, and the Motion library for movement.
- Hosted on Vercel.
First published
Pulock Deb Roy is the Co-Founder and Chief Marketing Officer of Ravenence, leading brand strategy, digital growth, and business development.
