EchMail

A Gmail-inspired web mail client built to practice modular Vue 3 state management, form validation, integrated workspace tools (Contacts, Keep notes, Calendar), and unit testing.

Live Demo GitHub

UI & frontend architecture project inspired by Gmail (client-side persisted workspace, not a real SMTP/IMAP mail server).

Key Capabilities

Inbox, Starred, Sent, Message thread reader, and validated Compose workflow.
Integrated Contacts manager, Keep notes list, and Calendar view inside the workspace.
Installable PWA manifest and unit-tested store/component behavior.

Technical Architecture

Vue 3 + Vue Router 4 multi-view layout with dedicated desktop three-pane shell and mobile header/drawer components.
Pinia state modules persisted to browser storage + VeeValidate & Yup schema validation on message composition.
Tailwind CSS + DaisyUI + modular SCSS partials for inbox density and responsive breakpoints.
5 Jest + Vue Test Utils unit test suites (`actions`, `links`, `props`, `state`, `views`) plus PWA service worker registration.

Technologies

Vue 3PiniaTailwind CSSDaisyUISCSSVeeValidateJestPWA