MailDeck

Turn email chaos into clarity with MailDeck.

Comment

Inspiration

The inspiration for MailDeck stemmed from a personal experience: I had ~25,000 unread emails and had struggled to discern the content of just a few, let alone thousands. I figured there must be a better way of viewing emails, especially with current technological advancements, where we have tools like Artificial Intelligence that can enhance productivity.

What it does

MailDeck is an email client that combines modern functionality with a retro-inspired theme. It is designed to streamline email management, offering:

  • Organized Inbox: Easily view and navigate your emails with a clean, intuitive interface.
  • Starring & Read Tracking: Mark emails as read or starred to keep track of important messages.
  • Daily Digest: Receive a summarized feed of recent emails for quick updates.

How we built it

MailDeck was developed using a combination of technologies:

  • Frontend: Built with React and styled using CSS
  • Backend: Implemented with Node.js and Express. Used JWT for secure user sessions and route protection
  • Database: MongoDB Atlas
  • APIs: Google Mail API, Google Gemini API

Challenges we ran into

During development, I encountered a couple challenges:

  • Unified inbox: I wanted to have the option where the user can link multiple accounts to have one centralized email client, however, due to time constraints, I was unable to implement it.
  • Updating client: Currently, my system updates every 2 minutes so that the user behavior is not constantly refreshing to get an email. However, I would have preferred to use WebSockets and event listening to instantaneously get that data.

Accomplishments that we're proud of

Despite challenges, certain features are notable:

  • Retro Remix theme: Going into the project, I really wanted to encapsulate the nostalgic vibe, and I feel that I was very strong in that area.
  • Dynamic Compose Panel: Developed a flexible panel that slides in from the right and supports minimizing/maximizing, Cc/Bcc toggles, and a responsive design.

What we learned

Building this project provided some very valuable insights:

  • Backend security practices: Normally I store user session tokens in local storage but working off what I have learned recently, I implemented JWT-based session management and used it as a middleware for route protection.
  • UI/UX: Designing is a critical aspect of any client, and a lot of planning goes into it. A retro theme is something I had never worked with, so learning different CSS techniques to achieve that look was very valuable.

What's next for MailDeck

Future developments include:

  • Unified Multi-Account Inbox: Enable option for users to link multiple email accounts into the web client.
  • Advanced filtering & NLP Search: Add smarter email filtering and search capabilities to enhance effectiveness.

Built With

Share this project:

Updates