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.
- Sign up for a MongoDB account
- Create a new project and input any name for it
- Select the newly created project (See the rectangle at the top left)
- Go:
APIs & Services
>OAuth consent screen
> clickCreate
- Fill up
App Name
andDeveloper contact information
, and clickSave And Continue
- Go:
Credentials
tab > clickCreate Credentials
> clickOAuth client ID
- Choose
Application type
as Web application - Add URI for
Authorized JavaScript origins
(Addhttp://localhost:3000
) - Add URI for
Authorized redirect URIs
(Addhttp://localhost:3000
&http://localhost:3000/api/auth/callback/google
) (For the second uri, see next-auth docs on why this redirect is needed) - Click
Create
and save theClient ID
andClient secret
for the .env file
-
If you don't have a cluster created
- Click
Create
- Select
Shared
to create a shared cluster - Select your appropriate server location
- Create the cluster
- Click
-
When cluster have been created
- Click
Database Access
tab andAdd New Database User
with the permission of "Read and write to any database" (Remember your username and password) - Click
Network Access
tab, clickAdd IP Address
, add your current IP address and add another IP address that includes all IP addresses which is0.0.0.0/0
- Click
Database
tab, clickConnect
, clickDrivers
and copy yourMongoDB URI
- Replace
<password>
with the password of the user and save it for the .env file
- Click
- From the root folder, create a new file called
.env
- 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 tohttp://localhost:3000
, Production: Set it to the canonical URL of your site) (SEE: Link)NEXTAUTH_URL_INTERNAL
(Development: Set it tohttp://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)