Building an UI for Email Inbox

Hello everyone,

I’m planning to create an email inbox app that interfaces with Nylas to receive, compose, and send messages. I envision this app to resemble an email client like Outlook or Gmail. I'm currently figuring out which components to use to create a clear and functional UI. I’ve decided to use a sidebar for the folders (like Inbox, Sent, etc.), but I'm unsure about the best components to use for the rest of the email interface.

I'd like to display the folders, and when a folder is clicked, a list of emails should appear, showing the subject, a brief description, and the sender’s information. Additionally, I want to design a view where clicking on an email will display it in a large window, similar to the Outlook interface.

I would appreciate any suggestions on how to approach this.

Hi Lino!

First of all: :clap:!

This project has been in my bucket list for a while! Do feel free to use me as tester buddy or any feedback you need. I really like Nylas (although didn't have enough time to go through their last v.3 API version, which seems to be even more efficient!)

I did something similar for a client(like an inbox of sorts for a sales pipeline) and used the following:

  • A simple table for the list of emails
  • An HTML component that pulled the HTML body key from Nylas API using the selectedSoureRow.html of the above table
  • For subject and Senders I used the text components

This worked quite well and users were happy as the API was pulling all of the emails of any given contact they looked into within the sales pipelien or directory.

2 Likes

We can build an email inbox using custom components.