Project Type: UI/UX Design
Tools Used: HTML, CSS, JavaScript, firebase, Git Status: In Progress

This repository contains the UI/UX design and basic functionality for a Discord Clone, replicating the key features of Discord's chat interface. It includes dynamic server navigation, a customizable chat window, and an interactive user experience.

• Servers Sidebar 🖥️:

  • Displays a list of servers with icons and status indicators.
  • Interactive hover effects for server navigation. 🔄

• Channel Navigation 🗂️:

  • Organizes channels into categories with collapsible groups.
  • Allows users to switch between text and voice channels 🎙️.

• Chat Interface 💬:

  • Features user avatars, timestamps, and message grouping. ⏰
  • Includes popover actions like emoji reactions 😀 and options to edit ✏️ or delete 🗑️ messages.

• Responsive Design 📱:

  • Fully responsive layout optimized for various devices (mobile, tablet, desktop).

• Dynamic Components ⚙️:

  • Interactive modals for settings ⚙️ and new channel creation ➕.
  • Real-time message typing animation (simulated) ⌨️.

• Dynamic search 🔎:

  • Real-time filtering of users as you type 🔎 by Search by Discord ID with instant results 🕶.
  • Detailed user cards for search results 📋.

• HTML: Structure for the layout and components.
• CSS: Styling for modern aesthetics and responsive design.
• JavaScript: Adds interactivity (e.g., modals, collapsible menus).
• firebase: for hosting and add database.

• For Designers: Use this as inspiration for crafting modern chat interfaces.
• For Developers: Build upon this base to implement full chat functionality with a backend.

You can access the games here: HERE

```php
discord-clone/
├── icons/
├── images/
├── imgs/
│   ├── avatars/
│   └── servers/
├── styles/
├── channels-sidebar.css
├── chat-sidebar.css
├── chat.css
├── home.html
├── index.html
├── modal.css
└── script.js
├── servers-sidebar.css
├── styles.css
├── theme.css
├── other files about hosting/

If you’d like to contribute to this project, feel free to fork the repository and submit pull requests. Contributions are welcome!

• Made by Wolfix
• Feel free to contact me for any queries or feedback.