Chattera

Today’s Progress – Devlog
We completely tore down and rebuilt the channel system today. The app finally has that authentic Discord vibe now!

Fully Dynamic Structure: Channels are no longer hardcoded. You can now create new categories (+📁) and text channels (+) directly from the UI. Categories can also be collapsed to keep things clean.

Drag & Drop: If you don’t like the layout, just grab a channel or a category and drag it wherever you want. It even works flawlessly across different categories.

Real-time Deletion & Reactions: * Sent something stupid? You can now delete it (🗑️) and it vanishes from everyone’s screen instantly.

Added reaction emojis via a sleek hover menu (👍, ❤️, 😂, etc.). The system tracks, counts, and syncs them in real-time, including toggle support if you click again to remove your reaction.

Smarter Message Feed: The chat wall now builds from the bottom up (column-reverse), meaning few messages sit right above the input bar, just like Discord. Also, the UI blocks typing if you haven’t selected a channel or if all channels are deleted.

Database & State Fix: Migrated all message querying to MongoDB’s native _id system, which completely fixed the bugs with reactions and deletion. On top of that, your custom channel layout is now saved in localStorage, so a page refresh won’t ruin your setup.

Chattera – Today’s Summary

Bug Fixes (Backend):

-Server Crash: Fixed UserSchema typo, so Node.js starts now.

-500 Registration Error: Imported bcrypt, password encryption now works.

-Empty Data: Activated express.json(), so the server can see the fields sent from the frontend.

-Code Cleanup: Cleaned up the server.js structure, API and Socket.io are separated.

New Features (Frontend & Backend)

-Login: /login route is ready (user verification + password comparison).

-F5 Protection: Connected the code to localStorage. You will stay logged in after a page refresh.

-Logout: The button now clears the memory, allowing you to log out safely.

-Theme Switcher: Added ☀️ Light / 🌙 Dark mode button to the login interface, which remembers the selected theme even after updating.

I made a register-login panel, but currently when I press register/login button it shows error.

The current development would be to keep the messages when someone reloads the page, but I haven’t had any success so far.

Chattera is a modern, real-time communication platform inspired by the popular application Discord. It allows users to instantly exchange messages across various themed rooms (channels) through a sleek, dark-themed, and user-friendly interface.

The system is built on a modern web technology stack: React powers the fast and dynamic user interface, while a Node.js server runs in the background to handle lightning-fast data exchange using Socket.io.Key Features
Instant, Real-Time Messaging: No page refreshes required; messages appear on other users’ screens within milliseconds.

Themed Channels (#): Conversations are organized into separate rooms (e.g., general, gaming, memes), keeping different topics well-structured and organized.

Quick Join: No complicated registration process; users can instantly jump into the conversation just by entering a unique username.

Gamer-Friendly “Dark Mode” Design: A sleek, dark grey aesthetic that is easy on the eyes, even during long sessions.

Use Cases (What is it good for?)
For Friends: An excellent platform for friends to stay in touch, hang out, and chat while gaming or watching movies together.

For Study Groups: Different subjects or projects can have their own dedicated channels, keeping information, links, and notes organized.

As a Portfolio Project: From a developer’s perspective, Chattera perfectly demonstrates the fundamentals of Full-Stack development, client-server architecture, and managing real-time network protocols (WebSockets).

Tech Stack
Frontend: React.js, HTML5, CSS3

Backend: Node.js, Express.js

Protocol: Socket.io (WebSocket technology for bi-directional, real-time communication)