🗨️ Talketeer

Talketeer is a full-stack, real-time chat application built with the MERN stack and Socket.io.
It delivers an intuitive chatting experience with real-time messaging, room creation, typing indicators, and message persistence — all wrapped in a modern and responsive interface.

💬 The design takes some inspiration from Discord, because I use it a lot!

✨ Overview

Talketeer focuses on providing a smooth and reliable real-time communication system with:

• 🔐 Email-based registration & login
• 🔄 Tokenized password reset flow
• 💬 Public & private chat rooms
• ⚡ Real-time messaging and typing indicators
• 🕓 Message history and recent chat fetching
• 👥 Room management (owner kick/ban controls)
• 🪟 Tenor integration
• 🎨 Clean, minimal UI built for responsiveness

🖼️ Screenshots

Unauthorized (not logged in) pages:

• Landing page

  <img width="1556" height="742" alt="0" src="https://github.com/user-attachments/assets/66d2a175-578a-4bbe-95ca-c39b3c13c30c" />

• Login/Register page

  <img width="1556" height="742" alt="0 5" src="https://github.com/user-attachments/assets/78ede18a-6125-4c43-ac0c-3bdfdd6e9a36" />

Authorized (logged in) pages:

• Chat page

  • Not in a room

    <img width="1556" height="744" alt="1" src="https://github.com/user-attachments/assets/eb1f36ac-8b69-4790-a30e-cf4046f0cca9" />

  • Not in a room, notifications dialog open

    <img width="1556" height="744" alt="5" src="https://github.com/user-attachments/assets/5073722f-a96b-4d1b-8c41-6e2c85165c15" />

  • In a room

    <img width="1556" height="744" alt="2" src="https://github.com/user-attachments/assets/f2a7bfb1-42a9-457e-85c8-1e4c5e163076" />

  • In a room, member list and room list expanded

    <img width="1556" height="744" alt="3" src="https://github.com/user-attachments/assets/10d1af4a-6780-45fb-a317-692c62b11d0f" />

  • In a room, member list and room list collapsed

    <img width="1556" height="744" alt="4" src="https://github.com/user-attachments/assets/64131047-7aa4-4914-8d92-fae325edcc49" />

Other pages:

• Loading page (Animated spinner)

  <img width="1544" height="734" alt="image" src="https://github.com/user-attachments/assets/b35836af-0fa6-47b3-8a42-638fb41e5095" />

• Not found page

  <img width="1548" height="737" alt="image" src="https://github.com/user-attachments/assets/135cf76a-5028-43d0-80bd-731e4999b42c" />

• Error page

  <img width="1545" height="736" alt="image" src="https://github.com/user-attachments/assets/25d1ce86-d5e2-4279-8e85-1bebcd52d3e9" />

📂 Project Structure

talketeer/
├── backend/      # Express + TypeScript + Socket.io server
├── frontend/     # React + Vite + TypeScript client
└── README.md     # (You’re here!)

Each subdirectory includes its own README with setup and development instructions.

🧑‍💻 Author

Made with ♥️ by Sumit Chaurasiya.