Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamed-ali-agourram/netchat
NetChat is a cutting-edge Real-Time Communication App developed with Next.js, Pusher, and Tailwind CSS
https://github.com/mohamed-ali-agourram/netchat
mongodb mongodb-atlas nextjs prisma pusher tailwindcss typescript
Last synced: 26 days ago
JSON representation
NetChat is a cutting-edge Real-Time Communication App developed with Next.js, Pusher, and Tailwind CSS
- Host: GitHub
- URL: https://github.com/mohamed-ali-agourram/netchat
- Owner: mohamed-ali-agourram
- Created: 2023-08-30T16:14:39.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-06T17:09:05.000Z (8 months ago)
- Last Synced: 2024-05-07T15:35:59.077Z (8 months ago)
- Topics: mongodb, mongodb-atlas, nextjs, prisma, pusher, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://net-chat.vercel.app/
- Size: 278 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NetChat Real-Time Communication App - Next.js/Pusher/Tailwind
## Introduction
Welcome to our Real-Time Communication App, a cutting-edge platform developed with Next.js to provide seamless and instantaneous communication experiences. This app leverages the power of the Pusher API for real-time sockets, ensuring swift and reliable communication. Tailwind CSS is employed for styling, creating an aesthetically pleasing and responsive user interface.Visit [https://net-chat.vercel.app/](https://net-chat.vercel.app/)
/ email: [email protected]
/ password: 1234a1234A## Features
### 1. Real-Time Messaging
Experience instant communication with real-time messaging capabilities. Send and receive messages seamlessly, enhancing user interactions.
![Capture d'écran 2023-12-02 184813](https://github.com/mohamed-ali-agourram/NetChat/assets/95295909/282a821e-1d42-46bc-922e-e63362391572)### 2. Presence Awareness
Utilize the Pusher API to implement presence channels, allowing users to see the online status of others in real time.
![Capture d'écran 2023-12-02 185652](https://github.com/mohamed-ali-agourram/NetChat/assets/95295909/ef457382-95e1-438b-85b6-5bf224f07468)### 3. User Authentication
Secure user authentication ensures a personalized and private communication experience.
![Capture d'écran 2023-12-02 185202](https://github.com/mohamed-ali-agourram/NetChat/assets/95295909/e70f5779-0d17-4b20-8a4d-a9e6fae2a7bf)### 4. Responsive Design with Tailwind CSS
Tailwind CSS is employed to create a visually appealing and responsive user interface, ensuring a consistent experience across devices.
![Capture d'écran 2023-12-02 184935](https://github.com/mohamed-ali-agourram/NetChat/assets/95295909/b43cabe7-88b1-4ce5-93ba-000f60e74c1a)## Technologies Used
- **Next.js:** A React framework for building server-rendered React applications, providing an efficient and flexible development experience.
- **Pusher API:** Empowering real-time communication with WebSocket capabilities, allowing for instant data updates between clients.
- **Tailwind CSS:** A utility-first CSS framework that streamlines the styling process, providing a customizable and responsive design.
- **NextAuth:** A flexible authentication library for Next.js, simplifying the implementation of secure user authentication.
- **Prisma:** A modern database toolkit that simplifies database interactions, providing type-safe queries and easy integration.
- **MongoDB:** A scalable and flexible NoSQL database solution, offering high performance and easy scalability.
- **TypeScript:** A statically-typed superset of JavaScript that enhances the development environment by catching errors during development.## Installation
1. Clone the repository: `git clone https://github.com/mohamed-ali-agourram/NetChat.git`
2. Navigate to the project folder: `cd NetChat`
3. Install dependencies: `npm install`
4. Configure Pusher API credentials: Add your Pusher API credentials to the `.env` file.
5. Start the development server: `npm run dev`