🌐 Juntopia — Real-Time Chat & Language Learning Utopia

Juntopia is derived from two words:

• Junto (Spanish): Together
• Utopia (Greek): An ideal place

Originally envisioned as a language learning platform, Juntopia evolved into a seamless communication space focused on real-time conversation, video calling, and community interaction — all essential to immersive language practice. It's a place where users can connect, speak, and learn together.

---

📸 Preview

Chat UI	Video Call

---

🚀 Features

• 💬 Real-time messaging using Stream Chat SDK
• 📞 One-on-one video calling powered by Stream Video SDK
• 🧑‍🤝‍🧑 Friend requests (accept/reject)
• 🔁 Threaded replies & reactions
• ✍️ Typing indicators & presence updates
• 🎨 32+ dynamic themes with DaisyUI
• 🔔 Toast notifications for actions/events
• 🧠 State management with Zustand
• 💡 Theme persistence with localStorage
• 🔐 Login authentication via token system

---

⚙️ Tech Stack

Frontend: React 19, Vite, TailwindCSS, DaisyUI, Zustand, React Query, React Router 7
Realtime Infra: Stream Chat SDK, Stream Video SDK
UI Tools: Lucide Icons, React Hot Toast

No socket.io, no manual WebRTC — Stream handles it all

---

---

🛠️ Getting Started (Installation & Setup)

✅ 1. Clone the Repository

git clone https://github.com/your-username/juntopia.git
cd juntopia

✅ 2. Install Dependencies

npm install

✅ 3. Configure Environment Variables

Create a .env file in the root directory and add:

VITE_STREAM_API_KEY=your_stream_api_key
VITE_STREAM_SECRET_KEY=your_user_token

🔐 Get your API keys from https://getstream.io/dashboard

---

▶️ Run the App Locally

npm run dev

Visit http://localhost:5173 in your browser.

---

🚀 Deployment

• Push to GitHub
• Deploy using Vercel or Netlify
• Add the same .env variables in the platform settings
• Done 🎉

---

🌈 Theme System

Juntopia includes 32+ prebuilt themes via DaisyUI:
light, dark, cupcake, dracula, luxury, cyberpunk, aqua, forest, valentine, retro, and more!

Themes are persisted with localStorage. Customize in tailwind.config.js:

daisyui: {
  themes: ["light", "dark", "cupcake", "dracula", "luxury", "forest"]
}

---