https://github.com/pa4080/promptopia
Share AI Prompts - Next.js App Router, MongoDB, Tailwind, Typescript
https://github.com/pa4080/promptopia
mongodb mongose next-auth next-intl nextjs13 reactjs tailwindcss typescript
Last synced: 11 months ago
JSON representation
Share AI Prompts - Next.js App Router, MongoDB, Tailwind, Typescript
- Host: GitHub
- URL: https://github.com/pa4080/promptopia
- Owner: pa4080
- License: gpl-3.0
- Created: 2023-06-18T10:27:34.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T10:28:15.000Z (about 2 years ago)
- Last Synced: 2025-04-02T03:35:16.327Z (about 1 year ago)
- Topics: mongodb, mongose, next-auth, next-intl, nextjs13, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://promptopia.metalevel.tech
- Size: 3.81 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js 13 Full Course 2023
_Platform that serves as a hub for exchanging AI prompts in a format similar to blog posts._
[](https://promptopia.metalevel.tech/)
**_Fullstack CRUD REST App with Next.js, MongoDB, Tailwind CSS, and TypeScript_**
This project is based on [**Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework**](https://youtu.be/wm5gMKuwSYk), with the following objectives:
- Next.js 13 App Folder Structure
- Next.js 13 Client Components vs Server Components
- Next.js 13 File-based Routing (including dynamic and nested routes)
- Next.js 13 page, layout, loading, and error Special Files
- Next.js 13 Serverless Route Handlers (Next API, Full Stack Apps)
- Next.js 13 Metadata and Search Engine Optimization (SEO)
- Three ways to fetch data in Next.js:
- Server Side Rendering (SSR),
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
Notes:
- **This is a [TypeScript](https://www.typescriptlang.org/) implementation of the tutorial.**
- Another feature that is implemented here is the [Internationalization](https://next-intl-docs.vercel.app/docs/next-13) support. It is enabled via `middleware.ts` as it is described in the official documentation. It is possible to use the client components or the (beta) server side rendering.
If one prefers they can setup [`next-i18next`](https://github.com/i18next/next-i18next) instead.
_Currently the we are supporting only English language, but the project is ready to be extended to support more languages._
- Many improvements and added features as:
- Two major Prompt/Posts categories: 1) Chats and 2) Images.
- For the Chat category one may attach a link to a shared chat...
- For the Image category one may upload an image...
References:
-
-
-
-
-
- [**_Setting the properties in an object parameter to optional > Set the entire object parameter to optional_**](https://bobbyhadz.com/blog/typescript-function-optional-parameters#setting-the-properties-in-an-object-parameter-to-optional)
-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## UseForm
```bash
npm i react-hook-form
```
-
- ****
-
-
## Shadcn-UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. **Re-usable components built using _Radix UI_ and _Tailwind CSS_.** This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.
- - An example how to implement the [``](./app/components/ui/skeleton.tsx) component, while fetch data from the [RAWG](https://rawg.io/) API. This example illustrate also ho to use Next.js 13 App Router [`loading.tsx`](./app/%5Blocale%5D/games/loading.tsx) component.
-
-
### CLI
**Use the CLI to add components to your project.** Use the `init` command to initialize dependencies for a new project. The `init` command installs dependencies, adds the cn util, _configures `tailwind.config.js`_, and CSS variables for the project.
```bash
npx shadcn-ui init slugify
```
Use the `add` command to add components to your project and installs all required dependencies.
```bash
npx shadcn-ui add [component]
```
Run the add command without any arguments to view a list of all available components:
```bash
npx shadcn-ui add
```
## TailWind CSS
-
-
-
- ()
Plugins:
- [Flowbite (quick start)](https://flowbite.com/docs/getting-started/quickstart/) used for the [radio buttons](https://flowbite.com/docs/forms/radio/).
## NextAuth (GoogleProvider) and Google OAuth
-
-
-
-
-
- ****
-
- (`NEXTAUTH_SECRET`)
- ****
-
-
- ****
...Access blocked: This app’s request is invalid:
-
-
`/api/auth/callback/:provider` > `/api/auth/callback/google` > In the google's OAuth2.0 configuration
-
## MongoDB
```bash
npm i bcrypt mongodb mongoose next-auth
```
References:
- [Next.js and MongoDB integration exercise repository](https://github.com/metalevel-tech/exc-nextjs-2023-with-mongodb-example)
- [How to Integrate Vercel & MongoDB Step-by-Step: YouTube](https://youtu.be/JIlYroSsInU)
-
-