Workshop context
Before this workhsop
- The previous workshop in this series created an endpoint that serves (for now) a random quotation.
This workshop
- This workshop will use the
Button
andCard
components and the endpoint to create a UI that displays a random quote.
After this workshop
- The next workshop in this series will handle the loading state for fetching the quote.
Workshop goal
By the end of this workshop you should have the following:
- A button that, when clicked, contacts the route handler to fetch a random quotation.
- note: the
Home
component (found in src/app/page.tsx) is the main component for this app. You can useHome
as the parent component for the UI in this workshop. - JSX returned from the
Home
component will show up at the top level of the app.
- note: the
- A
Card
that displays the returned quotation.- for now, you can choose whatever colors you want for the
textColor
andbackgroundColor
props; in the next series, we will generate colors appropriate to the quote using the OpenAI Node SDK - don’t worry about handling errors; we’ll take care of that in a future workshop
- it’s fine to display the
Card
even if you haven’t received the quote from the server yet. We’ll improve the user experience in a future workshop.
- for now, you can choose whatever colors you want for the
- A
Separator
component that separates theButton
and theCard
.
Example UI after the button has been pressed and the response has been returned:
Hints
Hint 1
Create the button in the Home
component using the Button
component, with the “filled” variant.
You can import the Button
component using the @
alias for the src
directory, like this:
Hint 2
Create a piece of state to store the results after you contact the server endpoint. You can declare the state like this:
(<string>
specifies the type of the state value, for TypeScript)
Hint 3
The button onClick
handler should run a fetch
call to the server endpoint and set the quote
state value with the result.
Hint 4
Because of the async nature of fetch , you’ll either need to await
the fetch response, or use .then()
. Same goes for the .json() method to extract the JSON from the response.
Here’s an example function that could serve as the value to onClick
for the Button
(using async
/ await
):
Hint 5
If you’re not sure what colors to use for the Card
, try choosing from these named colors — say, aliceBlue
for textColor
and mediumBlue
for backgroundColor
.
Hint 6
If your app isn’t functioning the way you think it should be, there are two places to check for errors:
- the browser JavaScript console (for example, in Chrome ), for any errors that occur for the code running on the client
- the command-line where the server is running (where you ran
npm run dev
to start the server), for any errors that occur for the code running on the server