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:

• React Components
• Next.js Data Fetching

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:

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

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...

• Next.js
• TypeScript
• CSS modules
• Josh W. Comeau's delightful file structure