nextjs-firechat
nextjs-firechat copied to clipboard
🔥 A Realtime Chat App with Next.js and Firebase
NextJS FireChat
Source code of the NextJS FireChat app built with NextJS, Firebase, and Tailwind CSS. Deployed on Vercel.
NOTE: This is not an official website, just for practice purposes.
User Stories
A Real-time chat interface where multiple users can interact with each other by sending messages. To enter the chat and interact with people, the user must log in using their Google account. Once logged in, the user can read the previous messages (we limit it to 100 messages) from the chat and start chatting by sending messages.
App Details
| Login Page | Chat Page |
|---|---|
![]() |
![]() |
Instructions
- Clone the project repository:
git clone [email protected]:ytliuSVN/nextjs-firechat.git - Navigate to the project folder:
cd nextjs-firechat - Install the dependencies:
npm install - Start the app in the development mode:
npm run dev
Open http://localhost:3000 with your browser to see the result.
Loading Environment Variables
Copy and setup environment. An example .env.local:
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

