Next.js and React websites

B2B SaaS

2024 – Present

procol.ai website on Next.js, TypeScript and Tailwind CSS, built and maintained by Mohit Goyal as Senior Web Developer, including the Procol Nexus 2026 summit page. Procol sells a procurement platform to enterprise buyers, and procol.ai is where prospects first meet the product. As Senior Web Developer I build and maintain the site: the product, solution, pricing, blog and campaign pages, and event pages such as Procol Nexus 2026. I built the site on Next.js with React, TypeScript and Tailwind CSS. Every page is server rendered, so the HTML arrives complete and pages load fast on phones. Pages are assembled from a shared library of typed components, so a new landing page reuses tested sections rather than starting from a blank canvas. The SEO foundations are built in: structured data, generated sitemaps, canonical URLs and optimised images, all generated from the same content the pages render so they cannot drift out of sync. Procol Nexus 2026 is Procol's invite-only summit for procurement, finance and IT leaders, and its page lives at procol.ai/nexus. It opens on a full-screen video hero that visitors scroll into, with Framer Motion carrying them from the opening frame into the event details and a registration form for invited guests. The video is treated as progressive enhancement, so the page stays usable while it loads. It runs on the same codebase as the rest of the site, so it is server rendered, indexable and on-brand without a separate microsite. The site is live at procol.ai, and I continue to ship new pages as the product grows. The lesson I keep coming back to: a campaign or event page does not need its own stack to feel special. Strong design, careful motion and fast server-rendered pages do the work. Thinking about moving a marketing site to Next.js, or launching an event page? Send me your next project and I will reply with a plan.

Personal project

2025 – Present

mohitgoyal.in is my AI portfolio site on TanStack Start and React, by Mohit Goyal with a chat that answers as me on the Anthropic Claude API and Firestore. It replaces the brochure portfolio with something a visitor can question, and it doubles as the place where I test the techniques I use for clients. The problem with most portfolios, including my earlier ones, is that they are static brochures. A visitor has to read every section to find out whether I have worked with their stack, and the content goes stale the moment a project changes. I wanted a portfolio that behaves less like a brochure and more like a conversation. A visitor can ask about my work and get an answer in first person, and updating a project updates everything downstream without me editing three places. The 2026 revamp is the version you are reading now. The site is a server-rendered React app on TanStack Start, hosted on Cloudflare. Visitors can read the usual sections or ask the chat about my work. The chat answers as me with structured replies, backed by the Anthropic Claude API and a system prompt built from my Firestore profile, so updating a project updates what the chat knows. Every project has a standalone SEO page at /projects/<slug>, 35+ of them live. Case studies at /case-studies/<slug> and posts at /blog/<slug> are rendered from markdown files in the repo. Service pages at /services/<slug> carry deliverables, a process and an FAQ. A site header and footer sit on a lined grid layout with Syne headings and Satoshi body type. Behind the public site is an admin dashboard where I edit every section. It has version history so I can roll back a bad edit, draft flags for projects, link health checks that flag dead client URLs, an SEO preview for each page and chat analytics that show what visitors actually ask. Search and answer engines get the same care as human readers. Each page carries its own JSON-LD structured data: Person, CreativeWork, BreadcrumbList and ItemList. Every project has an Open Graph image, and the site generates a sitemap and an llms.txt file so answer engines can read the profile directly. Every legacy WordPress URL from Search Console has a 301 redirect, so old links and rankings land on the right new page. TanStack Start was chosen for server-side rendering (SSR) with type-safe routing, which keeps the project pages indexable and the data loading explicit. Firebase Firestore is the content store, and Firebase handles the auth behind the admin, so there is no custom backend to host. Images are served from a dedicated assets subdomain. Cloudflare serves the whole thing at the edge, so the first byte is quick wherever the visitor is. Tailwind CSS and TypeScript round out the stack. The project list on this site is the same data that this very description is drawn from. The site is live at mohitgoyal.in. The main outcome is that I maintain one source of truth. A change in the admin dashboard updates the page, the metadata, the sitemap, the llms.txt and the chat at once. What I learned is that the editorial tooling matters as much as the public pages. Version history, link checks and analytics are what make it cheap to keep the content honest over time. Want a site that can answer questions about your business in your own voice? Send me a note about it and I will reply with a plan.