Git Product home page Git Product logo

nextjs-prompter's Introduction

Prompter

This is a web application that allows users to share their prompts used in LLMs (such as Chat GPT) with others. Users are also able to edit and delete their prompts which are saved in a MongoDB database.

This project uses Next JS, Typescript, Next-Auth (Google OAuth) and MongoDB. With the newly improved Next JS 14, this entire project both acts as the frontend and also the backend. It also allows for the improvement of SSO capabilities and performace improvements due to server-side rendering.

Setup

Google Cloud (Localhost)

  1. Sign up for a MongoDB account
  2. Create a new project and input any name for it
  3. Select the newly created project (See the rectangle at the top left)
  4. Go: APIs & Services > OAuth consent screen > click Create
  5. Fill up App Name and Developer contact information, and click Save And Continue
  6. Go: Credentials tab > click Create Credentials > click OAuth client ID
  7. Choose Application type as Web application
  8. Add URI for Authorized JavaScript origins (Add http://localhost:3000)
  9. Add URI for Authorized redirect URIs (Add http://localhost:3000 & http://localhost:3000/api/auth/callback/google) (For the second uri, see next-auth docs on why this redirect is needed)
  10. Click Create and save the Client ID and Client secret for the .env file

MongoDB

  • If you don't have a cluster created

    1. Click Create
    2. Select Shared to create a shared cluster
    3. Select your appropriate server location
    4. Create the cluster
  • When cluster have been created

    1. Click Database Access tab and Add New Database User with the permission of "Read and write to any database" (Remember your username and password)
    2. Click Network Access tab, click Add IP Address, add your current IP address and add another IP address that includes all IP addresses which is 0.0.0.0/0
    3. Click Database tab, click Connect, click Drivers and copy your MongoDB URI
    4. Replace <password> with the password of the user and save it for the .env file

Environment Variables

  1. From the root folder, create a new file called .env
  2. Inside it will have these variables:
    • GOOGLE_ID (Client ID for web application)
    • GOOGLE_CLIENT_SECRET (Client secret)
    • MONGODB_URI (See MongoDB setup for more info) (Note: Replace <password> with the password of the user)
    • NEXTAUTH_URL (Development: Set it to http://localhost:3000, Production: Set it to the canonical URL of your site) (SEE: Link)
    • NEXTAUTH_URL_INTERNAL (Development: Set it to http://localhost:3000, Production: Set it to the canonical URL of your site) (SEE: Link)
    • NEXTAUTH_SECRET (A random string used to hash tokens, sign & encrypt.) (SEE: Link to generate secret)

nextjs-prompter's People

Contributors

kleejh avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.