Fun with AI

Shopify Frontend Developer Intern Challenge - Fall 2022

Click HERE to view the project spec
Click HERE to view the deployed site

Project Overview
Application Demo
Features
Setup Instructions
Tech Stack
Project Materials
Credits
Author

OVERVIEW

Fun with AI, is an application built with the OpenAI API completions endpoint and uses the “text-curie-001” engine. A user can enter a prompt, submit it, receive an AI generated response, and then reset the form and repeat the process. In addition all prompt response pairings are stored and displayed in chronological order for a user to review.

APPLICATION DEMO

Below is a walkthrough of the basic user flow of adding a prompt, submitting it, receiving a response, and resetting the form:

Responses in the response log are displayed in reverse-chronological order (meaning that the most recent response is displayed first), and the log updates after every new submission!

A prompt must be entered in order to submit the form. If a user tries to submit the form without entering a prompt, an alert will pop up indicating that the input field must be filled out. Similarly, after the form has been submitted, the input field is uneditable until after the form is reset. This is done by clicking the reset button.

Finally, the application is fully responsive to all viewports!

FEATURES

A user can add a prompt, submit it, receive an AI generated response, and reset the form to submit another prompt.
The application is fully tabbable and possesses a 100% Lighthouse Accessibility Audit Score.
The application is responsive to all viewports (phones, tablets, laptops, etc.)
All user flows are tested via Cypress.

SETUP INSTRUCTIONS

Copy the SSH clone address
Run git clone git@github.com:ectweitmann/fe_internship_challenge.git in your repo
cd in to the cloned repo, and run npm install
Finally run npm start and visit localhost:3000

INSTRUCTIONS FOR RUNNING CYPRESS TEST SUITE

Run npm start in your terminal
Open a second tab in your terminal and make sure you are still inside the project repo
Run npm run cypress
After the Cypress dashboard renders, click on the link that reads: "► Run 1 integration spec"