Shopify Challenge - Fun with AI

Overview

This project was completed for the Shopify Frontend Developer Internship.

Specs for this project can be found here.

Goals

The overall goal of this challenge was to utilize the GPT-3 API created by OpenAI to create an application that displays responses from an AI server.

The user can type instructions for an AI machine into a text input field and click a submit button to get a response from the AI. Responses are shown below the form in order of newest to oldest. An extra feature was added to allow the user to choose which AI machine they would like to use from a dropdown menu.

View Site

You can visit the deployed site here.

Screenshots

Screen Shot 2022-05-11 at 11 08 50 AM

Screen Shot 2022-05-11 at 11 05 32 AM

Setup

To install the project:

  1. Clone this repo to your local machine.
  2. Run npm install to install the dependencies.
  3. Sign up for OpenAI: https://beta.openai.com/signup.
  4. Visit https://beta.openai.com/account/api-keys to get your secret API key.
  5. Create a new file in the root of this repository called .env.
  6. Add .env to the .gitignore file.
  7. Add REACT_APP_API_KEY={your api key} to the .env file.
  8. Run npm start to run the application in your browser at localhost:3000.
  9. To run Cypress tests, run npm run cypress.

Contributers

Technologies Used

  • React
  • JavaScript
  • CSS
  • Cypress