susannaopal / ai_app

App for FE Challenge for Shopify Intership Fall 2022

Fun With AI: Shopify FE Internship Challenge

Contributor

• Susanna Carey

Visit App

• Visit the deployed app here
• visit App repo on github here

Table of Contents

• Abstract
• Technologies
• Code Architecture
• Illustrations
• Install + Setup
• Contributors
• Wins
• Challenges + Improvements
• Project Specs

Abstract

The goal for this challenge was to utilize an Artifical Intelligence API to build an App in React. The result is AI FUN, an app that allow users to send a prompt and receive a response in return. Additionally users can delete a response if they don't like it. Responses returned are displayed with the original prompt and are returned from most recently requested to oldest request.

Technologies

• Javascript
• React
• React Hooks
• CSS
• VScode
• GPT-3 API by OpenAI
• Cypress

Illustrations

App User Tutorial:

Secret API Key Sign-up Instructions

• Visit the OpenAI website here
• Sign-up for a free account
• After logging into your account, request a key here
• In the app's repo root, create a .env file and then add REACT_APP_APIKEY=$ ASSIGNED-API-KEY
• Add the .env file to the .gitignore file by adding this line # api key and the .env file below it

Install + Setup

• Clone this repo to your machine.
• cd into the directory ai_app
• Run npm install
• Run npm start
• Add the local host into your browser
• To test with Cypress Testing, run npm run cypress

Wins

• Writing an app in React Hooks for the first time.
• Utilizing an API with a secure key, and creating a smooth user flow.
• App CSS Styling.
• Good personal workflow.

Challenges + Improvements

• Troubleshooting with this API was tricky at times.
• The deployed link does not always return a response correctly.

Future Iterations

• Adding a favoriting feature.
• Add local storage to ensure a user's responses would be saved upon reloading the page.
• Add a searching feature.

Project Specs

• The project spec for this challenge be found here