A single-page email client built with Django and vanilla JavaScript as part of CS50's Web Programming with Python and JavaScript.

Mail is a front-end email client that communicates with a Django back-end API to send, receive, and manage emails. The entire interface is driven by JavaScript — navigating between views happens without full page reloads, using the browser History API for state management.

• Send Mail — Compose and send emails to registered users via a POST request to /emails. The sent mailbox is displayed after a successful send.
• Mailbox Views — View Inbox, Sent, and Archive mailboxes. Each email is rendered in its own container showing sender, subject, and timestamp. Unread emails have a white background; read emails appear gray.
• View Email — Click an email to see its full details: sender, recipients, subject, timestamp, and body. Emails are automatically marked as read when opened.
• Archive/Unarchive — Inbox emails can be archived; archived emails can be unarchived. Sent emails cannot be archived.
• Reply — Reply to an email with the composition form pre-filled: original sender as recipient, subject prefixed with "Re:" (avoiding duplicate prefixes), and the original message body quoted.

Back-end: Django, SQLite3, Python

Front-end: Vanilla JavaScript (Fetch API), Bootstrap 4, HTML/CSS

mail/ ├── manage.py ├── db.sqlite3 ├── project3/ # Django project config │ ├── settings.py │ ├── urls.py │ ├── wsgi.py │ └── asgi.py └── mail/ # Main Django app ├── models.py # User and Email models ├── views.py # API endpoints and page views ├── urls.py # URL routing ├── admin.py # Admin panel registration ├── templates/mail/ │ ├── layout.html # Base template │ ├── inbox.html # Main SPA interface │ ├── login.html │ └── register.html └── static/mail/ ├── inbox.js # Front-end logic └── styles.css # Custom styles 

• Python 3

1. Install dependencies:

   pip install django

2. Apply migrations:

   python manage.py migrate

3. Run the development server:

   python manage.py runserver

4. Open http://127.0.0.1:8000 in your browser, register an account, and start sending emails.

• User — Extends Django's AbstractUser for authentication.
• Email — Stores sender, recipients (many-to-many), subject, body, timestamp, and read/archived boolean flags. Includes a serialize() method for JSON API responses.

Full project specification: https://cs50.harvard.edu/web/projects/3/mail/