Giter VIP home page Giter VIP logo

chat-app's Introduction

Fullstack Zoomer Chat App: Next.js 13, React, LiveKit, Prisma, Tailwind, MySQL | Full Course 2023

This repository contains the source code for a full-stack Zoomer-friendly chat application built using Next.js 13, React, LiveKit, Prisma, Tailwind, and MySQL. πŸ’»πŸ€–

Features πŸš€

  • Real-time Messaging: Users can send and receive messages in real-time using LiveKit. πŸ’¬
  • Attachment Uploads: Users can send attachments (images, documents, etc.) as messages using UploadThing. πŸ“
  • Message Editing and Deletion: Users can edit and delete their own messages in real-time, and the changes are reflected for all other users. βœοΈπŸ—‘οΈ
  • Text, Audio, and Video Channels: Users can create and join text, audio, and video call channels. πŸŽ₯πŸŽ™οΈ
  • 1:1 Conversations: Users can initiate private 1:1 conversations with other members. πŸ‘₯
  • 1:1 Video Calls: Users can make 1:1 video calls with other members. πŸ“½οΈ
  • Member Management: Administrators can kick members and change their roles (Guest/Moderator). πŸš«πŸ‘‘
  • Invite System: Users can generate unique invite links and use them to invite new members. πŸ”—πŸ€
  • Infinite Message Loading: The app uses tanstack/query to load messages in batches of 10 for an infinite scrolling experience. πŸ”„
  • Server Creation and Customization: Users can create and customize their own servers. πŸ’πŸ› οΈ
  • Beautiful UI: The app uses Tailwind CSS and Shadcn UI components for a modern and responsive user interface. 🎨
  • Light/Dark Mode: The app supports light and dark mode. πŸŒžπŸŒ›
  • ORM with Prisma: The app uses Prisma as the ORM for interacting with the MySQL database. πŸ—ƒοΈ
  • Authentication with Clerk: The app uses Clerk for user authentication. πŸ”‘

Prerequisites πŸ”

  • Node.js version 18.x.x

Cloning the Repository πŸ“

git clone https://github.com/AntonioErdeljac/next13-discord-clone.git

Installation πŸ› οΈ

  1. Install the required packages:

    npm i
  2. Set up the .env file:

    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
    CLERK_SECRET_KEY=
    NEXT_PUBLIC_CLERK_SIGN_IN_URL=
    NEXT_PUBLIC_CLERK_SIGN_UP_URL=
    NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
    NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=
    DATABASE_URL=
    UPLOADTHING_SECRET=
    UPLOADTHING_APP_ID=
    LIVEKIT_API_KEY=
    LIVEKIT_API_SECRET=
    NEXT_PUBLIC_LIVEKIT_URL=
  3. Set up Prisma:

    • Add a Postgres database (I used NeonDB)
    • Run the following commands:
      npx prisma generate
      npx prisma db push
  4. Start the app:

    npm run dev

Available Commands πŸ€–

Running commands with npm run [command]:

Command Description
dev Starts a development instance of the app

Contributions 🀝

Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue. πŸ™

chat-app's People

Contributors

aarsh21 avatar

Watchers

 avatar

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.