A full-stack, real-time chat application:
- Frontend: React + Vite (JSX), Tailwind CSS, Socket.IO client, React Router
- Backend: Node.js + Express, Socket.IO, MongoDB (Mongoose), JWT auth, Nodemailer
- Sign up, log in, log out
- Email verification on signup (real email via Gmail SMTP, or console-logged in dev if unconfigured)
- Forgot password / reset password via emailed link
- Add other users and start 1:1 conversations
- Real-time messaging (Socket.IO) — text + image messages
- Typing indicators, online/offline presence, "last seen"
- Profile page: avatar upload, phone number, bio
- Settings page: log out
chatapp/
├── client/ React frontend (Vite)
│ ├── src/
│ │ ├── api/ API call wrappers (axios) — one file per backend resource
│ │ ├── context/ AuthContext, SocketContext (global state)
│ │ ├── hooks/ useConversations, useMessages (data + real-time logic)
│ │ ├── components/ Reusable UI building blocks
│ │ ├── pages/ Route-level screens
│ │ └── utils/ Formatting helpers
│ └── .env VITE_API_URL — where your backend lives
│
└── server/ Express backend
├── src/
│ ├── config/ DB + Cloudinary setup
│ ├── models/ Mongoose schemas: User, Conversation, Message
│ ├── controllers/ Route handler logic
│ ├── routes/ Express routers
│ ├── middleware/ Auth guard, file upload handling
│ ├── sockets/ Socket.IO real-time event handlers
│ └── utils/ JWT helpers, email sending, demo data seeder
└── .env All secrets and config (DB, JWT, email, uploads)