This is a submission for the Postmark Challenge: Inbox Innovators.

Intro

Welcome to the Emailverse 📬✨
A universe where the only form of internet communication is - you guessed it - email.

Craving a slice of pizza? 🍕 Send an email.
Need a ride downtown? 🚗 Email.
Want to tell your bestie you just landed that dream job? 🎉 Email.
Feeling the itch to crush your bosom buddy in a fierce game of Connect Four just so you can brag for all eternity? 🟡🔴 Yup… email.

Because in this world, if it’s not in your inbox, it doesn’t exist. 📥🔥

What I Built

So, I built the classic Connect Four game—but with a twist: it lives entirely in the Emailverse 📧.

You and a friend (or a worthy office rival) take turns dropping discs 🎯 into a 7×6 grid, all through email. The rules? Simple: be the first to line up four of your discs - horizontally, vertically, or diagonally - and bask in eternal emailverse glory🏆.

Whether you're unwinding after a long day 😌 or spicing up your work chats with a little friendly competition 💼⚔️, Email Connect Four has your back... one move at a time.

Demo

You can watch a video of how the game works here.

If you wanna test it out yourself, click here to start a game and continue by sending responses to the emails.

Code Repository

Connect Four Backend: Repository Link
Connect Four Frontend: Repository Link

How I Built It

At first, I thought building this was going to be pretty straightforward. Then I got into it and started seeing potential issues I had to fix but it was really fun to build. The user flow goes like this:

• Any of the players go to the website to start the game. Clicking the start game button sends an API request to the backend to create a new game for the users.

• The backend which was built using Express and MongoDB as the database stores every game. Each game entity comprises of the email of the two players, the player that is supposed to make the next move, and the game state i.e the board that is shown in the emails.

• When the game is created, the first player gets an email inviting them to make their move. When they respond, Postmark's inbound email parsing swoops in to make the parsing process very easy. I used the StrippedTextReply field to get the command the user sent. In cases where their response can't be determined, I send an email to them to send a valid response.

• Upon parsing their command, I update the game state and send another mail to the other player inviting them to make their next move. If a user wins or the game is drawn, I also send mails to both players and prompt them to head to the website to start a new game.

Problems I Had To Solve

• Generating the board to show users in their emails seemed tedious at first but I ended up using puppeteer. I basically draw up the board template in the puppeteer browser, update the required cells with colors depending on the game state and take a screenshot. Deploying a server that uses puppeteer also proved diffifult initially but I ended up dockerizing the application and using DigitalOcean App Platform which works seamlessly for this use case.

• When game emails are sent to gmail accounts for the first time, the Gmail client does not show the proper name for the Sender, instead it just shows the email address of the sender. Whenever this happens, if the user clicks the reply button in the Gmail client, the "To" field will be prepopulated as the "From" field instead of the "ReplyTo" field. To go around this, I had to add a note in the emails that users ensured their responses were being sent to the correct email address. Given that Postmark's default mailbox for Inbound Email was rather long and not user-friendly, I set up Email Forwarding easily using the Postmark Documentation.

• This is a rather small bug I noticed on the Postmark Dashboard where the webhook URL for the Inbound Email will retain an older value even after I typed in a new value and saved. A quick refresh of the page fixes this issue though so it wasn't a big deal.

Big ups to the DEV.to and Postmark for setting up this hackathon. I really had fun working on this. If you have any feedback or just wanna talk, you can reach me on any of the social media accounts in my profile❤️.