Coder Social home page Coder Social logo

fuma-nama / shark-chat-js Goto Github PK

View Code? Open in Web Editor NEW
86.0 3.0 12.0 4.06 MB

Modern Chat App written in Next.js

Home Page: https://shark-chat.vercel.app

License: MIT License

JavaScript 1.80% TypeScript 97.73% CSS 0.47%
ably-js chat-app chat-application nextjs radix-ui react tailwind-css chat ai app-router

shark-chat-js's Introduction

Shark Chat

A Chat app built with Trpc, Tailwind CSS, Ably, Redis, Cloudinary, Drizzle ORM, Next.js.

This repository is a monorepo (Turborepo).

preview

Features

  • Create, Update, Delete Chat Group
  • Send, Update, Delete Message
  • Markdown (gfm, tables supported), Code highlighting, LaTeX in Messages
  • Reference Messages
  • Message Embeds (Display open-graph data of links in message)
  • Send Images/Files via Message, images zoom-in
  • Direct Message with anyone
  • View & Kick Group members
  • Custom Emotes
  • Invite Group members via Invite code or Url
  • Upload user avatar, group banner and icon images
  • Show notification when new Message received
  • AI-Powered Message Writer
  • Built-in AI Chatbot (Powered by Inworld)
  • Delete Accounts
  • Light & Dark Mode
  • 100% Typescript

Play with it: https://shark-chat.vercel.app
Learn More: https://shark-chat.vercel.app/info

Play with it Locally

Shark Chat integrated with many third-party service for supporting wide spectrum of features and work perfectly on serverless environment.

Thus, you have to register an account for each services in order to setup the project correctly before playing with it locally. Please fill all environment variables in the .env.example.

Upstash

Create a Redis database at their website and get REDIS_URL, REDIS_TOKEN from the console.

Ably Realtime

Create a new project on https://ably.com, paste ABLY_API_KEY into environment varibles.

Database

By default, it uses Drizzle ORM with Neon Serverless Postresql for database. You may use other providers if you prefer.

Create a Postresql database and get your DATABASE_URL.

Cloudinary

Create a new project on https://cloudinary.com, copy the cloud name, key and API secret.

Next Auth

Fill NEXTAUTH_URL and NEXTAUTH_SECRET, read their docs for further details.

Currently, only Github OAuth is supported. Follow this guide to setup the OAuth App on Github, generate a GITHUB_ID with GITHUB_SECRET.

Development Mode

Run pnpm run dev and edit files to see changes.

Build from Source

This project uses Turborepo and PNPM.

pnpm run build

It should be able to deploy on Vercel or any other platforms.

shark-chat-js's People

Contributors

fuma-nama avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

shark-chat-js's Issues

Google login

When will you be adding google login or social logins?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.