React Templates & Themes Logo React Templates & Themes
Nextjs14 App screenshot

Nextjs14 App

Author Avatar Theme by Yaseenmustapha
Updated: 23 May 2024
322 Stars

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.

Github Live Preview

Categories

Nextjs Tailwind Prisma Nextui Fullstack

Overview:

This app is a showcase of the capabilities of Next.js 14. It features a live demo and is a work in progress. The app includes a variety of features such as new Next.js 14 capabilities, data fetching, caching, and mutators, API routes, social media feed with likes and comments, OAuth 2.0 authentication, ORM using Prisma, PostgreSQL database on Supabase, UI components built using NextUI v2.0, and more. It is written in TypeScript and supports payments using Stripe.

Features:

  • New Next.js 14: Utilizes the new features of Next.js 14.
  • Data Fetching, Caching, and Mutation: Includes capabilities for data management.
  • API Routes: Implements server-side API routes.
  • OAuth 2.0 Authentication: Supports authentication through Google, GitHub, and Discord using NextAuth.js.
  • ORM using Prisma: Implements an ORM system for database interactions.
  • PostgreSQL Database on Supabase: Uses PostgreSQL database hosted on Supabase.
  • UI Components with NextUI v2.0: Includes UI components built with NextUI v2.0.
  • Dark Mode: Supports a dark mode feature using next-themes.
  • Payments using Stripe: Enables payment processing through Stripe.

Installation:

  1. Install dependencies:

    npm install

  2. Copy .env.example to .env.local and update variables.

  3. Run the development server:

    npm run dev

  4. Open http://localhost:3000 in your browser to view the result.

  5. Setup a PostgreSQL database, preferably using Supabase, and update the database URL in the .env.local file under the DATABASE_URL key.

  6. Run the Prisma migrate script to initialize the schema.

Summary:

This app built with Next.js 14 serves as a showcase of various features and capabilities for developers. It includes advanced functionalities like data fetching, mutations, API routes, authentication, ORM usage, database management, UI components, dark mode support, and payment processing. The app is a work in progress and provides a live demo for users to explore the Next.js 14 functionalities.