ezMail banner

ezMail

8 devlogs
19h 31m 34s

ezMail is a website built with Next.js that lets users easily browse beautiful HTML email templates and then customise and export them effortlessly. For the problem statement, target audience, and how‑to, visit the README.

This project uses AI

GH copilot autocompletions
ChatGPT for how to actually make HTML email templates

Demo Repository

Loading README...

Shaarav4795

Shipped this project!

I built ezMail, a web utility that makes creating HTML emails EASY! I wanted to spice up my emails, and not make it a hassle, so I felt this was a nice way to do so. Probably the hardest part was getting the copy button to work and just building the clean UI.

Shaarav4795

I cleaned up the code way more… I know I’ve said this before, but previously I just moved a few components here and there and called it a day. However, I did a full refactor and meticulously moved every single component, well, not every single one, obviously - I don’t have time for that. I also cleaned up some obscure references to my old project name, so I just wanted to migrate everything to the new ezMail name that my project uses. Nothing much else, it’s just a bit of polishing here and there to get it ready, because I’m going to ship next.

Attachment
0
Shaarav4795

I added a demo video to the site and added optimisation for server side rendering for CLoudflare Pages which is what I will use to host the site.

Attachment
0
Shaarav4795

I cleaned up some of my code and put lots of things into their own components. I also finished writing the README for this project, which includes the problem statement and target audience (my dad totally did not tell me to put this in).

Attachment
0
Shaarav4795

I enhanced the templates quality and made them more distinct (because before they were basically the same except for different text). Overall, this makes it feel so much more polished, and the website truly feels complete now :)
Now I just need to make this ship ready and polish the polishings…

Attachment
Attachment
Attachment
0
Shaarav4795

I added the export page. Here, the user can see a final live preview and export it for sending, by either copying, downloading it as .eml (a type of file format for emails), or pressing the open in mail button. By far the most difficult thing was getting the copy button to work as I had to research only to find out that you don’t copy HTMl, you copy DOM (which is basically the rendered part). However, I’m super happy with this screen, and my next job will be to improve the quality of the templates.

Attachment
0
Shaarav4795

I completely implemented the editor page. The editor page opens when you click start building and allows the user to edit the text in the template, and change fonts, colours, and text effects using a floating top bar, similar to Canva. It took a lot of time to get right because sometimes images wouldn’t load, and on smaller devices it was very cramped. But finally, after 6hrs (😅) I’m done… at least with this page :)
(AI used in this: the text for the emails and actually designing HTMl email templates as there are so many restrictions)

Attachment
0
Shaarav4795

I made the template gallery look MUCH better by adding previews, adding an adaptive grid layout, and filters on the side. I also coded an algorithm that dynamically adjusts the grids for a better experience.

Attachment
0
Shaarav4795

I designed the landing page for the website. I spent a lot of time on this because I wanted it to look STUNNING!! I used a greyscale colour scheme as that is my personal preference. I also scaffolded a template library that will use a grid design. It’s not 100% done yet but I should be able to finish it in an hour or so…

Attachment
Attachment
0