Next.js 15 Front-End Rebuild
Budget: $1,500 – $3,000 SGD
MPORTANT: Custom proposals only. Automated responses will be rejected.
1. Project Overview: I require an elite Next.js developer for a 15 - 30-day intensive production sprint to rebuild the core components of our financial products comparison platform. You will replace our flawed frontend with a modern, server-first architecture, delivering a production-ready, high-performance experience.
Project Type: Component-Based Frontend Rewrite
Core Tech: Next.js 15 (App Router), TanStack (Query, Table, Virtual), Zustand, ShadCN/UI, Tailwind CSS
Timeline: 15 - 30 Days (Hard Deadline)
Commitment: Full-time (40+ hours/week)
2. The Challenge: Sophisticated Backend, Flawed Frontend: A stable PayloadCMS backend with a powerful dynamic schema system. Pages are assembled from CMS-managed blocks. Products can have 100-200+ fields depending on their category. The backend filtering API is already built and works perfectly.
The Problem: The current frontend is a slow, client-side application built improperly within the App Router (100+ "use client" files). It lacks modern data management (no TanStack), uses outdated styling (SCSS), and has severe performance (8s+ load times) and SEO issues.
3. Core Deliverables (30-Day Production Sprint) Your primary responsibility is to build 10 core, reusable block components that are performant, server-rendered, and scalable. Including five template layout - 1. Home Page Layout 2. Article Category page layout 3. Individual Article Page layout 4. Product Listing Page and 5. Individual Product Page
Server-First Block Architecture: Rebuild all core blocks (Product Listings, Hero, FAQ, Header, Footer, etc.) as Server Components, fetching data via the PayloadCMS Local API. Ensure the architecture supports future layout variations (e.g., grid/list/carousel views). Where needed, guide the backend developer to optimise the structure of the blocks for efficiency and speed.
Complete TanStack Implementation: TanStack Query: Replace all useEffect fetching for robust server state management. TanStack Table: Create dynamic tables that can handle 100-200+ columns based on the product schema. TanStack Virtual: Implement virtual scrolling to smoothly render lists of 500+ products.
Filter UI & State Management: Build the interactive filter UI using customized ShadCN/UI components. Connect the UI to our existing, functional backend filtering API.
Use Zustand for all client-side UI state (e.g., filter panel visibility, modals), replacing Redux. Implement URL-based state for shareable filter links.
Full Tailwind CSS & Custom ShadCN/UI Migration: Replace all SCSS with Tailwind CSS. Use ShadCN/UI as a base, but apply heavy customization to match our brand identity. The final look must be unique, not a generic ShadCN theme.
Comprehensive SEO & Structured Data: Implement server-side generated JSON-LD schemas for all relevant blocks (Product, ItemList, BreadcrumbList, etc.) to ensure eligibility for Google Rich Snippets.
4. Required Expertise (Non-Negotiable) Expert in Next.js App Router, Server Components, and block-based architectures. Production experience with the full TanStack suite (Query, Table, Virtual). Advanced Tailwind CSS and ShadCN/UI customization skills. Proficient in Zustand for UI state management. Experience handling dynamic schemas and large, complex data objects in the UI.
Proven ability to deliver high-quality, production-ready code on a tight deadline, effectively using AI coding tools (Copilot/Cursor).
5. How to Apply Your proposal MUST include: Opening Statement: "I can deliver this 15-30 day block-based production rebuild with TanStack, Zustand, and heavily customized ShadCN/UI."
Portfolio: Links to 2+ live, production Next.js App Router sites. Specific examples of complex data tables, virtual scrolling, and UIs built from a headless CMS. A link to a project where you heavily customized ShadCN/UI.
Your Approach: Briefly outline your plan for handling the dynamic schemas in TanStack Table and customizing ShadCN/UI. And share a few examples of your experience with Next.JS (Websites / Platforms)
Terms: Confirm your full-time availability and provide a fixed-price quote for the 15 - 30-day deliverable.
More details will be shared later.
Deliverables
Rebuild frontend using Next.js 15
Integrate TanStack for state management
Implement Tailwind for styling
Implement Zustand
Ensure responsive design
Optimize performance for speed and seo
Deploying the correct schema and structured data for SEO, Google Rich Snippets and Generative AI Optimization
1. Project Overview: I require an elite Next.js developer for a 15 - 30-day intensive production sprint to rebuild the core components of our financial products comparison platform. You will replace our flawed frontend with a modern, server-first architecture, delivering a production-ready, high-performance experience.
Project Type: Component-Based Frontend Rewrite
Core Tech: Next.js 15 (App Router), TanStack (Query, Table, Virtual), Zustand, ShadCN/UI, Tailwind CSS
Timeline: 15 - 30 Days (Hard Deadline)
Commitment: Full-time (40+ hours/week)
2. The Challenge: Sophisticated Backend, Flawed Frontend: A stable PayloadCMS backend with a powerful dynamic schema system. Pages are assembled from CMS-managed blocks. Products can have 100-200+ fields depending on their category. The backend filtering API is already built and works perfectly.
The Problem: The current frontend is a slow, client-side application built improperly within the App Router (100+ "use client" files). It lacks modern data management (no TanStack), uses outdated styling (SCSS), and has severe performance (8s+ load times) and SEO issues.
3. Core Deliverables (30-Day Production Sprint) Your primary responsibility is to build 10 core, reusable block components that are performant, server-rendered, and scalable. Including five template layout - 1. Home Page Layout 2. Article Category page layout 3. Individual Article Page layout 4. Product Listing Page and 5. Individual Product Page
Server-First Block Architecture: Rebuild all core blocks (Product Listings, Hero, FAQ, Header, Footer, etc.) as Server Components, fetching data via the PayloadCMS Local API. Ensure the architecture supports future layout variations (e.g., grid/list/carousel views). Where needed, guide the backend developer to optimise the structure of the blocks for efficiency and speed.
Complete TanStack Implementation: TanStack Query: Replace all useEffect fetching for robust server state management. TanStack Table: Create dynamic tables that can handle 100-200+ columns based on the product schema. TanStack Virtual: Implement virtual scrolling to smoothly render lists of 500+ products.
Filter UI & State Management: Build the interactive filter UI using customized ShadCN/UI components. Connect the UI to our existing, functional backend filtering API.
Use Zustand for all client-side UI state (e.g., filter panel visibility, modals), replacing Redux. Implement URL-based state for shareable filter links.
Full Tailwind CSS & Custom ShadCN/UI Migration: Replace all SCSS with Tailwind CSS. Use ShadCN/UI as a base, but apply heavy customization to match our brand identity. The final look must be unique, not a generic ShadCN theme.
Comprehensive SEO & Structured Data: Implement server-side generated JSON-LD schemas for all relevant blocks (Product, ItemList, BreadcrumbList, etc.) to ensure eligibility for Google Rich Snippets.
4. Required Expertise (Non-Negotiable) Expert in Next.js App Router, Server Components, and block-based architectures. Production experience with the full TanStack suite (Query, Table, Virtual). Advanced Tailwind CSS and ShadCN/UI customization skills. Proficient in Zustand for UI state management. Experience handling dynamic schemas and large, complex data objects in the UI.
Proven ability to deliver high-quality, production-ready code on a tight deadline, effectively using AI coding tools (Copilot/Cursor).
5. How to Apply Your proposal MUST include: Opening Statement: "I can deliver this 15-30 day block-based production rebuild with TanStack, Zustand, and heavily customized ShadCN/UI."
Portfolio: Links to 2+ live, production Next.js App Router sites. Specific examples of complex data tables, virtual scrolling, and UIs built from a headless CMS. A link to a project where you heavily customized ShadCN/UI.
Your Approach: Briefly outline your plan for handling the dynamic schemas in TanStack Table and customizing ShadCN/UI. And share a few examples of your experience with Next.JS (Websites / Platforms)
Terms: Confirm your full-time availability and provide a fixed-price quote for the 15 - 30-day deliverable.
More details will be shared later.
Deliverables
Rebuild frontend using Next.js 15
Integrate TanStack for state management
Implement Tailwind for styling
Implement Zustand
Ensure responsive design
Optimize performance for speed and seo
Deploying the correct schema and structured data for SEO, Google Rich Snippets and Generative AI Optimization