Talk-Box is a modern real-time chat web app built using Next.js, Prisma, Next-Auth, MongoDB, Tailwind CSS, TypeScript, and Pusher. It offers a sleek, minimal, and responsive UI to provide a seamless chatting experience. The app also supports OAuth authentication from GitHub and Google, which can be easily configured to fit your specific requirements.
- Real-time chat functionality using Pusher
- User authentication with Next-Auth
- OAuth authentication options from GitHub and Google
- MongoDB integration for data storage
- Modern and minimal UI design
- Responsive layout using Tailwind CSS
- TypeScript support for enhanced development experience
Before running Talk-Box, ensure that you have the following prerequisites installed:
- Node.js (v14 or above)
- MongoDB (local instance or connection string)
- Pusher account and credentials
- Clone the repository:
git clone https://github.com/yourusername/talk-box.git- Change into the project directory:
cd talk-box- Install the dependencies:
npm install- Create a
.env.localfile in the project root and add the following configuration variables:
DATABASE_URL=mongodb://localhost:27017/talk-box
PUSHER_APP_ID=your_pusher_app_id
PUSHER_KEY=your_pusher_key
PUSHER_SECRET=your_pusher_secret
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_ID=your_google_client_id
GOOGLE_SECRET=your_google_client_secret
Replace your_pusher_app_id, your_pusher_key, your_pusher_secret, your_github_client_id, your_github_client_secret, and your_google_client_id, your_google_client_secret with your actual Pusher and OAuth application credentials.
To start the development server, run the following command:
npm run devVisit http://localhost:3000 in your web browser to access the Talk-Box app.
Talk-Box supports authentication via GitHub and Google. To configure the authentication providers, edit the next-auth.config.js file located in the project root. Modify the providers array according to your requirements.
// next-auth.config.js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
export default NextAuth({
// ...
providers: [
Providers.GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET
}),
Providers.Google({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET
})
],
// ...
})To enable real-time chat functionality, make sure to provide your Pusher credentials in the .env.local file. Additionally, update the PUSHER_CLUSTER variable in the pages/api/messages/index.ts file to match your Pusher cluster.
// pages/api/messages/index.ts
const PUSHER_CLUSTER = 'your_pusher_cluster';The Talk-Box app utilizes Tailwind CSS for styling. You can customize the UI by editing the existing components or adding new ones. Refer to the Tailwind CSS documentation for more information on styling and customization options.
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the GitHub repository or submit a pull request with your changes.
This project is licensed under the MIT License. See the LICENSE file for more information.
Talk-Box makes use of the following open-source projects:
For any inquiries or questions, please contact [email protected].
Thank you for using Talk-Box! We hope it provides an enjoyable real-time chatting experience and serves as a solid foundation for your chat application projects.