Building an AI-Powered Alt Text Generator with Angular, Firebase AI Logic, and Gemini 3

by

Reading Time: 5 minutesIn this project, I stepped out of my comfort zone to upgrade from Gemini 2.5 to Gemini 3 in Vertex AI. The goal was to build an intelligent Image Alt Text Generator that goes beyond simple description and hashtags. By leveraging Gemini 3.0 (Pro Preview), this application analyzes an image to generate alternate text, hashtags, … Read more

Day 29 – Add a Loader and Error State

by

Reading Time: 5 minutesOn day 29, I add a loader (A <div>Loading …</div>) to show that the page is loading the data. It is incredibly easy in Angular 20 because it is a built-in functionality in httpResource. In Vue 3, I installed vueuse and applied the useFetch composable to initiate the network requests. In SvelteKit, a loader can be implemented with the navigating object in $app/state. It … Read more

Day 28 – Retrieve the Post Author

by

Reading Time: 4 minutesOn day 28, I use the userId of a post to call the users endpoint to retrieve the user name. In Vue 3, I created another composable to return a user Object with a name property. In Angular 20, it is a User service that uses the experimental httpResource to retrieve a user when the post is updated. In SvelteKit, I … Read more

Day 27 – Create a simple blog page

by

Reading Time: 5 minutesOn day 27, I completed Vue 3 Composition API course to build a simple blog to show blog posts. The site calls https://jsonplaceholder.typicode.com/posts to retrieve all the posts and display the users. The blog posts are built in 3 parts: Install Tailwindcss Refer to https://tailwindcss.com/docs/installation/framework-guides to install TailwindCSS for Vue 3, Svelte 5 and Angular. Copy Vue boilerplates Copy the boilerplates … Read more

Day 25 – Alert Component Part 4 – Update the Alert Bar to reopen closed alerts

by

Reading Time: 5 minutesComponent Fundamentals with JavaScript Frameworks On day 25, I extend the Alert Bar component to display buttons of closed alerts. Then, users can either reopen all the closed alerts or a specific type of alert. Track Closed Alerts Vue 3 application In the AlertBar component, use the defineModel to create a closedNotifications ref of type string[]. The default value of the closedNotifications is an … Read more

Day 24 – Alert Component Part 3 – Add an Alert Bar to change styles

by

Reading Time: 10 minutesOn day 24, I create an Alert Bar component to show or hide the close button, apply a new style to the alerts, and change their direction. Create a Close SVG Icon Vue 3 application Create an icons/CloseIcon.vue Display the close icon in the alert component Import the CloseIcon and add the <CloseIcon> within the <template> tags to render the close … Read more

Day 23 – Alert Component Part 2 – Dynamic Rendering of SVG Icons

by

Reading Time: 3 minutesComponent Fundamentals with JavaScript Frameworks On day 23, I render the alert SVG icons dynamically because dynamic rendering is more maintainable, scalable and efficient. I create components for the SVG icons and render the appropriate icon component by the alert type. Framework Method Vue 3 :is attribute with the Svelte 5 Dynamic component is capitalized … Read more

Day 22 – Alert Component Part 1 – Alert List and Alert Components

by

Reading Time: 9 minutesComponent Fundamentals with JavaScript Frameworks On day 22, I started working on the Alert Component exercise in Vue 3, Angular 20, and Svelte 5. The Alert component uses the DaisyUI Alert component and TailwindCSS utility classes for styling. I also learned about two-way binding between components using defineModel in Vue 3.5+. I also learned that Svelte 5 … Read more

Day 21 – Deploy the Github Profile Project to Github Pages

by

Reading Time: 4 minutesOn day 21, I will deploy all the demos to Github Page, because Github Page is free and can be automated by Github Actions. When an Angular application does not contain sensitive environment variables such as secret keys, ng deploy is more convenient than Github Actions. When it has sensitive environment variables, I can only build the … Read more