React
Web Development
Email Signature Generator
Custom White-Label React Web App
Tools Used
React
HTML5 / SCSS
JavaScript (ES6)
Airtable API
Litmus
Git / GitHub
Node.js
Adobe XD
Challenges
- Ensuring email signature compatibility across major email clients.
- Providing a simple, user-friendly experience for employees with no technical background.
- Streamlining employee image management and keeping content synced without developer intervention.
Solutions
- Developed and refined the HTML signature template through extensive testing in Litmus, adjusting inline styles, table-based layouts, and conditional code to ensure consistent rendering across Gmail, Outlook, Apple Mail, and mobile clients.
- Designed and built a React-based web app that allows users to input their details and instantly preview their personalized signature. Implemented a one-click “Copy Code” feature and clear installation instructions to eliminate friction and support effortless adoption company-wide.
- Integrated the app with the Airtable API, allowing the company to manage employee headshots through a centralized, no-code database. Any updates made in Airtable automatically sync with the app, ensuring the most up-to-date images display in signatures without manual code changes.
My Role
This project involved designing and developing a custom white-label web application that allows companies to manage and distribute consistent, fully functional email signatures for all employees. Email signatures can be notoriously difficult to maintain due to varying email client standards and employee customization — this tool eliminates both issues.
The web app enables users to input their information, which is dynamically injected into a pre-tested HTML signature template built for cross-client compatibility. All email signature code was researched, designed, and tested in Litmus to ensure flawless rendering across platforms like Outlook, Gmail, and Apple Mail.
As the sole designer and developer, I built the app using React for dynamic interactivity and real-time previews. I integrated Airtable’s API to manage employee headshots, allowing teams to easily upload and update images without touching code. Once the user inputs their details, the generator displays a live preview of the finished signature and provides a one-click copy feature, along with step-by-step installation instructions.
The result is a streamlined, scalable, and foolproof solution that ensures visual consistency and brand integrity across all employee email communications.
Disclaimer: Due to the proprietary nature of the tool and to protect client privacy, a live link and source code are not publicly available. A limited demo can be provided upon request.