Forem: Heidi Fryzell

My First App Built with Google AI Studio

Heidi Fryzell — Sat, 22 Nov 2025 13:43:47 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I am very interested in birds, particularly those that live around me. I wanted to make an app that would generate a picture of a bird and then quiz me on the birds. I took it a step further to let the user select a state in the United States and only use birds that are native to that state.

The initial prompt:

Please create an app that queries the user to for a name of a state in the United states, then it generates one of the birds that has been observed in that state, generates an image of the bird with Imagen then creates a quiz for the user, four multiple choice options one of them is the bird's actual common name the others are similar birds found in the state the user entered. If the user gets the multiple-choice question right, they get a point. The game ends after 10 questions. The score is displayed in the app and incremented as the game progresses. When the game is over, a button to play again appears.

I had to refine things a little. The logo the AI generated did not look at all like a bird. Also, when you responded to a question, the answer popped up in a modal, but it didn't stay there very long. I wrote another prompt to let the user advance to the next question.

Demo

Demo applet - Google Account and signing in to Google Studio required

Home Screen of Avian Explorer App

Quiz Question Screen of Avian Explorer App

My Experience

It was very surprising how easy it was to build this app with just prompts. It worked very well in Google AI Studio. At a certain point I hit quotes on the Imagen model. I used Imagen because that is the image model that was used in the sample project. Apparently, Imagen costs significantly more to run, so even in Studio the usage is restricted. I think if I used Flash I would not have hit the limits but the images wouldn't have been as nice.

I had some issues when I downloaded the app locally. It seemed like the AI API was making too many requests at once and it would not load the images. I would have to do more research and optimization to get the app to work locally. That was a little disappointing. Overall, the speed of creating an attractive prototype app was impressive.

Museum of Candy!

Heidi Fryzell — Sun, 13 Nov 2022 01:02:02 +0000

Spent my Saturday reviewing Bootstrap with Colt Steele.

This is my version of the museum of candy

I used Bootstrap 5.2, but I had to pull in the JQuery to get the sticky navbar on scroll to work.

Colt is the best teacher. Take his courses!

1.3 million students can't be wrong. 🧑🏼‍💻

Empty Cache and Hard Reload in Chrome devTools

Heidi Fryzell — Sun, 23 Jan 2022 21:29:13 +0000

Sometimes it is the little things. I was having a really hard time with some javaScript I was working on. It seemed like my code was correct but I couldn't get it to work. I added in some console.logs and they were not working either.🤷🏻

Then I discovered if you hold down the refresh icon at top of browser when you are in Chrome devTools, you will have an option to do a hard refresh and empty cache.💥

HTML Same Page Links

Heidi Fryzell — Wed, 19 Jan 2022 14:06:14 +0000

https://heidi37.github.io/dev-playground/days/4/4.html

Today I added top navigation that links to anchors within the page. I was having a little trouble with the links as they were jumping to the correct content but the content was falling behind my header.

I found this stackoverflow that helped tremendously.

The bottom line was, use anchor tags, don't link to ids on existing elements. And then put an "anchor" class on those anchor tags with the following CSS applied.

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

day 4

Change GitHub Repo origin from https to SSH - Day 3

Heidi Fryzell — Mon, 17 Jan 2022 17:36:25 +0000

Yesterday I set up Git and GitHub on my PC to work on my dev-playground project.

I was connecting to the remote origin with https.

I soon found out that every time I wanted to push to GitHub I had to enter my personal access token. Yikes!

A better way is to use SSH.

🤦‍♀️ Ah-ha Moment

If you use the SSH agent you don't have to enter a passphrase every time you connect with GitHub. I need to do this on my Mac! I have been wasting a lot of time entering that passphrase... 😳

Using GitHub on Multiple Computers - Day 2.0

Heidi Fryzell — Sun, 16 Jan 2022 14:31:08 +0000

I have two computers and I want to work on both of them to simulate working on a team. I want to get used to pulling code not just pushing it.

I already had Git installed on my Mac. This morning I set up my PC to work on my dev-playground repo. Here are all the steps I took...

Windows Subsystem for Linux

I want to use Linux Commands in the command-line so I installed the Windows Subsystem for Linux (WSL). In Powershell, opened as an administrator, I ran:



wsl --install

This installs Ubuntu and sets up an Ubuntu file system in Windows.

I will keep my web projects in the Ubuntu file system directory



\\wsl$\Ubuntu\home\heidi

I am running my command line from the "Ubuntu App" on Windows but you can also install Windows Terminal for a fancier interface and to run other terminals like Powershell, etc... all from one place.

Install git

I was inspired to install the WSL so that I could install git with just two commands:



sudo apt-get update

"apt" is a package manager and this command "updates the package lists for upgrades for packages that need upgrading, as well as new packages that have just come to the repositories" ~askubuntu.com

Then install git:



sudo apt-get install git

confirm success:



git --version

If you get a version number, it worked. 🙌

Configure username and email that will be tagged on your commits:



$ git config --global user.name "Heidi Pc"



$ git config --global user.email "heidi@test.com"

Clone GitHub Repo to PC

Clone the existing repo to PC:



git clone https://github.com/heidi37/dev-playground.git

Commit/Push/Switch Computers/Pull

Make a change and commit it from the PC. Push it to GitHub



git push

You will be prompted for a username and password when you do this. You need to use a GitHub personal access token as your password.

And here is my first commit/push from my PC:

Do a pull request on the Mac to pull down the new commit.



git pull

This pulled down all the changes I made from my PC.

I am sure a some point I will get into trouble with not keeping everything pushed and pulled and in sync. When I run into trouble I will write about it on dev.to. 🤣

❗ IMPORTANT - NEWBIE ERROR ❗

In order to run the Ubuntu/Linux command line to communicate with Git, GitHub, etc... You need to run WSL.exe, every time you start your computer. I was getting all these errors because you will see an Ubuntu App in your programs list but you can't run it without first having WSL running.

Do This: Run WSL.exe

Not This: Do Not Run Ubuntu

Resources

Colt Steele video snippet about WSL
Atlassian - Install Git

Hello World - Day 1

Heidi Fryzell — Sat, 15 Jan 2022 13:55:59 +0000

I haven't committed to GitHub in a few months as I started a new job, not a coding job. My goal in the new year is to practice coding as much as possible. I am hoping if I document my progress here it will keep me honest.

Today I created a new repo on GitHub and connected it to my local repo.

Created repo on GitHub

Created local repo and navigated to it with command line
Initialized repo

git init

Created a local index.html file
Initial Local Commit

git add .
git commit -m "first commit"

Linked local repo to GitHub repo

echo "# dev-playground" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:heidi37/dev-playground.git
git push -u origin main

Made a small change to the HTML
Checked git status

git status

Add changed files to commit

git add .

Commit file locally

git commit -m "added <p> to home page"

Push local changes to GitHub

git push origin main

Made GitHub page public

Repo > Settings > Pages

Select Branch (in this case I'm only using 'Main')

Click Save

https://heidi37.github.io/dev-playground/

The page will evolve so for posterity:

Blackjack Anyone?

Heidi Fryzell — Wed, 06 Oct 2021 14:11:42 +0000

I am trying out the Scrimba learning platform to practice my skills. I really enjoy the interface where you can stop the tutorial and code right on the same screen. Brilliant!

I am working may way through the Front End Developer career path because I want to solidify what I know and have it become more muscle memory and less Googling.

Here is a WIP Blackjack Game. I am coding it outside of the Scrimba platform so I can push it to GitHub and share with the world.

Front End Mentor Clipboard Landing Page Challenge

Heidi Fryzell — Sun, 19 Sep 2021 15:02:29 +0000

One of the hardest things I find about learning web development is there are so many tutorials and online learning resources, but I need to make time in between all the learning to actually CODE.

I am trying to always have some kind of project going on the side in addition to learning all the theory. 🙄

Here is the Challenge.

Here is my Code.

🏺Writing A Post With Markdown

Heidi Fryzell — Sat, 18 Sep 2021 00:38:11 +0000

I am taking a course on Scimba about ~~HTML~~ markdown.

The course asks the students to create a DEV.TO post using markdown. So this is my post.

"Get Good, Get Great, Get Better" - Dylan Israel

The three best online coding resources are:

Scrimba
Team Treehouse
freeCodeCamp

You can learn cool stuff like this:

<h1>Coding is fun</h1>
<p>You will like it.</p>

let number = 1;
number +=1;
console.log(number);

Here is an image I grabbed on unsplash:

h3 About Me

I am a technology professional who really loves to code and learn new things. In my free time I like to run and bike.

Frontend Mentor: First Challenge - First Solution

Heidi Fryzell — Fri, 10 Sep 2021 19:43:55 +0000

Hello dev.to community. I accidentally signed up for dev.to when I was trying sign up for Frontend Mentor. 🤷

This is my first FrontEnd mentor project and I really enjoy their platform. I didn't think I would but I really like crafting the README.md and reflecting on the challenges I faced during the project and how I overcame them.

I am test driving the free version but I think I might spring for the PRO version so I can use the Figma files and get more exact measurements from the comps.

Here is my solution:

If you are on the platform, feel free to give me some feedback! 🙏