Basic course website issue

Hi! I have this assingment to create a website containing the courses that the student is attending, the possibility to add new courses to the list(which works so far), and the possibility to add questions regarding each corse under the direct link. But i have a problem in creating a proper file for the particular course’s page to work. I’m working with Svelte and js, here’s my folder structure for frontend:.
├── lib
│ └── components
│ ├── QuestionForm.svelte
│ ├── QuestionItem.svelte
│ ├── QuestionList.svelte
│ └── Questions.svelte
├── routes
│ ├── courses
│ │ ├── [id]
│ │ │ ├── questions
│ │ │ │ └── [qid]
│ │ │ │ ├── +page.js
│ │ │ │ └── +page.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ └── +page.svelte
| ├── +layout.server.js
| ├── +layout.svelte
│ └── +page.svelte
├── app.css
├── app.html
└── hooks.server.js I could provide more files but which ones should i focus on? The ones in [qid] directory? Sorry if my question is too general, i’m new to this :)
Here's my
src\routes\courses[id]\questions[qid]+page.svelte

<script>
    export let data;
    let newAnswer = '';

    const addAnswer = async () => {
        if (!newAnswer.trim()) return;
        const res = await fetch(`${import.meta.env.PUBLIC_INTERNAL_API_URL}/courses/${data.courseId}/questions/${data.question.id}/answers`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text: newAnswer })
        });
        if (res.ok) {
            location.reload();
        } else {
            alert('Error adding answer');
        }
    };

    const upvoteAnswer = async (aid) => {
        const res = await fetch(`${import.meta.env.PUBLIC_INTERNAL_API_URL}/courses/${data.courseId}/questions/${data.question.id}/answers/${aid}/upvote`, {
            method: 'POST'
        });
        if (res.ok) {
            location.reload();
        } else {
            alert('Error upvoting');
        }
    };
</script>

<h1>Question: {data.question.text}</h1>

<h2>Answers</h2>
<ul>
    {#each data.answers as answer}
        <li>
            {answer.text} — {answer.votes} votes
            <button on:click={() => upvoteAnswer(answer.id)}>Upvote</button>
        </li>
    {/each}
</ul>

<h2>Add Answer</h2>
<input bind:value={newAnswer} placeholder="Your answer..." />
<button on:click={addAnswer}>Submit</button>