/howd-ai-style-generator

Primary LanguageTypeScriptGNU Affero General Public License v3.0AGPL-3.0

Hands-on Web Dev AI Style Generator

This code supports the "AI Style Generator" series from the Hands-on Web Dev newsletter.

To try the first workshop in this series, start here!

Related series

This is the third series to work on the same application. You can find the previous two series here:

Getting started

  1. Clone or fork this project.
  2. Run npm install to install the dependencies
  3. Run npm run dev to start the dev server
  4. Navigate to localhost:3000 from a web browser

You should see a page that looks like this:

mostly empty page with a pale green background, a button called 'use random quote', and a footer leading to https://newsletter.howd.dev

If you click the button the app will display a random quote from data/quotes.ts, like this:

web page with a pale green background, a button called 'use random quote', a quote that says "if 40 is the new 30 and 50 is the new 40, why can't Thursday be the new Friday", and a footer leading to https://newsletter.howd.dev

Please note: The quotes were taken from Kaggle datasets, and do not necessarily reflect the views of the instructor.

Generate an OpenAI API Key

  1. create an OpenAI account (if you don't have one already)
  2. generate an API key
  3. You may need to make a nominal payment in order to get started. To give you a point of reference: to develop the app for this series, I spent a total of $0.24 total over about six weeks. I have never spent more than $0.05 in one day, and most days it was much less (less than $0.01).

This project uses...