Implementing Keycloak Authentication in SvelteKit

Explaining how to integrate Keycloak using Sveltekit as frontend.

2024-01-24 · 4 min · Willy Setiawan

Building Tabunganku Homepage by Implementing Sveltekit and Chart.js

I have completed the implementation of most of the main page features. It can load recent transactions and create a pie chart based on these transactions. Furthermore, the page displays both the total earnings and expense of the day. There is one feature that I have not completed yet, and that is the ability to view transactions on a date other than the current date. Display Here’s what it looks like if there is available data: To ensure good accessibility, I use Accessible Colors to adjust the red and green text colors....

2023-07-31 · 11 min · Willy Setiawan

Implement Add Transaction and Add Category Pages in Tabunganku

I designed both the Add Transaction and Add Category pages to be similar. Both pages utilize the form tag. Inside the form element, I created two columns to separate the label and the input fields. Svelte Directory Structure In Svelte, the directory represents the URL. For example, if a website has a page /foo/bar, we need to create a new directory in Svelte src/routes/foo/bar and create a +page.svelte and any other files needed....

2023-07-20 · 6 min · Willy Setiawan

Implement Page Layout for Tabunganku using Sveltekit

To develop the front-end side of Tabunganku, I am faced with numerous options. Based on Stack Overflow Survey, most developers used React, jQuery, or Angular to develop their front-end. I searched around and discovered Svelte. I think it is an interesting technology because people keep hyping it up. Page Layout Svelte allows me to create a separate page just for layout so that the header and sidebar will be consistent across every page....

2023-07-17 · 1 min · Willy Setiawan