Skip to content

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.

License

Notifications You must be signed in to change notification settings

yaseenmustapha/nextjs14-app

Repository files navigation

This is an app built to showcase the capabilities of Next.js 14.

Live demo is up at 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

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
npm install
  1. Copy .env.example to .env.local and update variables:
cp .env.example .env.local
  1. Run the development server:
npm run dev

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

Database setup

  1. Setup a PostgreSQL database. I recommend using Supabase 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:

npm run migrate:dev

License

Licensed under the GNU Affero General Public License v3.0.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Languages