Hardcoded Navigation & Route Logic

[codeCraft-Ritik]

Summary

Routes are constructed using string interpolation throughout the UI, making the application fragile to URL structure changes.

Full Description

Components like CourseVisitCard.svelte and MainNavigator.svelte manually build strings like /course/${id}. If the folder structure in src/routes changes (e.g., moving /course to /reader), the app will break in dozens of places.

How to Resolve

1. Create a central route-utils.ts file.
2. Define functions for every major route.
3. Replace hardcoded backticks with these function calls.

Code Fix Create src/lib/services/course/utils/routes.ts:

export const paths = {
  course: (id: string) => `/course/${id}`,
  topic: (courseId: string, topicId: string) => `/topic/${courseId}/${topicId}`,
  lab: (courseId: string, labId: string) => `/lab/${courseId}/${labId}`,
  live: (courseId: string) => `/live/${courseId}`
};

Then in CourseVisitCard.svelte :

<script>
  import { paths } from "$lib/services/course/utils/routes";
</script>

<a href={paths.course(course.id)}>

[codeCraft-Ritik]

This abstraction allows you to implement "Deep Linking" or change your URL SEO strategy in the future by editing only one file.