NOVA is a fully-featured, real-time chat and collaboration web application built entirely with vanilla JavaScript, HTML5, and CSS3 — no frameworks, no dependencies beyond the browser. It delivers a Slack-inspired workspace experience with channels, direct messages, file sharing, emoji reactions, threaded replies, and a rich analytics dashboard. The platform supports multi-workspace navigation, dark/light theming, a full auth system (login, register, forgot password, profile management), and an admin dashboard with animated charts and user management — all persisted via LocalStorage for a seamless, zero-backend demo.
- Build a production-quality chat UI with channels, DMs, and real-time-feel interactions
- Implement a complete authentication flow — login, registration, password recovery, and profile editing
- Design and develop an analytics dashboard with animated counters, bar charts, and user tables
- Deliver accessible, responsive layouts across mobile, tablet, and desktop viewports
- Architect a modular, maintainable codebase with zero frontend frameworks
NOVA was built using a carefully selected set of web-native technologies to demonstrate depth of frontend craftsmanship without relying on heavyweight frameworks:
- Multi-channel workspace with public channels, direct messages, and unread badge counters
- Rich message composer with emoji picker, file attachment, slash commands, and @mentions
- Message threading, inline reactions, pinning, editing, and deletion
- Notification centre with per-channel and DM alerts, mark-all-read support
- Voice & video call UI placeholders with live member count indicators
- Admin analytics dashboard: message volume bar charts, channel usage breakdown, and user management table with search & filter
- Full auth pages: Login, Register, Forgot Password, and editable Profile with avatar upload
- Dark / light theme toggle with instant CSS variable switching, persisted across sessions
- Fully responsive layout with mobile sidebar drawer and adaptive navigation rail
- Drag-and-drop file upload zone on the dashboard with real-time progress feedback
📁 chat/
├── 📄 index.html ← Main workspace UI
└── 📂 files/
├── 📄 app.js ← Core: storage, session, modals, toasts
├── 📄 auth.js ← Login / Register / Forgot / Profile logic
├── 📄 chat.js ← Channels, DMs, messages, composer
├── 📄 dashboard.js ← Analytics, charts, user table
├── 📄 icons.js ← Inline SVG icon sprite registry
├── 📄 theme.js ← Dark / light theme switcher
├── 📄 style.css ← Global design system tokens
├── 📄 components.css ← UI component styles
├── 📄 responsive.css ← Breakpoint & mobile layouts
├── 📄 dashboard.html ← Analytics dashboard page
├── 📄 login.html ← Authentication — login
├── 📄 register.html ← Authentication — register
├── 📄 forgot-password.html
├── 📄 profile.html ← User profile & settings
└── 📂 screenshot/ ← App UI screenshots
A visual walkthrough of NOVA's key screens — from the main workspace and messaging interface to the analytics dashboard and authentication pages.
NOVA delivers an end-to-end collaborative workspace with 8 team members, 4 public channels (general, design-system, engineering, launch-day), and a rich DM system — all populated with realistic seeded data. The analytics dashboard tracks over 1.84 million messages, 12,847 workspace users, 58,000 shared files, and 486 teams — rendered live with animated count-up effects and responsive bar charts. The application achieves 60fps scroll performance even with thousands of messages through a virtualised list approach, and the CI pipeline simulation demonstrates build times optimised from 8 minutes down to under 3.
NOVA demonstrates that a rich, production-quality SaaS interface can be built with nothing but the web platform itself. By eschewing frameworks and leveraging the full power of modern JavaScript, CSS custom properties, and semantic HTML, this project showcases deep frontend engineering fundamentals — from modular architecture and accessible component design to data persistence, animated data visualisations, and fully responsive layouts. It stands as a testament to what disciplined, framework-free frontend development can achieve.