Web Chat App

Web Chat App is an open-source, full-stack chat application template built with Next.js, Chakra UI, Express.js, and MongoDB that delivers realtime messaging, email OTP verification, and a multi-page UI, deployable on Vercel.

What is Web Chat App?

Web Chat App is a realtime chat application project that combines a Next.js front end bootstrapped with create-next-app, an Express.js API, and a MongoDB database. The repository includes login, registration, OTP verification, profile, chat, new chat, and message statistics pages, and it is already deployed on Vercel at web-chat-app-brown.vercel.app. The app takes user credentials and messages as input and produces an authenticated, realtime group chat experience with per-user profile and usage statistics.

Key Features

• Realtime message updates — messages appear in the chat page as they are sent, with the README describing realtime updates as a core feature.
• Email OTP verification — registration triggers a one-time password emailed to the user, and a dedicated OTP page is provided for entering it.
• Dark and light mode — the UI changes according to the selected mode, and the README shows screenshots of both the dark and light chat views.
• Complete page set — ships with login, register, OTP, profile, chat, new chat, and message statistics pages, each confirmed by a screenshot in the README.
• Chakra UI styling — the interface is built with Chakra UI, one of the four technologies displayed in the repository's badge set.
• Express.js and MongoDB backend — message storage and API endpoints rely on Express.js and MongoDB, as shown in the tech badges.
• Vercel deployment — a live instance is hosted on Vercel and linked from the README, so the app can be used without local setup.

Who is it for?

Developers who need a working chat application can clone this repository and use it as the foundation for a messaging product, avoiding the work of building authentication and realtime sync from scratch. Students learning the Next.js, Express.js, and MongoDB stack can trace how pages, API routes, and the database fit together. Anyone who wants a ready-made group chat can open the Vercel deployment and start communicating immediately.

What can you do with Web Chat App?

• Start messaging quickly — register with email verification, log in, and exchange messages in realtime with other users.
• Extend the codebase — edit pages/index.js or add files under pages/api to customize the app, following the Next.js API route pattern described in the README.
• Deploy your own instance — use the included Vercel configuration to launch a personal copy with your own MongoDB connection.
• Switch the theme — toggle between dark and light mode to match your visual preference.

How does Web Chat App work?

The README provides a local setup path: clone the repository, add the concurrently global package with yarn, run yarn run build to install and compile, then yarn run dev to start the dev server at http://localhost:3000. The project maps the pages/api directory to /api/*, so backend endpoints live alongside the Next.js pages and can be edited in pages/api/hello.js as a starting point.

FAQ

Is Web Chat App free?

Yes, the repository is open-source and publicly available, and the README asks for a GitHub star as support rather than any payment.

What technologies does Web Chat App use?

The project uses Next.js as the framework, JavaScript as the language, Chakra UI for the component library, Express.js for the API, and MongoDB for the database, all shown in the repository's badges.

How do I run Web Chat App locally?

Clone the repo, run yarn global add concurrently, then execute yarn run build followed by yarn run dev, and open http://localhost:3000 in a browser.

Where is Web Chat App deployed?

The README links a live deployment on Vercel at web-chat-app-brown.vercel.app, and the project also includes the standard Next.js instructions for deploying to Vercel.