Red chat
Prompt
Build a fully responsive, modern, production-ready online chat web application using React (latest version), Vite, Tailwind CSS, React Router, Framer Motion, and Lucide React icons. The project should be cleanly structured with reusable components and well-commented code so I can easily edit, customize, and scale the entire website later. Theme & Design Dark theme by default Inspired by Discord, WhatsApp Web, and Telegram Web Premium UI with smooth animations Modern glassmorphism effects Rounded corners Soft shadows Beautiful gradients Mobile-first responsive design Attractive typography Minimal but professional appearance Optimized for users between 15–35 years old Fast loading Accessible UI Hover animations Loading skeletons Smooth transitions Use a color palette similar to: Background: #0F172A Cards: #1E293B Accent: #6366F1 Success: #22C55E Error: #EF4444 Text: White / Gray Authentication Page Create a beautiful login screen with: App logo App name Username (Nickname) User ID Password Password must be exactly 8 characters Show password toggle Remember Me checkbox Login button Sign Up button (UI only) Forgot Password link (UI only) Form validation Nice animations Toast notifications Login validation: Username required User ID required Password required Password must be exactly 8 characters Store login information temporarily using localStorage. Chat Layout After login, navigate to the chat application. Layout: Left Sidebar App Logo Search users Online Users section Active Users list User avatars Status indicator Profile card Settings button Logout button Sidebar should collapse on mobile. Main Chat Window Top Bar: Global Chat title Number of online users Search messages Notifications icon Theme switch (Dark/Light) Chat Area: Message bubbles Different colors for own messages Avatar Username Timestamp Auto-scroll Date separators Typing indicator Smooth animations Bottom Input: Text input Emoji button Send button Character counter Enter to send Shift+Enter for new line Simulate real-time messaging using React state or mock JSON data for now. No backend is required initially. Features Include: Real-time simulated chat User joins/leaves notifications Online status Typing indicator Message timestamps Responsive layout Auto-scroll Search messages Search users Theme toggle Profile dropdown Notification badges Smooth page transitions Keyboard shortcuts LocalStorage persistence Component-based architecture Easy customization Admin Visibility Notice Add a Terms & Conditions modal shown on first login. It should contain the following points: Chat Transparency Notice Messages in this chat are currently not end-to-end encrypted. Messages may be visible to platform administrators for moderation, security, maintenance, or legal compliance. Users should avoid sharing highly sensitive personal or financial information until end-to-end encryption is available. End-to-end encryption is planned for a future update. By continuing, users acknowledge and accept these conditions. Include: Scrollable Terms & Conditions Checkbox: "I have read and agree to the Terms & Conditions." Disable the Continue button until the checkbox is selected. Mock Data Generate 20 sample users. Generate approximately 100 realistic chat messages with: Different usernames Different timestamps Emojis Casual conversations Join/Leave messages Typing examples Folder Structure Organize the project professionally: src/ components/ pages/ hooks/ context/ layouts/ services/ utils/ assets/ data/ styles/ Code Quality Requirements: Clean architecture Reusable components Well-commented code Easy to modify Consistent formatting ESLint-friendly Tailwind best practices Responsive everywhere Future Backend Ready Structure the project so a real backend (Firebase, Supabase, Socket.io, or Node.js) can be integrated later with minimal changes. Bonus Features If possible, include: Pinned messages Reply to messages Emoji reactions Message editing Message deletion User profile modal Dark/Light mode Notification sound Animated typing indicator Online/offline animations Empty state illustrations Beautiful loading screen Modern 404 page Custom scrollbar Floating action buttons Glassmorphism effects Gradient buttons Framer Motion animations Fully mobile responsive The final result should look like a polished, modern chat application that could realistically be launched as a real product, with code that is easy to extend and maintain. Theme & Design Dark theme by default Inspired by Discord, WhatsApp Web, and Telegram Web Premium UI with smooth animations Modern glassmorphism effects Rounded corners Soft shadows Beautiful gradients Mobile-first responsive design Attractive typography Minimal but professional appearance Optimized for users between 15–35 years old Fast loading Accessible UI Hover animations Loading skeletons Smooth transitions Use a color palette similar to: Background: #0F172A Cards: #1E293B Accent: #6366F1 Success: #22C55E Error: #EF4444 Text: White / Gray Authentication Page Create a beautiful login screen with: App logo App name Username (Nickname) User ID Password Password must be exactly 8 characters Show password toggle Remember Me checkbox Login button Sign Up button (UI only) Forgot Password link (UI only) Form validation Nice animations Toast notifications Login validation: Username required User ID required Password required Password must be exactly 8 characters Store login information temporarily using localStorage. Chat Layout After login, navigate to the chat application. Layout: Left Sidebar App Logo Search users Online Users section Active Users list User avatars Status indicator Profile card Settings button Logout button Sidebar should collapse on mobile. Main Chat Window Top Bar: Global Chat title Number of online users Search messages Notifications icon Theme switch (Dark/Light) Chat Area: Message bubbles Different colors for own messages Avatar Username Timestamp Auto-scroll Date separators Typing indicator Smooth animations Bottom Input: Text input Emoji button Send button Character counter Enter to send Shift+Enter for new line Simulate real-time messaging using React state or mock JSON data for now. No backend is required initially. Features Include: Real-time simulated chat User joins/leaves notifications Online status Typing indicator Message timestamps Responsive layout Auto-scroll Search messages Search users Theme toggle Profile dropdown Notification badges Smooth page transitions Keyboard shortcuts LocalStorage persistence Component-based architecture Easy customization Admin Visibility Notice Add a Terms & Conditions modal shown on first login. It should contain the following points: Chat Transparency Notice Messages in this chat are currently not end-to-end encrypted. Messages may be visible to platform administrators for moderation, security, maintenance, or legal compliance. Users should avoid sharing highly sensitive personal or financial information until end-to-end encryption is available. End-to-end encryption is planned for a future update. By continuing, users acknowledge and accept these conditions. Include: Scrollable Terms & Conditions Checkbox: "I have read and agree to the Terms & Conditions." Disable the Continue button until the checkbox is selected. Mock Data Generate 20 sample users. Generate approximately 100 realistic chat messages with: Different usernames Different timestamps Emojis Casual conversations Join/Leave messages Typing examples Folder Structure Organize the project professionally: src/ components/ pages/ hooks/ context/ layouts/ services/ utils/ assets/ data/ styles/ Code Quality Requirements: Clean architecture Reusable components Well-commented code Easy to modify Consistent formatting ESLint-friendly Tailwind best practices Responsive everywhere Future Backend Ready Structure the project so a real backend (Firebase, Supabase, Socket.io, or Node.js) can be integrated later with minimal changes. Bonus Features If possible, include: Pinned messages Reply to messages Emoji reactions Message editing Message deletion User profile modal Dark/Light mode Notification sound Animated typing indicator Online/offline animations Empty state illustrations Beautiful loading screen Modern 404 page Custom scrollbar Floating action buttons Glassmorphism effects Gradient buttons Framer Motion animations Fully mobile responsive The final result should look like a polished, modern chat application that could realistically be launched as a real product, with code that is easy to extend and maintain.
A system prompt was added to support web rendering
