Shopify Intern Tech Challenge - README

This project was created by Allison Tredwell for the Shopify Front End Developer Fall 2022 Internship application.

Table of Contents:

1. Goal

2. Shopify's Requirements

3. Installation

4. Hosted Demo

5. Inspiration

6. Style

7. Features

  7.1 Randomization

  7.2 Shuffle Button

  7.3 Favorites List

  7.4 Sanitized User Input

  7.5 Engine Selection

  7.6 Loading Dots

8. Accessibility

  8.1 Semantic HTML

  8.2 Color Contrast

  8.3 Skip To Content

  8.4 Sizing in rem

  8.5 Submission with Enter Key

9. Approval

1. Goal:

Create an app that sends a text prompt collected from the user to the OpenAI API, and displays the results in a list.

2. Shopify’s Requirements:

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

3. Installation:

Download the zip file from GitHub. Unzip, then open the folder with your code editor.

In the terminal, run:

npm install

Sign up for a free API key from OpenAI.

In the root folder, create a .env.local file.

Add:

REACT_APP_OPENAI_API_KEY=your_unique_API_key_here

Make sure your key does not have any quotations around it.

Then, run:

npm start

to open the project in your browser.

4. Hosted Demo:

Hosted demo is no longer available, due to limited OpenAI license.

5. Inspiration:

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.

6. Style:

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.

7. Features:

7.1 Randomization:

A random dog breed is added to each prompt, for variety.

7.2 Shuffle Button:

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.

7.3 Favorites List:

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.

7.4 Sanitized User Input:

The user input is sanitized before being sent to the API, for increased security.

7.5 Engine Selection:

Users can select the engine that is used, and the chosen engine is also displayed with their results. The default engine is Curie.

7.6 Loading Dots:

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.

8. Accessibility

8.1 Semantic HTML:

Semantic HTML is used to provide more context to screen readers.

8.2 Color Contrast:

All color combinations were tested with https://webaim.org/resources/contrastchecker/ to ensure that accessibility guidelines were met.

8.3 Skip To Content:

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.

8.4 Sizing in rem:

Sizing is done in rem (instead of px) to respect the font-size preferences set by the user.

8.5 Submission with Enter Key:

Once focus is on the form, users can submit with the Enter key. This allows keyboard-only users to submit the form.

9. Approval:

Conditional approval has been obtained from OpenAI for the duration of the application process.