O programa edita o db.json, mas não consegue ler e usar o template pra colocar na tela

Fiz o projeto da aula e estou tentando fazer um outro relacionado (um CRUD que cria tarefas/objetivos para o ano). Ele deveria receber os inputs de "goalName" , "goalNumber" (um número) e um "timeMeasure" (select com "dias","mêses" etc). Quando uso a web application pra criar uma nova atividade, ele cria e edita o db.json, mas não usa o template criado para adcionar a atividade na tela. Segue o código:

client-service.js:

const taskList = () =>  {
    return fetch(`http://localhost:3000/profile`)
    .then(resposta => {
        if(resposta.ok){
            return resposta.json();
        }
        throw new Error('Cant list the tasks');
    })
}

const createTask = (goalName,goalNumber,timeMeasure) => { 
    return fetch(`http://localhost:3000/profile`, {
        method: 'POST', 
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify({
           goalName: goalName,
            goalNumber: goalNumber,
            timeMeasure: timeMeasure

        })
    })
    .then( resposta => {
        if(resposta.ok){
            return resposta.body
        }
        throw new Error('Cant create Task')
    })
}

const removeTask = (id) => { 
    return fetch(`http://localhost:3000/profile/${goalName}`, {
        method: 'DELETE'
    })
    .then( resposta => { 
        if(!resposta.ok){
        throw new Error('Cant delete task')
        }
    })
}



export const clientService = { 
    taskList,
    createTask, 
    removeTask,


}

taskList-controller.js (lista de tarefas):

import { clientService } from "../service/client-service.js";
export const createNewLine =(goalName,goalNumber,timeMeasure)=>{
    const newLine = document.createElement('tr');
    const newLineContent =`
    <td class="tdGoalName" data-td>${goalName}</td>
    <td class="tdCurrent" data-td><input class="currentNumber" name="currentNumber" type="number" data-currentNumber> of</td>
    <td class="tdGoalNumber" data-td>  ${goalNumber}</td>
    <td class="tdTimeMeasure" data-td>  ${timeMeasure}</td>
    <td class="tdDeleteButton" data-td><button> delete</button></td>
    `

    newLine.innerHTML=newLineContent;
    newLine.dataset.id =id;
    return newLine;  
}
const table = document.querySelector('[data-table]');

const render = async () =>  {
    try {
        const taskList = await clientService.taskList();
        taskList.forEach(element => {
            table.appendChild(createNewLine(element.goalName,element.goalNumber,element.timeMeasure));
    })
    }
    catch{
        console.log("CONTROLLER -Nothing in task list");

    }

}

render();

createNewTask.js (cria nova tarefa):

import { clientService } from "../service/client-service.js";

const createTaskForm = document.querySelector('[data-form]');

createTaskForm.addEventListener('submit',async(event)=>{
    event.preventDefault();
    try{
        const goalName = event.target.querySelector('[data-goalName]').value;
        const goalNumber =event.target.querySelector('[data-goalNumber]').value;
        const timeMeasure =event.target.querySelector('[data-timeMeasure]').value;

        await clientService.createTask(goalName,goalNumber,timeMeasure);


    }
    catch {
        console.log("CONTROLLER-cant create task")

      }


})

O que poderia fazer para que o web app leia o db.json(onde as tasks estão sendo incluídas) e use o template para criar o html da nova task?