CodeInChat — Frontend

Frontend for CodeInChat, a collaborative learning platform enabling users to create and share code cards (step-by-step programming tasks), chat in groups, and interact in real-time.

🛠️ Tech Stack

• ⚛️ React (with Vite)
• 🌈 Chakra UI
• ⚡ Axios
• 🔐 Cookie-based Auth (via Rails API)

📷 Preview

📦 Setup

• backend: https://github.com/GPFE/CodeInChat-Backend-V3.git

git clone https://github.com/GPFE/CodeInChat-Frontend.git
cd CodeInChat-Frontend
npm install
npm run dev

🧩 Features

• ✅ Group creation and management
• 💬 Messaging between users
• 🧠 Interactive code cards (step-by-step programming tasks)
• 🔐 Auth via cookies (secure + HTTP-only)
• ⚡ Fast, modern UI with Chakra UI

🔐 Auth Note

Authentication is handled using HTTP-only cookies for enhanced security (migrated from JWTs to prevent XSS/Token theft risks).

📌 TODO

• Add Markdown support to code cards
• Real-time messaging (WebSocket integration)
• Dark mode toggle