Skip to content

[FEATURE]: Multi-Document Template Directory Restructuring & Nested Dynamic Routing #74

@Gautam25Raj

Description

@Gautam25Raj

Affected Apps / Packages

Site (apps/site)

Is your feature request related to a problem?

The current template directory under /templates only shows resume templates and renders them all on a single page. With cover letters now supported and more document types planned for the future, the current layout is inadequate.

Furthermore, Next.js routing will conflict if we try to keep template details at /templates/[templateId] while using /templates/[docType] for listing pages, since both resolve as a single dynamic segment (/templates/[param]).

Describe the solution you'd like

We want to refactor the template configurations, folder directory structure, and routing to support server-rendered, dedicated listing and details pages for multiple document types.

1. Rename & Update Template Configurations (apps/site/config/templates.ts)

  • Rename current template IDs to follow a standardized, type-scoped naming convention (e.g., resume-executive-clarity, resume-precision-ats, etc.).
  • Expand the configurations to include detailed, server-rendered fields (e.g., design vision, typography choices, structure breakdown, and custom metadata for each template).
  • Model the configurations so adding new document types (such as cover-letter, formal-letter, invoice, or portfolio) in the future is as simple as adding a new object to templateSummaries.

2. Restructure Next.js Dynamic Routing

To avoid dynamic path conflicts and support nested URL structures, we will implement the following routing hierarchy under apps/site/app/templates:

  • /templates (Index Page Portal):

    • Serves as the high-level portal listing all supported document types (Resumes, Cover Letters, and future placeholders).
    • Displays descriptive index cards detailing features, counts, and CTAs (e.g., "Explore Resume Templates" linking to /templates/resume).
    • Does NOT display individual templates.
  • /templates/[docType] (Dynamic Category Listing):

    • Dynamic route (e.g., /templates/resume, /templates/cover-letter) displaying all template cards matching that specific document type.
    • Fully server-rendered with specialized SEO copy, header layout, and filtering tailored to that document type.
  • /templates/[docType]/[templateId] (Dynamic Template Details & Preview):

    • Nested dynamic route (e.g., /templates/resume/resume-executive-clarity) showing comprehensive detail previews of a single template.
    • Displays deep server-rendered detail sections (design layout specifications, typography tags, layout structure details, and target audience).
    • Contains the primary "Use This Template" CTA pointing to the application editor with parameters populated.

Describe alternatives you've considered

  • Single Page with Tab Toggles: We rejected using client-side tab toggles. Dynamic nested routes (e.g., /templates/resume and /templates/cover-letter) are far superior for SEO indexing, search intent targeting, page load performance, and cleaner server rendering.

  • Flatter Dynamic Routing (/templates/[templateId]): Rejected due to segment conflict. Next.js cannot distinguish between /templates/resume (where resume is a category) and /templates/executive-clarity (where it is a template ID) if both live at the same route nesting depth. The nested route format /templates/[docType]/[templateId] resolves this completely.

Additional Context

Proposed File Structure Changes:

apps/site/app/templates/
├── page.tsx                     # Portal page showing document types
└── [docType]/
    ├── page.tsx                 # Lists templates for specific docType (e.g. /templates/resume)
    └── [templateId]/
        └── page.tsx             # Detail / preview page for a single template (e.g. /templates/resume/resume-executive-clarity)

Implementation Checklist:

  • Update templateSummaries schema and entries in apps/site/config/templates.ts to include standardized IDs and rich description fields.
  • Move /templates/[template]/page.tsx to /templates/[docType]/[templateId]/page.tsx and update dynamic parameter resolution.
  • Create /templates/[docType]/page.tsx for categorised template grids.
  • Update /templates/page.tsx to render the document type selection portal.
  • Audit and rewrite canonical URLs, metadata fields, and sitemap configuration to align with the new nested routes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or requestfrontendUI/client-side code
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions