Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vijaysingh1621/web-chat-app
A real-time Web Chat application built with Next.js, powered by Clerk for authentication, Convex for backend services, and styled with Tailwind CSS
https://github.com/vijaysingh1621/web-chat-app
convex nextjs tailwindcss typescript
Last synced: 11 days ago
JSON representation
A real-time Web Chat application built with Next.js, powered by Clerk for authentication, Convex for backend services, and styled with Tailwind CSS
- Host: GitHub
- URL: https://github.com/vijaysingh1621/web-chat-app
- Owner: Vijaysingh1621
- Created: 2024-07-12T12:55:56.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T05:41:24.000Z (5 months ago)
- Last Synced: 2024-09-12T16:27:14.671Z (5 months ago)
- Topics: convex, nextjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://web-chat-app-steel-seven.vercel.app
- Size: 101 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```markdown
# Web Chat App
This is a **Web Chat App** built using **Next.js**, with **Clerk** for authentication, **Convex** for backend data management, and styled with **Tailwind CSS**.
## Features
- User authentication and management powered by Clerk
- Real-time chat functionality using Convex backend
- Modern and responsive UI with Tailwind CSS
- Secure authentication with Clerk, including sign-up and login flows
## Tech Stack
- **Next.js**: React-based framework for building server-side rendered and static web applications.
- **Clerk**: Authentication and user management for Next.js apps.
- **Convex**: Backend as a service for handling real-time data and business logic.
- **Tailwind CSS**: Utility-first CSS framework for styling.
## Prerequisites
Before running the project, ensure you have:
- Node.js installed
- A Clerk account set up
- A Convex project configured
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/your-username/web-chat-app.git
cd web-chat-app
```
2. Install dependencies:
```bash
npm install
```
3. Set up environment variables:
Create a `.env.local` file in the root of your project and add the following environment variables:
```bash
NEXT_PUBLIC_CLERK_FRONTEND_API=
CLERK_API_KEY=
CONVEX_DEPLOYMENT=
```
4. Start the development server:
```bash
npm run dev
```
Visit `http://localhost:3000` in your browser to see the app in action.
## Project Structure
```
├── pages
│ ├── api # API routes for the app
│ ├── chat # Main chat interface
├── components # Reusable components
├── styles # Tailwind CSS configurations
├── convex # Convex backend functions
└── public # Static assets
```
## Styling
This project uses **Tailwind CSS** for styling. You can modify or extend the default configuration in the `tailwind.config.js` file.
## Authentication
Clerk is used to handle authentication and user management. Sign-in and sign-up pages are automatically handled by Clerk.
## Backend
Convex is used for real-time data storage and backend logic. Convex functions are located in the `convex/` directory.
## Deployment
To deploy the app, follow the instructions for your preferred platform (e.g., Vercel, Netlify).
## License
This project is licensed under the MIT License.
```