https://github.com/kundusubrata/quick-chat-frontend
A real-time chat application built with Next.js, TypeScript, and Tailwind CSS, featuring Google authentication via NextAuth.js, group management, and real-time messaging using Socket.IO.
https://github.com/kundusubrata/quick-chat-frontend
nextauth-google nextjs socket-io tailwindcss typescript
Last synced: 2 months ago
JSON representation
A real-time chat application built with Next.js, TypeScript, and Tailwind CSS, featuring Google authentication via NextAuth.js, group management, and real-time messaging using Socket.IO.
- Host: GitHub
- URL: https://github.com/kundusubrata/quick-chat-frontend
- Owner: kundusubrata
- Created: 2024-12-29T08:29:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-05T03:31:54.000Z (over 1 year ago)
- Last Synced: 2025-10-29T07:50:55.070Z (8 months ago)
- Topics: nextauth-google, nextjs, socket-io, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://quick-chat-frontend-lilac.vercel.app
- Size: 392 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Real-Time Chat Application - Frontend
This repository contains the frontend for a real-time chat application. The application provides an intuitive user interface for authentication, chat group management, and real-time messaging. Built using Next.js and TypeScript, it integrates seamlessly with the backend API.
---
## Features
- Responsive and user-friendly design.
- User authentication via Google using NextAuth.js.
- Real-time chat functionality.
- Integration with the backend API for group and message management.
---
## Screenshots
## Tech Stack
- **Framework**: Next.js
- **Language**: TypeScript
- **UI**: Tailwind CSS
- **Authentication**: NextAuth.js
- **Real-time Communication**: Socket.IO
---
## Prerequisites
Ensure you have the following installed on your system:
- [Node.js](https://nodejs.org/) (v16 or higher)
---
## Local Setup
Follow these steps to set up the frontend application locally:
1. Clone the Repository
```
git clone
cd client
```
2. Install Dependencies
```
npm install
```
3. Configure Environment Variables
Create a `.env` file in the root directory and set the following:
```
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
```
4. Run the Development Server
```
npm run dev
```
The application will be available at http://localhost:3000.
## Production URL
The application is deployed at:
[https://quick-chat-frontend-lilac.vercel.app/](https://quick-chat-frontend-lilac.vercel.app/)
----------
## Development Notes
- **Port**: The frontend runs on port `3000` by default.
- Ensure the backend server is running at http://localhost:8000 to test API integrations.
----------
## Contributions
Feel free to contribute by submitting issues or pull requests. Follow best practices for code quality and documentation.