GSoC 2022 | Score Lab | Week 11, 12 & 13 | React Email project updates

Hi, welcome to the GSoC’22 Blogs Index 10 - the final blog of the series where I am documenting my complete journey as a contributor (Student Developer) from Day zero to the end date for Google Summer of Code 2022. Hope you enjoyed the series so far, so let’s get started one last time.

By the way, if you haven’t checked out the previous blog, then you can go through it here: Week 10 Blog

Today I’m going to share the work which I have done and the overall project updates from 22nd August to 11th September (weeks 11, 12 and 13 - Sprint K, L and M). As we’re moving towards the end of GSoC’22, it's time to gear up and finish the pending tasks quickly.

We had our Smart India Hackathon 2022 Grand Finale at Cambridge Institute of Technology - CIT in Bengaluru, Karnataka. So the time for week 11 (Sprint K) passed on participating in the hackathon finals and travelling to the Nodal Center in Bengaluru. As a result, the pending work got piled up but eventually, I managed to complete those tasks in the next weeks.

Add snapshot testing using storybookjs/test-runner

Problem:
Previously, as per issue #19, we tried to use @storybook/addon-storyshots to generate snapshots of our components and utils methods from our storybook stories. But unfortunately, that wasn’t working as per Pull Request #29. I dropped this issue to the official discord server of Storybook and also opened this as a question in Stack Overflow.

Solution:
I didn’t receive any answer or solution in Stack Overflow. But however, I got a reply from a Storybook’s admin (@kylegach) in Discord.

Storyshots is being replaced by the test-runner, with which you can use the test hook API to take snapshots: https://github.com/storybookjs/test-runner#experimental-test-hook-api.
Once that API is proven to be stable, we’ll update the docs to make this clear.

Also, I asked

Thanks a lot for the info, so can’t we use storyshots for our new projects for now?

And the answer was

It may work for some setups, but I wouldn’t advise it.

So now, we’re moving forward with storybookjs/test-runner with their Experimental test hook API to generate snapshots based on our Storybook stories.

In the Pull Request, I added the configurations and the generated snapshots for the snapshot testing based on our stories.

Linked Issue: #90
Merged Pull Request: #91

Add Docusaurus for docs

As per the findings for #62 and according to Pull Request #68, we need to add Docusaurus to our documentation website.

The Pull Request covered:

• Docusaurus setup
• Add config according to our project
• Initial pages inside /docs

Linked Issue: #92
Merged Pull Request: #93

Add deploy config and scripts for the Docs site

As discussed here in issue #74, we need to add the configurations and all the scripts to deploy our Storybook, TSDoc, and Docusaurus docs. A general script would help us to deploy all of our sites from a single folder.

The Pull Request covered:

• Add bash script to build Storybook, TypeDoc, and Docusaurus and rearrange them to the specific folders.
• Change Storybook config and use sed to replace the absolute path of TypeDoc.
• The final build folder will be in the docs-build folder

Linked Issue: #94
Merged Pull Request: #95

Implement default styles for the styled components

Since we implemented our styled-components and theme provider, we also needed to implement some default stylings for our components (Button, Link, Divider, Quote, etc.).
We needed to update the styles inside the defaultTheme object.

Linked Issue: #96

I added default styles inside the defaultTheme config and updated stories and snapshots of the respective components.

1. Implement default styles for styled Button
   • Linked Issue: #98
   • Merged Pull Request: #104
2. Implement default styles for styled Link
   • Linked issue: #99
   • Merged Pull Request: #105
3. Implement default styles for styled Divider
   • Linked Issue: #100
   • Merged Pull Request: #106
4. Implement default styles for styled Quote
   • Linked Issue: #101
   • Merged Pull Request: #107

Validate the compatibility of the generated HTML

The compatibility of the generated HTML content needed to be validated across different browsers and clients using some free or paid (not too costly) 3rd party APIs.

We chose mailtrap.io with their html-email-checker and Email APIs’ Get message spam score to send email using nodemailer, generate the report and check the score in the dashboard.

The Pull Request covered:

• Add validateEmail function which used mailtrap and nodemailer to send emails
• Using nodemailer under the hood to send the emails using mailtrap’s SMTP server

Linked Issue: #97
Merged Pull Request: #103

Fix defaultHTML for generateEmail method

The current defaultHTML had a few issues when comes to compatibility with the different email clients. We needed to optimize and fix the defaultEmail to add support for a better range of email clients.

We followed this template to add compatibility for a batter range of email clients.

Linked Issue: #108
Merged Pull Request: #109

Fix exports for CSSClasses and ThemeOptions

While creating one demo application and layout using our package in TypeScript, I realized that we needed CSSClasses and ThemeOptions interfaces to declare types for the variables. We needed to export these interfaces directly from the package so that users can use them. So I added missing interface exports for CSSClasses and ThemeOptions from the package.

Linked Issue: #110
Merged Pull Request: #111

Add default margin for button and image

I added a default margin to our Button and Image components to render correctly.

Merged Pull Request: #112

Final Burndown chart

Average Burndown Graph

I’ve also created and submitted the final report for the React Email project. You can check it out here. Also completed the Final Submission in the GSoC dashboard.

That’s it for the last work updates for GSoC 2022. It was really a rollercoaster journey for the last 3 months and I didn’t even realize how the time flew by so fast. I learned so many new things which I didn’t have any knowledge about before the GSoC and executed them on the go. For me, it was a lot of fun working on this project and I learned a lot of new things. I am really thankful to my mentors for their guidance and support throughout the project. Milindu was super helpful and helped me immensely in working on the project from helping me to solve some weird TypeScript issues to channelize me in the right direction to implement different new features and fixing the bugs. I’m really excited and looking forward to work under him once again in near future.

Also, I am extremely thankful to the SCoRe Lab community for their support and encouragement throughout the pre-GSoC and GSoC periods. I am really excited to see the future of the projects and I hope it will be a great success.

Thanks for being there till now, hope you’ve enjoyed the blogs. You can follow me on Medium if you’ve liked the blogs and want to see more such technical writeups in future.

Also, don’t forget to drop a star on the project GitHub repo! ⭐

GitHub — leopardslab/react-email: react-email

You can connect with me on LinkedIn, also don’t forget to give this blog a clap if you have liked it.

Additionally, you can follow me on GitHub and Twitter, it will be appreciated.

Adios 👋