Fun with GPT-3

Have fun with the OpenAI API and see what others are posting.

View Live >>

Table of Content

• Usage
• Motivation and Story
• Features
• Getting Started (locally)

Usage

Chat with AI and see the questions you ask it and others ask it LIVE! Or, try the demo version out to only have the posts be seen by you.

Motivation and Story

This is a project based on the Shopify Front End Developer Intern Challenge document provided by Shopify. The document had a bare minumum of requirements needed but for this project that I chose to go above and beyond with by including a RESTful backend with live questions updates from all users with Socket.io.

The project wasn't able to be submitted to Shopify in time since I found out about it right after graduation and the deadline was two days after.(graduated 05/20/2022 😊). But, that didn't stop me from trying!

So over a period of 6 days I was able to plan, mock, create and deploy this fully responsive application to AWS. Showing my skills across the full-stack.

Enjoy! :)

Extra Information

• Journal Entries
• Figma Design
• Setup
• Trello

Features

• Talk with OpenAI

  • With a choice of 4 engines, users are able to communicate with AI and be able to get 4 unique responses. Feel free to ask the AI anything!

• Live user question room

  • Users that are logged into the application can make questions to the OpenIO API and when they make the question it will be broadcasted to everyone using the application live!
  • This was possible with Socket.io.

• Custom User Experience

  • With Firebase Authentication users are able to login to there custom account and be able to make unique posts to the application.

• Demo App

  • The same application but NOT linked to a users google account or to others users on the application. The posts you make here to OpenAI are just yours and only viewable on your device.

Getting Started (locally)

Step 1. Clone this repo

With SSH

$ git clone [email protected]:ec-rilo/fun-with-gpt-3.git

With HTTPS

$ git clone https://github.com/ec-rilo/fun-with-gpt-3.git

Step 2. Create a PostgreSQL database

Log into postgres with a user of your choice that has permission to create databases (for me it's user postgres) and create the database fun_with_gpt_3

postgres=# CREATE DATABASE fun_with_gpt_3

Step 3. Seed database with tables

Within postgres, switch to the fun_with_gpt_3 database and run the following command that will seed the database with the required tables.

(Note: you must be within the root directory for this to work.) (Feel free to take a look at the tables.sql to see what's occuring.)

fun_with_gpt_3=# \i server/db/tables.sql

You're database is now ready for taking in data.

Step 4. Create a Firebase project and use the provided config

This step is going to be where you do a bit of research. Create a firebase project and initialize it. Once you initialize it you will get an object simliar to this

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

What you're going to do is make a copy of example.env.local that's within your repository and name it .env.local. Then, within file .env.local fill in the the data you can for the FIREBASE lines (Should only be able to fill out the first 7 lines).

Step 4. Create an account with OpenAI and get API Key and Organiziation ID

I'm going to leave getting these up to you. But once you sign up for OpenAI and get the API Key and Organization ID make sure to add them into the .env.local file.

Step 5. Fill out remaining information in .env.local file

There should now be 5 lines in .env.local that need content. Fill them out with the following.

IO_PORT=3000
SERVER_PORT=8080

PG_USER=postgres
PG_HOST=localhost
PG_PASS= WHATEVER PASSWORD YOU CREATED FOR YOUR PG_USER.

If your postgres user doesn't have a password make sure to create one for it.

Step 6. Run the Development server

The app should now be good to go. All you have to do now is run the development server:

npm run dev

Open http://localhost:8080 with your browser to see the result.