This project was created by Allison Tredwell for the Shopify Front End Developer Fall 2022 Internship application.
Create an app that sends a text prompt collected from the user to the OpenAI API, and displays the results in a list.
Base level requirements requested by Shopify are:
-A form for entering text prompts, which submits to OpenAI API
-Results displayed and stored in a list (newest to oldest), with the prompt and response.
-Accessible, semantic HTML
Download the zip file from GitHub. Unzip, then open the folder with your code editor.
In the terminal, run:
Sign up for a free API key from OpenAI.
In the root folder, create a .env.local file.
Add:
Make sure your key does not have any quotations around it.
Then, run:
to open the project in your browser.
Hosted demo is no longer available, due to limited OpenAI license.
The day I first started experimenting with the types of prompts that could be used was on my dog's birthday. With her in mind, my prompt turned to “write a story about a Goldendoodle and {user input}”. Every story made me smile, and I decided to keep the prompt, but expand on it.
The color scheme is inspired by my dog’s collar, which we chose because the colors are so happy-go-lucky, like her. I feel they reflect the happy, silly nature of the app. For fonts, my main priority is readability, but I also wanted something playful and fun for the title.
A random dog breed is added to each prompt, for variety.
If the user isn’t sure what to add, or would like to see some examples, they can shuffle to view the randomized items. If the user doesn’t enter any text, a random prompt will be provided.
Users can add stories to their Favorites list by clicking on a grey heart. The list is saved in local storage which allows users to keep their Favorites on their device, without the need to log in or create an account. The Favorites are live updated on the Favorites page.
The user input is sanitized before being sent to the API, for increased security.
Users can select the engine that is used, and the chosen engine is also displayed with their results. The default engine is Curie.
Animated dots appear when the user has submitted input, and the app is waiting for a response. This shows the user that their submission has occurred and the app is waiting for a reponses from the API. The loading dots disappear once the data loads.
Semantic HTML is used to provide more context to screen readers.
All color combinations were tested with https://webaim.org/resources/contrastchecker/ to ensure that accessibility guidelines were met.
Skip to Content links on each page are hidden until they are in focus, then they appear and allow the user's screen reader to by-pass the navigation and proceed directly to the main content.
Sizing is done in rem (instead of px) to respect the font-size preferences set by the user.
Once focus is on the form, users can submit with the Enter key. This allows keyboard-only users to submit the form.
Conditional approval has been obtained from OpenAI for the duration of the application process.