Skip to content

Next.js Chat App (Stream, Clerk Auth, Web Push Notifications, Tailwind CSS, TypeScript)

Notifications You must be signed in to change notification settings

novipro88/chatapp-nextjs14

Repository files navigation

Next.js Web Chat App (Stream, Clerk Auth, Web Push Notifications, TailwindCSS, TypeScript)

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open https://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.

Setup .env.local

make a file name .env.local on root and input your own environment for this app.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/chat
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/chat

NEXT_PUBLIC_STREAM_KEY=
STREAM_SECRET=

NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY=
WEB_PUSH_PRIVATE_KEY=

If you want to learn how to create it please follow below tutorial👇:
➡ Tutorial Link 💚: Next.js WhatsApp Web Clone (Stream, Clerk Auth, Web Push Notifications, Tailwind CSS, TypeScript)


⭐DO NOT FORGET TO STAR THIS REPO⭐


Image#1: welcome page

Next.js Web Chat App

Image#2: sign-in/sign-up with clerk

Next.js Web Chat App

Image#3: chat online

Next.js Web Chat App

Image#4: light/dark theme

Next.js Web Chat App

About

Next.js Chat App (Stream, Clerk Auth, Web Push Notifications, Tailwind CSS, TypeScript)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published