Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucatosc/real-time-chat-app
A Next.js-v13 real-time chat app with TypeScript, Tailwind, and more. Features include live chat, group chat, image sharing, profile update, and more.
https://github.com/lucatosc/real-time-chat-app
nextjs pusher reactjs socket-io tailwindcss typescript
Last synced: 27 days ago
JSON representation
A Next.js-v13 real-time chat app with TypeScript, Tailwind, and more. Features include live chat, group chat, image sharing, profile update, and more.
- Host: GitHub
- URL: https://github.com/lucatosc/real-time-chat-app
- Owner: lucatosc
- License: mit
- Created: 2024-11-13T00:25:11.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T02:39:07.000Z (3 months ago)
- Last Synced: 2024-11-13T03:29:10.738Z (3 months ago)
- Topics: nextjs, pusher, reactjs, socket-io, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nexus Chat Application
Nexus Chat Application is a modern chat application built with the latest technologies, including Next.js, TypeScript, Tailwind CSS, MongoDB, Prisma, and NextAuth. It features real-time chatting, group creation, profile customization, online status tracking, image uploads, and various authentication methods, including email and social logins with Github, Google, and Twitter. This README will provide comprehensive documentation for setting up, running, and customizing the application.
## Demo
View the live demo at [Nexus Chat Application Demo](https://nexus-dk.vercel.app/)
## Features
- **Real-Time Chatting**: Enjoy real-time chat with other users.
- **Group Creation**: Create chat groups for multiple users.
- **Profile Customization**: Update your name and profile picture.
- **Online Status**: See live active/offline status for users.
- **Image Uploads**: Share images in chats using Cloudinary.
- **Multiple Authentication Methods**: Sign in or sign up using email, Github, Google, and Twitter.
## Tech Stack
- **Next.js**: A popular React framework for building web applications.
- **TypeScript**: A statically typed superset of JavaScript.
- **Tailwind CSS**: A utility-first CSS framework for designing modern and responsive UIs.
- **Headless UI**: A set of completely unstyled, fully accessible UI components for React.
- **React**: A JavaScript library for building user interfaces.
- **Prisma**: A modern database toolkit for TypeScript and Node.js.
- **MongoDB**: A NoSQL database for storing chat data.
- **NextAuth**: An authentication library for Next.js applications.
- **Zustand**: A small, fast, and scalable state management library for React.
- **Pusher**: A hosted service that makes it super-easy to add real-time data and functionality to web and mobile applications.
- **Cloudinary**: A cloud service that offers a solution to a web application's entire image management pipeline.
## Installation
Follow these steps to set up the Nexus Chat Application locally:
1. Clone the repository
```bash
git clone https://github.com/lucatosc/real-time-chat-app.git
cd nexus-chat-application
```
2. Install dependencies
```bash
npm install
```
3. Create a `.env.local` file in the root directory of the project and add the following environment variables:
```bash
DATABASE_URL=
NEXTAUTH_SECRET=
GITHUB_ID=
GITHUB_SECRET=
GOOGLE_ID=
GOOGLE_SECRET=
TWITTER_ID=
TWITTER_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=
```
4. Start the development server
```bash
npm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Contributing
Contributions to this project are welcome. If you'd like to contribute, please follow these steps:
1. Fork this repository.
2. Create a new branch for your feature or bug fix:
```bash
git checkout -b
```
3. Make the appropriate changes to the files and commit changes:
```bash
git add .
git commit -m ""
```
4. Push to the branch:
```bash
git push origin
```
5. View the changes in your fork and create a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.