A comprehensive, full-stack chat application built with Next.js, Socket.IO, and MongoDB. This application provides real-time messaging capabilities, user authentication, and responsive design optimized for both desktop and mobile platforms.
- Real-time messaging - Instantaneous message delivery using Socket.IO
- Contact management - User contact system with chat room functionality
- User authentication - Secure authentication system with JWT tokens
- Responsive design - Cross-platform compatibility for desktop and mobile devices
- Offline functionality - Graceful degradation when backend services are unavailable
- Message persistence - Persistent chat history storage
- Modern user interface - Clean, intuitive design using Tailwind CSS
- Performance optimization - Optimized for speed and reliability
The following software components are required for this application:
- Node.js (version 18.0 or higher) - Download
- Git - Download
- MongoDB (optional, required for full backend functionality) - Download
# Clone the repository
git clone <repository-url>
cd "chat application 1"
# Install project dependencies
npm install
# Alternative: pnpm install
# Configure environment variables
echo "NEXT_PUBLIC_API_URL=http://localhost:5000" > .env.local
# Start the development server
npm run dev
# Alternative: pnpm dev
# Access the application
# Navigate to: http://localhost:3000This configuration utilizes local mock data for demonstration purposes.
Backend Server Configuration:
# Navigate to backend directory
cd backend
# Install backend dependencies
npm install
# Configure backend environment variables
echo "MONGODB_URI=mongodb://localhost:27017/chatapp
JWT_SECRET=your-secret-key-here
PORT=5000" > .env
# Start backend server
npm startFrontend Application Configuration:
# Return to main project directory
cd "chat application 1"
# Start frontend development server
npm run devService Access Points:
- Frontend Application: http://localhost:3000
- Backend API: http://localhost:5000
- Register/Login - Create an account or log in to the system
- Start Chatting - Select "General Chat" or any contact from the list
- Send Messages - Type messages and press Enter or click Send
- Real-time Updates - Messages appear instantly for all connected users
Chat Application
├── frontend/ # Next.js React Application
│ ├── pages/ # Application pages
│ │ ├── chat.tsx # Main chat interface
│ │ ├── login.tsx # User authentication
│ │ └── api/ # API endpoints
│ ├── components/ # Reusable React components
│ ├── types/ # TypeScript type definitions
│ └── styles/ # CSS and styling
│
├── backend/ # Node.js Express Server
│ ├── server.js # Main server file
│ ├── routes/ # API route handlers
│ ├── models/ # Database models
│ └── .env # Environment variables
│
└── Documentation
├── README.md # This file
├── yaipadhle.md # Beginner's guide
└── technical.md # Technical documentation
- Next.js 15 - React framework with SSR
- React 18 - UI library with hooks
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Socket.IO Client - Real-time communication
- shadcn/ui - Modern UI components
- Node.js - JavaScript runtime
- Express.js - Web application framework
- Socket.IO - Real-time bidirectional communication
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- JWT - JSON Web Tokens for authentication
- bcryptjs - Password hashing
Frontend (.env.local):
NEXT_PUBLIC_API_URL=http://localhost:5000 # Backend server URLBackend (.env):
MONGODB_URI=mongodb://localhost:27017/chatapp # Database connection
JWT_SECRET=your-super-secret-key-here # Authentication secret
PORT=5000 # Server portnpm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintnpm start # Start the server
npm run dev # Start with nodemon (auto-restart)- Push your code to GitHub
- Connect your repo to Vercel
- Add environment variable:
NEXT_PUBLIC_API_URL=https://your-backend-url.com - Deploy automatically
- Push backend code to a repository
- Connect to Railway or Heroku
- Add environment variables (MongoDB URI, JWT Secret)
- Deploy
"Cannot connect to backend"
- Solution: The application automatically uses local mock data. Backend is optional for testing.
"Messages not appearing"
- Check if Socket.IO is connected (open browser developer tools → Network tab)
- Fallback: Application uses polling every 2 seconds as backup
"Build errors"
- Run
npm installto ensure all dependencies are installed - Check Node.js version (should be 18+)
"TypeScript errors"
- Run
npm run buildto see detailed error messages - All current errors have been resolved in this version
- Check the console - Press F12 in browser and look for error messages
- Verify setup - Ensure all environment variables are set correctly
- Restart servers - Stop and restart both frontend and backend
- Clear cache - Delete
.nextfolder andnode_modules, then reinstall
- Next.js Documentation - Learn about Next.js features
- Socket.IO Documentation - Real-time communication guide
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
- Production Ready - Thoroughly tested and debugged
- Beginner Friendly - Extensive documentation and comments
- Modern Stack - Uses the latest versions of popular technologies
- Full Feature Set - Real-time chat with all essential features
- Mobile First - Responsive design that works everywhere
- Fallback Support - Works even when the backend is down
Ready to get started? Follow the Installation and Setup guide above to begin using the application.
Built using Next.js, Socket.IO, and modern web technologies