implement the POST to the server. in particular, to url = API_ENDPOINT + "volunteer".

Refer to https://github.com/selangor-no-1/hack4good/tree/main/ui/src/routes/events/create
to see how I have implemented it for creating events

with the fake data we have plot metrics, charts, etc on the main route /

In the Django app we abide by the Python convention of snake case (start_time), but in the SvelteKit app we abide by the JavaX convention of camel case (startTime).

As a result, there is a mismatch when trying to duplicate types across the frontend and backend. For example:

type Event = {
  startTime: string
}

whereas the payload returned by the server looks like

{
  start_time: ...
}

so when trying to access attributes in the markup such as:

<script lang="ts">
  import type { Event } from "$lib/types";
  const { event } : { event: Event[] } = data;
</script>

<p>{event.start_time}</p>

we will get Typescript errors.

Todo: Change everything to either camel/snake case.

populate volunteers based on responses / provide a view for the responses.

• server
• UI

endpoint for this already exists

/volunteers should display a data-table of all the volunteers (ideally including pagination)

we will need to fetch the list of all volunteers by sending a GET request to API_ENDPOINT + "volunteers/".

volunteer/[slug] should list out their previous events and their total manhours

we have a new delete endpoint. implementation should be via form actions as usual

for every form response
we will pass it formatted as Markdown like this:

# Form Title

Q: What is your name?
A: Hew Li Yang

Q: How was the event?
A: Horrible
.
.
.

to a LLM and ask it to give an ordinal $\text{satisfaction} \in [1,5]$

• server
• ui