Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yaseenmustapha/nextjs14-app

Full-stack Next.js 14 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo, and Stripe payments.
https://github.com/yaseenmustapha/nextjs14-app

gpt-35-turbo nextauth nextjs nextui oauth2 openai openai-api postgresql prisma railway react reactjs stripe tailwindcss typescript

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/yaseenmustapha/nextjs14-app
Owner: yaseenmustapha
License: agpl-3.0
Created: 2023-02-24T21:01:44.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-05-23T00:51:15.000Z (4 months ago)
Last Synced: 2024-05-23T01:41:44.823Z (4 months ago)
Topics: gpt-35-turbo, nextauth, nextjs, nextui, oauth2, openai, openai-api, postgresql, prisma, railway, react, reactjs, stripe, tailwindcss, typescript
Language: TypeScript
Homepage: https://nextjs14-showcase.vercel.app
Size: 483 KB
Stars: 258
Watchers: 8
Forks: 52
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

This is an app built to showcase the capabilities of [Next.js 14](https://nextjs.org/docs).

Live demo is up at [nextjs14-showcase.vercel.app](https://nextjs14-showcase.vercel.app)

> **Warning**
> This app is a work in progress. Site may be unstable.
>
Home Page (Desktop) | Social Media Feed (Mobile)
:-------------------------:|:-------------------------:
Screenshot 2024-05-22 at 10 10 41 PM | ![IMG_0675](https://github.com/yaseenmustapha/nextjs14-app/assets/26501999/8fdb90fb-ceb8-40f5-9730-ac154edbb7d1)

## Features

- Using new **Next.js 14**
- New `/app` dir,
- Routing, Layouts, Nested Layouts and Layout Groups
- Data Fetching, Caching and Mutation
- Uses client and server components from **React 18**
- API Routes
- Live social media feed with likes, comments, and profanity filter
- Enhance social media posts using **OpenAI API** with **GPT-3.5-Turbo** model
- OAuth 2.0 Authentication through Google, GitHub, and Discord using **NextAuth.js**
- ORM using **Prisma**
- PostgreSQL Database on **Supabase**
- UI Components built using **NextUI v2.0**
- Styled using **Tailwind CSS**
- Dark mode using **next-themes**
- Payments using **Stripe**
- Written in **TypeScript**

## Run locally
1. Install dependencies

```bash
npm install
```
2. Copy `.env.example` to `.env.local` and update variables:

```bash
cp .env.example .env.local
```

3. Run the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Database setup

1. Setup a PostgreSQL database. I recommend using [Supabase](https://supabase.com) as they have a great free tier and is easy to setup.

2. Put your database URL in the `.env.local` file under the `DATABASE_URL` key.

3. Run the Prisma migrate script to initialize the schema:

```bash
npm run migrate:dev
```
## License

Licensed under the [GNU Affero General Public License v3.0](https://github.com/yaseenmustapha/nextjs14-app/blob/main/LICENSE).