@papoita | version 1.0.1

FunAI project / inspirAItion app

This project was completed by Paola Perez Leiva as part of a job application challenge. It also became an exercise into consolidating abilities as a software developer.

InspirAItion

Is a web application that allows users to submit text and get a completion response from OpenAI API. They can like the post and they see the response ordered from newest to oldest.

Features:

• A dropdown menu provides example prompt recommendations allowing the UI to guide the user. It automatically fills the textarea with the user's selection.

• Aditional styling allows the user to know which options they are selecting.

• The user can modify the placeholder and add any desired input in the textarea.

• The user can reset the form and clear the textarea.

• A loading gif will render while response is obtained from the API to improve the UX.

• The response from the API is rendered from newest to oldest in a humanized manner, showing the date and the timeago it was created.

• There is a clickable heart, a thumbsdown and a lightbulb icon that will change color if the user likes/unlikes the post response.

• Each prompt has a hover option to improve UX.

• The interface is simple, straightforward and responsive. It is cohesive and follows color schema.

• Links to the repo and linkedin of the developer are included in the footer.

Techstack

💡 This frontend project is built with React, React-Bootstrap, Bootstrap, Sass, React-icons library.

💡 App is tested using Jest for component rendering and Cypress for end-end.

💡 Users can communicate with an API server over HTTP, using Axios.

💡 Deployed and live using Netlify: InspirAItion

Screenshots

InspirAItion UI v2

InspirAItion UI v1

OpenAI API

The completion endpoint combined with text-curie-001 engine were selected to provide cheap, fast and accurate completion responses.

"...You input some text as a prompt, and the model will generate a text completion that attempts to match whatever context or pattern you gave it. For example, if you give the API the prompt, “Write a tagline for an ice cream shop”, it will return a completion like “We serve up smiles with every scoop!”

Setup

Running funai

Install dependencies

npm install

Run funai repo at port 3000

npm start

Dependencies

• axios
• openai
• react
• react-bootstrap
• bootstrap
• sass
• react-scripts
• timeago
• react-dom
• react-icons
• testing-library-react
• cypress

Running Jest Test Framework

npm run test

Running Cypress end-end testing

npm run cypress:open