Randomly Chat Nextjs

webd-rupam
4

A real-time chat app developed with Next.js, Tailwind, Express & Firebase. It enables users to connect and chat anonymously with strangers in a responsive and user-friendly interface, featuring real-time messaging for an engaging experience. NOTE: THIS IS THE NEXT.js PORTION. SOCKET-SERVER REPO: https://github.com/webd-rupam/Randomly-SocketServer

Demo Download

Randomly - Real-time Chat Application (Next.js part and socket.io client part)

NOTE* This is the next js part of the project, the socket server part is in different repo. Socket Server Repo: https://github.com/webd-rupam/Randomly-SocketServer

This is the Next.js frontend portion of Randomly, a real-time anonymous chat application where users can connect and chat with strangers in a secure and engaging environment. The app is responsive and user-friendly, providing a seamless chat experience across all devices. The backend server for handling WebSocket connections can be found here.

Features :-

1.Real-time Messaging: Instant, real-time message exchange between users, enhancing engagement. 2.Anonymous Chat: Users are connected with strangers randomly, with no need to provide personal information. 3.Responsive Design: Built with Tailwind CSS, the app adjusts beautifully across all screen sizes. 4.Firebase Authentication: Users can sign in using Google, GitHub, or create an account, ensuring secure access alomg with forgot password feature. 5.Socket-based Messaging: Real-time message handling powered by Express and Socket.IO (Socket server is located in the Randomly-SocketServer repository).

Tech Stack :-

Frontend: Next.js (React-based framework), Tailwind CSS for styling, Socket.IO(client) Backend Socket Server: Express, Socket.IO for real-time messaging Authentication: Firebase for user sign-in and session handling Hosting: Deployed on Vercel (frontend) and Socket server on separate server

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Top categories