Mail 📧

Project 3 of the CS50 Web Development Course with Python and JavaScript

Task 💻

Design a front-end for an email client that makes API calls to send and receive emails.

Specification 📝

• Send Mail: When a user submits the email composition form, JavaScript code is added to actually send the email.
  • A POST request to /emails, passing in values for recipients, subject, and body.
  • Once the email has been sent, the user’s sent mailbox is loaded.
• Mailbox: When a user visits their Inbox, Sent mailbox, or Archive, load the appropriate mailbox.
  • A GET request is made to /emails/<mailbox> to request the emails for a particular mailbox.
  • When a mailbox is visited, the application should first query the API for the latest emails in that mailbox.
  • When a mailbox is visited, the name of the mailbox should appear at the top of the page (this part was already done).
  • Each email should then be rendered in its own box (e.g. as a <div> with a border) that displays who the email is from, what the subject line is, and the timestamp of the email.
  • If the email is unread, it should appear with a white background. If the email has been read, it should appear with a gray background.
• View Email When a user clicks on an email, the user should be taken to a view where they see the content of that email.
  • A GET request is made to /emails/<email_id> to request the email.
  • The application should show the email’s sender, recipients, subject, timestamp, and body.
  • Once the email has been clicked on, you should mark the email as read. Recall that you can send a PUT request to /emails/<email_id> to update whether an email is read or not.
• Archive and Unarchive Allow users to archive and unarchive emails that they have received.
  • When viewing an Inbox email, the user should be presented with a button that lets them archive the email. When viewing an Archive email, the user should be presented with a button that lets them unarchive the email. This requirement does not apply to emails in the Sent mailbox.
  • Once an email has been archived or unarchived, the user’s inbox will be loaded.
• Reply: Allow users to reply to an email.
  • When viewing an email, the user should be presented with a “Reply” button that lets them reply to the email.
  • When the user clicks the “Reply” button, they should be taken to the email composition form.
  • The composition form is pre-filled with the recipient field set to whoever sent the original email.
  • The subject line is alsp pre-filled
  • The body of the email is pre-filled with a line like "On Jan 1 2024, 12:00 AM foo@example.com wrote:" followed by the original text of the email.

Functionality ⚙️

If you want to see the email app in action, click on this link to see the video screencast on YouTube.

Source:

https://cs50.harvard.edu/web/2020/projects/3/mail/