MailBag Webmail System

Project Overview

This project implements the server-side and client-side components of a simple webmail system called MailBag. The application allows users to:

• View available mailboxes
• List messages inside a mailbox
• Read email messages
• Send email messages
• Manage contacts

The system is implemented using a Node.js + Express REST API backend and a React + TypeScript frontend bundled using Webpack.

The backend communicates with external mail servers using IMAP (for reading emails) and SMTP (for sending emails).

---

Environment

This project was tested with the following environment:

Operating System: macOS
Architecture: ARM64 / x86_64
Node.js Version: v22+
Browser: Google Chrome
Package Manager: npm

---

Technologies Used

Server-side:

• Node.js
• Express
• TypeScript
• emailjs-imap-client
• Nodemailer
• NeDB (for contacts storage)

Client-side:

• React
• TypeScript (TSX)
• Webpack
• Axios (AJAX requests)

---

Project Structure

M6
 ├ client
 │   ├ src
 │   ├ dist
 │   ├ webpack.config.js
 │   └ package.json
 │
 ├ server
 │   ├ src
 │   ├ dist
 │   ├ serverInfo.json
 │   └ package.json
 │
 └ README.md

---

Installation

Clone the repository:

git clone <your-repository-url>
cd M6

Install dependencies for both server and client.

Server:

cd server
npm install

Client:

cd ../client
npm install

---

Running the Server

From the server directory:

npm run compile

This command:

1. Compiles TypeScript files
2. Runs the Express server

The server will start on:

http://localhost:3000

---

Running the Client

From the client directory:

npx webpack

This will bundle the frontend code into:

client/dist/main.js

Then open the client in your browser:

client/dist/index.html

---

Testing the REST API

The server API can be tested using curl.

Get list of mailboxes

curl localhost:3000/mailboxes

Get messages from a mailbox

curl localhost:3000/mailboxes/INBOX

Get message body

curl localhost:3000/messages/INBOX/<message_id>

Delete a message

curl -X DELETE localhost:3000/messages/INBOX/<message_id>

List contacts

curl localhost:3000/contacts

---

How REST Helps This Web Application

The server exposes functionality through RESTful APIs, allowing the frontend client to interact with the backend using HTTP requests.

Each resource is mapped to a URL:

/mailboxes
/messages
/contacts

HTTP methods define the operation:

GET     → retrieve data
POST    → create data
DELETE  → remove data

This architecture separates the frontend interface from the backend logic, making the system modular and easier to maintain.

---

Summary

This project demonstrates how multiple web technologies can be integrated to build a functional webmail system:

• Express provides the REST API
• IMAP retrieves emails from the mail server
• SMTP sends emails
• React builds the user interface
• Webpack bundles the frontend application

Together these components form a complete full-stack web application.