An email client demo built with Svelte 5 and SvelteKit, showcasing modern front-end skills.
Design reference and inspiration: Simple Lightweight Email Client
Huge thanks to Talha Kaya for the original design.
The email model and system design are intentionally out of scope—they're simply there to keep the UI going.
The original design only provided a desktop view. While a mobile layout was inferable, development followed a desktop-first approach. Certain elements, like the accounts' gear icons, lacked clear functional specifications and were placed solely for visual purposes. Snoozing functionality was skipped as it seemed redundant for a demo.
Design system tokens were derived from the original design and refined to enhance coherence and contrast. A dark theme was subsequently generated based on these tokens. Users can create labels with custom colors, which are stored in sessionStorage.
Since file blobs cannot be stored in sessionStorage, they are lost when the page is refreshed or the tab is closed. Although IndexedDB could be utilized, this option was not considered due to security and persistent storage concerns.
Some components can be extracted to UI components like buttons, and many variables can be moved to a centralized constants file.
- Session Storage Persistence: All emails and compose drafts automatically save to
sessionStorageand restore on page load. - Debounced Auto-Save: Compose emails save after 200ms of inactivity, preventing excessive writes.
- Real-time Filtering: Search results update instantly as you type, with derived state computing filtered lists.
- Image Preview Management: Attachments generate object URLs with automatic cleanup on component unmount.
- Inline Error Messages: Recipient fields validate email format, detect duplicates, and show error tooltips immediately.
- Search Settings Enforcement: Requires at least one search scope (Contact, Subject, Content) to be selected.
- Empty States: Lists display friendly "Empty!" message when no results exist.
- Smooth Transitions: Expandable fields, dropdowns, accordions, and confirmations use slide animations (150ms).
- Attachment Animations: Files and images flip on entry, blur on removal.
- Icon Rotations: Settings icon rotates 90° on dropdown open, chevrons rotate 180° on accordion expand.
- Visual Feedback: Search icon pulses during typing, stars fill on toggle.
- Mobile-First Layout: Responsive breakpoints adapt the interface for smaller screens.
- Scroll Management: Custom scrollbars with gutter stability prevent layout shifts.
- Theme System: Dark/light mode with system preference detection and local storage persistence.
- Keyboard Navigation: Full keyboard support—Enter to add recipients, Backspace to remove, Escape to close menus, Space/Enter to confirm actions.
- Focus Management: Auto-focus on errors and input fields; focus moves logically when removing items.
- ARIA Labels: Search, theme switcher, and avatars include descriptive labels for screen readers.
- Debounced Search: 200ms delay prevents excessive filtering operations.
- Duplicate Prevention: Attachment upload blocks duplicate files using content-based IDs.
- Smart Formatting: File sizes display human-readable values (bytes, KB, MB, GB); file type icons map to extensions.
- Floating Compose: Draft window floats above content with expandable CC/BCC/Subject fields.
- Advanced Search: Dropdown allows case sensitivity and search scope selection.
- Avatar Generation: Deterministic colors from names with mix-blend mode for visual consistency.
- Confirm Delete: Hover-to-confirm with 3-second revoke window prevents accidental deletion.
- Label Management: Color picker with live preview and inline validation.
- Folder Counts: Real-time email counts update automatically in sidebar navigation.