Svelte Kit GET by Id gives me 404 Not Found

I am working on a Svelte - Java Spring - MongoDB CRUD app, were i need to handle the 4 HTTP Requests : GET, POST, DELETE, UPDATE.

I have the following problem. When i try to access the following url : http://localhost:5173/get it gives me all my objs (list of paintings) because my src/lib/api.js get a json of paintings from http://localhost:5173/api/get. The problem lies when i try to access a single painting by Id, where if i try to go to url : http://localhost:5173/get/66465b054183ec71756ed694 it gives me error 404 : not found. But when i tried to access http://localhost:5173/api/get/66465b054183ec71756ed694 it returns the correct object.

So i have narrowed down the problem to the communication between the api and the src/route/get/[id].svelte. So in search of help I will provide the src folder structure and the files src/lib/api.js , svelte.config.js, src/routes/get/+page.svelte & src/routes/get/[id].svelte.

I have tried forums and AI for help, but just found myself going in a circle. Please Help!

App Structure:

src├── app.html├── lib│  ├── api.js│  └── index.js└── routes├──+layout.svelte├──+page.svelte├── delete│  └──+page.svelte├── get│  ├──+page.svelte│  └── [id].svelte├── post│  └──+page.svelte└── update└──+page.svelte

api.js:

export async function getAllPaintings() {    const response = await fetch('/api/get');    if (!response.ok) {        throw new Error('Failed to fetch paintings');    }    return await response.json();}export async function getPaintingById(id) {    const response = await fetch(`/api/get/${id}`);    if (!response.ok) {        throw new Error('Failed to fetch painting');    }    return await response.json();}

get/+page.svelte:

<script>    import { onMount } from 'svelte';    import { getAllPaintings } from '$lib/api.js';    let paintings = [];    onMount(async () => {        try {            const response = await getAllPaintings();            console.log(response); // Log the response to inspect its structure            paintings = response; // Assuming response is an array of paintings        } catch (error) {            console.error('Error fetching paintings:', error);        }    });</script><h1>Paintings</h1><ul>    {#each paintings as painting}<li>{painting.name}</li>    {/each}</ul>

and get/[id].svelte :

<!-- [id].svelte --><script>    import { onMount } from 'svelte';    import { getPaintingById } from '$lib/api';    import { page } from '$app/stores';    let painting = null;    let error = null;    onMount(async () => {        try {            const id = $page.params['*'];            painting = await getPaintingById(id);        } catch (err) {            console.error('Error fetching painting:', err);            error = err.message;        }    });</script>{#if error}<p>{error}</p>{:else if !painting}<p>Loading...</p>{:else}<h1>{painting.name}</h1><p>{painting.description}</p><!-- Add more painting details as needed -->{/if}

svelte.config.js :

import adapter from '@sveltejs/adapter-auto';/** @type {import('@sveltejs/kit').Config} */const config = {    debug: true,    kit: {        adapter: adapter()    }};export default config;

I you need any more information I'd be happy to provide!

I have tried $paga.params.id & $page.paramsI have also tried adding numerous console.logs in both the api function and the [id].svelte but none of them responded.Tried changing svelte.config by adding paths but it just doesn't let the server run so I left it empty.