# How to Vibecode HSBC — Can You Do It Yourself? > Opening up a world of opportunity - Site: https://hsbc.com - Category: Banking & Financial Services - Verdict: **Don't bother** (12/100 vibecodeable) - Estimated effort: A weekend for the static marketing and investor relations subset; centuries for the actual bank. ## Verdict Build a static marketing and investor relations portal clone for your own portfolio, but skip the banking core entirely unless you want to spend decades navigating global regulatory compliance and prison. Attempting to vibecode a functional clone of HSBC is a masterclass in futility. While an AI coding agent can easily replicate the marketing landing pages, investor relations table filters, and stock ticker widgets in a weekend, building the actual banking backend is impossible for a solo developer. You cannot replicate core banking ledgers, SWIFT wire routing, anti-money laundering (AML) compliance engines, or multi-jurisdictional regulatory licenses with a few prompts. The security requirements, zero-data-loss expectations, and liability involved make a real banking clone a non-starter. Build a sleek corporate landing page clone for practice, but recognize that the core product value is 100% regulatory moat and trust. ### What you can't replicate - Global banking licenses and regulatory compliance approvals in dozens of distinct legal jurisdictions - Core banking ledgers with 24/7 high-availability and zero-data-loss transactional guarantees - Direct membership in international wire networks like SWIFT and CHIPS - Centuries-old institutional brand trust and multi-billion-dollar liquidity reserves ## What it does Global corporate digital front door, online banking portal, and wealth management platform for personal, premier, commercial, and institutional clients. ### Core features - Multi-region corporate website with localized content hubs for investors, careers, and news - Interactive shareholder financial results, stock price tickers, and regulatory debt document search - Online banking authentication portal with multi-factor security warnings and external link disclaimers - Global wealth management market research and sustainable finance framework repositories - Career portal with department filtering and application guides - Multilingual translation support (English and Chinese disclosures) ## The business ### Pricing - Consumer/Retail Banking: Free — Everyday multi-currency accounts with tiered requirements for Premier and Private Banking. - Commercial & Institutional Banking: Custom — Negotiated contract-based corporate finance, trade solutions, and institutional investment services. Founded 1865. Team size: 200,000+. ## The hard parts - Strict compliance and multi-jurisdictional regulatory frameworks (Basel III, KYC, AML, data residency) - Real-time financial exchange feeds and stock ticker aggregations from global stock exchanges - Enterprise-grade security, secure tokenization, and defense against advanced persistent threats - Deep integration with legacy core banking infrastructure and SWIFT financial networks ## How to vibecode HSBC ### Prerequisites - Node.js (free): Required for running the local frontend development server and building static assets. - GitHub (free): Version control and automated deployments to hosting providers. ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding complex multi-page corporate portals and structuring search indexes. - Cursor: Ideal for fine-tuning responsive layouts, accessible UI components, and Tailwind styling. ### Stack - Frontend: Next.js with TypeScript and Tailwind CSS - Backend: Next.js Server Actions / API Routes - Database: Cloudflare D1 (SQLite) for storing document metadata and news articles - Auth: None required for public portal clone - Payments: None - Other: Lucide React for financial icons, TanStack Table for regulatory debt document filtering ### Hosting - Cloudflare (Hosting the static and server-rendered corporate portal clone with global edge caching): $0-5/mo ### Build guide 1. **Project Scaffolding and Design System** — Initialize the Next.js project with Tailwind CSS and configure the corporate visual identity, typography, and layout shell. ``` Create a new Next.js project using TypeScript and Tailwind CSS. Implement the global navigation header with dropdown menus for 'Who we are', 'Investors', 'News and views', and 'Careers', matching the enterprise aesthetic of a major global bank. Use a clean white and deep red primary color palette. Ensure full accessibility with ARIA attributes for dropdown panels and keyboard navigation. ``` 2. **Stock Price Ticker Bar** — Build an interactive ticker component displaying delayed global stock values for London, Hong Kong, and New York markets with pause/play functionality. ``` Build a responsive stock ticker component for the header that displays mock or fetched share prices for London (HSBA), Hong Kong (0005), and New York (HSBC). Include interactive play/pause controls, change indicators with green/red directional arrows, and a last-updated timestamp footer noting delayed pricing. ``` 3. **Investor Relations Regulatory Debt Document Search** — Implement a searchable and filterable document repository table using Cloudflare D1 and TanStack Table for regulatory debt filings. ``` Create a regulatory debt document archive page with a robust multi-facet filter sidebar allowing users to filter by Entity (e.g., HSBC Holdings plc, HSBC Bank plc, HSBC UK Bank plc) and Year. Implement a data table displaying document dates, titles, format badges (PDF, XLSX), and file sizes with pagination support. ``` 4. **Online Banking Access Modal and Security Disclaimer** — Develop an interactive online banking login trigger modal that displays security warnings and external redirection disclaimers. ``` Build an interactive 'Online banking' drawer modal that slides out from the header. Include a dropdown selector for banking type, username input fields with a 'Remember me' checkbox, and a prominent security warning disclaimer box stating that users are navigating away or accessing secure channels. Add smooth transition animations. ``` 5. **News and Views Content Hub** — Create a rich media news archive and article reader interface showcasing corporate press releases and sustainability strategies. ``` Construct a 'News and views' section featuring a grid of corporate press releases, leadership articles (such as AI transition plans and sustainability reports), and an interactive search overlay with auto-suggestions. Ensure each article card supports categorization tags and estimated reading times. ``` 6. **Deployment and Edge Optimization** — Deploy the complete portal application to Cloudflare Workers using OpenNext and verify global performance. ``` Configure the Next.js project for deployment on Cloudflare using OpenNext or Cloudflare Pages. Write configuration files, set up environment variables, ensure static asset optimization, and verify that all client-side search filters and modal interactions function correctly in production. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain Name: $12 one-time - AI Coding Assistant Subscriptions: $20 - Total: ~$32 one-time **Ongoing costs (monthly):** - Cloudflare Workers / Pages Hosting: $0-5/mo - Total: ~$3/mo - Paying for the SaaS instead: Free (Publicly Accessible Portal) - Build time: 15-25 hours - AI tool credits: $20 (1 month of Claude Pro / Cursor Pro) - Break-even: N/A (Portfolio & Learning Project) ## Sources - [HSBC Group Corporate Website](https://www.hsbc.com) - [HSBC Investor Relations Regulatory Debt Disclosures](https://www.hsbc.com/investors/fixed-income-investors/regulatory-debt-main-features)