<h1>Project: Next.js + Tailwind Frontend Modernization (URLs unchanged) + SEO/Security/Accessibility + BlogEngine Update</h1><p><strong>Hosting/Runtime reality</strong></p><p><br></p><ul><li>Current host: shared IIS (no Node runtime).</li><li>Plan: <strong>Next.js (SSG/ISR) built in CI</strong>, <strong>static export deployed to IIS</strong>, <strong>IIS URL Rewrite</strong> keeps all existing URLs identical.</li></ul><p><strong>Absolutely non-negotiable</strong></p><p><br></p><ul><li><strong>All existing URLs and query strings remain EXACTLY the same.</strong></li><li><strong>Next.js + Tailwind</strong> only (no alternative frameworks).</li><li><strong>Mobile-first responsive</strong>.</li><li><strong>SonarQube Community Edition</strong>: delivered code scans <strong>0 Bugs / 0 Vulnerabilities / 0 Code Smells</strong> (vendor/minified assets excluded).</li></ul><h2>Scope</h2><h3>1) Frontend (Next.js 14/15) + Tailwind</h3><ul><li>Implement routes that exactly mirror existing paths (including pretty URLs and any legacy <code>.aspx</code> paths where applicable).</li><li>Static generation (SSG/ISR) → export and deploy to IIS.</li><li>Replace Foundation/jQuery UI with clean Tailwind components; no jQuery.</li></ul><h3>2) SEO &amp; Social (dynamic)</h3><ul><li>Per page: <code>&lt;title&gt;</code>, <code>&lt;meta name="description"&gt;</code>, canonical.</li><li><strong>Open Graph</strong> + <strong>Twitter Card</strong> with dynamic data (state/city/program).</li><li>JSON-LD where applicable (Organization, WebSite, LocalBusiness).</li><li>Implement via Next.js <code>metadata</code> API or <code>next/head</code> in layouts; <strong>values generated dynamically from route params</strong>.</li></ul><h3>3) Security</h3><ul><li><code>web.config</code> headers on IIS: HSTS (if full HTTPS), <code>X-Content-Type-Options=nosniff</code>, <code>Referrer-Policy=strict-origin-when-cross-origin</code>, <code>Permissions-Policy</code> (restrict powerful features), <code>X-Frame-Options</code> or CSP <code>frame-ancestors</code>.</li><li><strong>Content-Security-Policy</strong>: start <strong>Report-Only</strong>, tune for Ads/Analytics/reCAPTCHA/CDNs, then enforce.</li><li>All external <code>target="_blank"</code> links: <code>rel="noopener noreferrer"</code>.</li><li>Cookies (if any) set with <code>Secure; HttpOnly; SameSite</code>.</li></ul><h3>4) Accessibility (WCAG 2.1 AA)</h3><ul><li>Landmarks (<code>&lt;header&gt; &lt;nav&gt; &lt;main id="main"&gt; &lt;footer&gt;</code>), <strong>skip link</strong>, correct heading hierarchy.</li><li>Keyboard-accessible menu (toggle is a <code>&lt;button&gt;</code> with <code>aria-expanded</code>).</li><li>Labeled form fields, <code>alt</code> text, table captions/headers, visible focus, respect <code>prefers-reduced-motion</code>.</li><li>Passes Lighthouse/axe with no critical issues.</li></ul><h3>5) BlogEngine.NET (short-term)</h3><ul><li>Keep BlogEngine in place under existing <code>/blog</code> paths.</li><li>Update/harden: block unused/vulnerable handlers (e.g., <code>pingback.axd</code> if not needed), enforce HTTPS, tighten uploads, strengthen admin.</li><li>Refresh theme to align visually (responsive) and emit OG/Twitter/canonicals.</li><li>(Optional) export posts to Markdown/JSON as a safety net for future migration.</li></ul><h3>6) Code Quality</h3><ul><li>Repo includes <code>sonar-project.properties</code> and run steps.</li><li>SonarQube CE scan shows <strong>clean status</strong> on custom source (exclude minified/vendor/generated).</li></ul><h2>Deliverables</h2><ul><li>Next.js app + Tailwind with <strong>static export</strong> ready for IIS.</li><li><code>web.config</code>: security headers + CSP (Report-Only → Enforced) and any required rewrite rules to preserve legacy URLs.</li><li>Dynamic SEO/social meta for all template routes.</li><li>Updated/hardened BlogEngine with responsive theme.</li><li>A11y + Lighthouse/axe before/after snapshots.</li><li>SonarQube CE config + proof of clean run.</li><li>Deployment + rollback notes.</li></ul><h2>Acceptance criteria</h2><ul><li><strong>URL parity:</strong> every existing URL behaves the same (status/redirect/canonical).</li><li><strong>Responsive:</strong> clean at 360/768/1024/1440.</li><li><strong>SEO/Social:</strong> unique titles/descriptions, correct canonical, OG/Twitter populated from route data.</li><li><strong>Security:</strong> headers present; CSP enforced after tuning; BlogEngine endpoints hardened.</li><li><strong>Accessibility:</strong> no critical a11y issues.</li><li><strong>SonarQube CE:</strong> 0/0/0 on included custom code.</li></ul><h2>“How many pages?” — count by <strong>templates</strong> (not instances)</h2><p>These cover the whole site; instances are data-driven.</p><p><br></p><ol><li><strong>Home</strong> (1)</li><li><strong>State landing</strong> – <code>/Mortgage/Rates/{State}</code> (≈ <strong>50 instances</strong>, 1 template)</li><li><strong>City landing</strong> – <code>/Mortgage/Rates/{State}/{City}</code> (hundreds of instances, 1 template)</li><li><strong>City + Program detail</strong> – <code>/Mortgage/Rates/{State}/{City}/{Program}</code> (program list below, 1 template)</li></ol><ul><li class="ql-indent-1">Programs: <strong>Conventional, Jumbo-Mortgage, FHA, VA, Home-Equity, SBA, Bad-Credit, Reverse-Mortgage</strong> (8 variants via data)</li></ul><ol><li><strong>Program landing (national)</strong> – <code>/Conventional/Mortgage/Rates</code>, <code>/FHA/...</code>, etc. (≈ <strong>8 instances</strong>, 1 template)</li><li><strong>ARM Index / Bond Market</strong> – <code>/ArmIndex/</code> (1 template)</li><li><strong>Calculators</strong> – <code>/Calculators/*.aspx</code> (consolidate to 1–2 shared templates)</li><li><strong>Info pages</strong> – <code>/Info/*.aspx</code> (About, Privacy, Contact, Help, Feedback, Tell a Friend) (1 template)</li><li><strong>Credit/Insurance sections</strong> – <code>/Insurance/</code>, <code>/CreditCards/</code>, <code>/CreditReports/</code>, <code>/credit-repair/</code> (1–2 templates)</li><li><strong>Search/Results</strong> (Google CSE/internal) (1 template)</li><li><strong>BlogEngine</strong> – keep existing structure; update theme (index, post, category/tag, archive, feed) (1–2 templates)</li></ol><p><strong>Total templates to build/update:</strong> <strong>~10–12</strong>.</p><p> <strong>Estimated instances:</strong></p><ul><li>States: ~50.</li><li>Cities: <strong>data-driven</strong> (hundreds).</li><li>City+Program pages: <strong>8 × #cities</strong> (same template).</li><li>Program landings: ~8.</li><li>Info/Calculators: handful each.</li></ul><blockquote>Pricing should be <strong>per template</strong>, with dynamic instances included via data (no per-page hand coding).</blockquote><h1><br></h1><p><br></p><p><br></p>

Truelancer

Front End Modernization

About the Client

Useful links

Company

Information

Content Writers

Freelancers

Freelance Jobs

Online Jobs

Designers

Developers

Translations