💬 Chat App Frontend

Frontend interface for a real-time chat application.
Built with React, Socket.IO, and Next.js.

This project connects to the backend at:
chat-app-backend

---

🧩 Overview

This is the client-side application for a full-stack real-time chat system.
It allows users to register, login, manage friends, and exchange messages in real-time.

---

⚙️ Tech Stack

• React
• Next.js
• Socket.IO Client
• CSS Modules
• JavaScript (ES6+)

---

🔧 Features

• 🔒 Authentication (JWT-based)
• 📨 Send and receive messages in real time
• 🧑‍🤝‍🧑 Friend request system
• 💬 Dynamic chat list and updates
• 🎨 UI based on Figma wireframes

---

📁 Project Structure

chat-app-frontend/
├── assets/           # Wireframes, icons, etc.
├── css/              # Global styles and modules
├── pages/            # Route-based pages
├── services/         # API and Socket.IO logic
├── public/           # Static files (favicon, preview images)
└── package.json

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/MatheusIshiyama/chat-app-frontend.git
cd chat-app-frontend

2. Install dependencies

npm install
# or
yarn

3. Run the development server

npm run dev

The frontend expects the backend to run on http://localhost:4000

---

🧱 Wireframes

I designed the UI wireframes in Figma.
You can view the original file here.

---

🚀 How It Works

1️⃣ Register & Confirm Email

Create an account and confirm your email address to get started.

---

2️⃣ Login

After confirming your account, log in using your username and password.

---

3️⃣ Add Friends

Send a friend request by entering your friend's username.

---

4️⃣ Start Chatting

Open a chat and start sending messages in real time!

---

📄 License

Licensed under the MIT License.

---

👤 Author