Landing Page for Precious Metal Pricing History

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

What I Built

I built a landing page for viewing the live or historic prices for precious metals like gold, silver and platinum in fiat currencies such as USD, GBP and the like.

I used one prompt summarizing my requirements as show below:

I would like to create a landing page for a site that displays historical accurate charts with a minimum\
 period range over the past 5 years for precious metals as Gold, silver, platinum in terms of USD and ot\
her international currencies. Use Imagen for generating attractive images specifically for authentically\
 representing the metal bars and coins where appropriate. I do not want excessive imagery and avoid face\
s of animals or humans or other creatures. I prefer the images to convey professionalism and present the\
 allure of precious metals without overdoing it. I want the code to be in HTML, CSS and Javascript only.\
 That is, any script used must be in pure javascript with .js extensions and I do not want typescript fi\
les with .ts extensions. Also, provide documentation with `README.md` for a high level overview and `INS\
TALL.md` for installation specific instructions.

I requested the Imagen tool to generate relevant images.

Demo

The app is deployed at https://aureum-precious-metals-analytics-1003162804902.us-west1.run.app/

My Experience

Some of the key takeaways are:

• The Google AI studio has integrated multiple tools to speed up building an application from scratch.
• The tool defaults to using .ts or .tsx extensions despite requesting it to avoid these approaches.
• The tool also defaults to using React despite not requesting it.