Merge pull request #14 from hppanpaliya/refactor-react

Refactor react & mailserver

Author: hppanpaliya

Dockerfile

@@ -29,10 +29,10 @@ COPY . /React-TrashMail
 
 WORKDIR /React-TrashMail/react
 RUN yarn build 
-RUN rm -rf ../mailserver/build/* && mkdir -p ../mailserver/build && cp -r build/* ../mailserver/build/
+RUN rm -rf ../mailserver/src/build/* && mkdir -p ../mailserver/src/build/ && cp -r build/* ../mailserver/src/build/
 
 # Define mountable volume
-VOLUME ["/React-TrashMail/mailserver/attachments"]
+VOLUME ["/React-TrashMail/mailserver/src/attachments"]
 
 # Copy startup script
 COPY docker_start.sh /docker_start.sh

Dockerfile.prod

@@ -22,10 +22,10 @@ COPY mailserver/node_modules /React-TrashMail/mailserver/node_modules
 COPY . /React-TrashMail
 
 # Copy built React app to mailserver build directory
-COPY react/build /React-TrashMail/mailserver/build
+COPY react/build /React-TrashMail/mailserver/src/build
 
 # Define mountable volume
-VOLUME ["/React-TrashMail/mailserver/attachments"]
+VOLUME ["/React-TrashMail/mailserver/src/attachments"]
 
 # Copy startup script
 COPY docker_start.sh /docker_start.sh

README.md

@@ -3,6 +3,7 @@
 TrashMail is a web application for generating disposable/temporary email addresses and viewing emails sent to those addresses. The project consists of a React frontend and a Node.js and MongoDB backend mail server.
 
 ## Table of Contents
+
 - [Frontend](#frontend)
 - [Backend](#backend)
 - [Deployment](#deployment)
@@ -15,6 +16,7 @@ TrashMail is a web application for generating disposable/temporary email address
 The React frontend provides the user interface for generating disposable emails, viewing the inbox, and reading emails.
 
 ### Features
+
 - Generate a random disposable email address
 - Enter a custom disposable email address
 - View all received emails for an address
@@ -23,17 +25,20 @@ The React frontend provides the user interface for generating disposable emails,
 - Responsive design
 
 ### Tech Stack
+
 - React
 - React Router
 - Material UI
 - Axios
 
 ### Pages
+
 - **Home**: Explains the service and contains buttons to generate or enter an email
 - **Inbox**: Lists received emails for an address
 - **Email**: Displays the content of a specific email
 
 ### Installation
+
 ```shell
 
 cd react
@@ -42,39 +47,44 @@ npm install
 ```
 
 ### Running
+
 ```shell
 
 npm start
 
 ```
+
 The frontend will run on [http://localhost:3000](http://localhost:3000)
 
 ## Backend
 
 The Node.js backend provides the mail server functionality for receiving emails via SMTP and managing emails via a REST API.
 
 ### Features
+
 - SMTP server to receive emails
 - Save emails and attachments to MongoDB database
 - Retrieve emails for an address
 - Delete emails
 - Serve attachment files
 
 ### Tech Stack
+
 - Node.js
 - Express
 - MongoDB
 - SMTP Server
 - Mailparser
 
 ### API Endpoints
-- `GET /emails/:emailId` - Get emails for an address
+
 - `GET /emails-list/:emailId` - Get email list
 - `GET /all-emails` - Get all emails
 - `GET /email/:emailId/:email_id` - Get specific email
 - `DELETE /email/:emailId/:email_id` - Delete email
 
 ### Installation
+
 ```shell
 
 cd server
@@ -83,14 +93,17 @@ npm install
 ```
 
 ### Configuration
+
 Edit `config.js` to configure SMTP port, MongoDB URL, etc.
 
 ### Running
+
 ```shell
 
 node server.js
 
 ```
+
 The backend will run on port 4000
 
 ## Deployment
@@ -103,17 +116,20 @@ For those who prefer a containerized deployment, Docker can be used to easily se
 
 #### Docker Setup
 
-1. **Build the Docker Image**: 
+1. **Build the Docker Image**:
    Ensure you are in the root directory of the project and run:
+
    ```shell
    docker build -t trashmail-app .
    ```
 
 2. **Run the Docker Container**:
    After building the image, you can start the container using:
+
    ```shell
    sudo docker run -d -p 4000:4000 -p 25:25 -v ./attachments:/React-TrashMail/mailserver/attachments -e REACT_APP_API_URL= -e REACT_APP_DOMAINS='["example.com"]' --name trashmail-container hppanpaliya/react-trashmail:latest
    ```
+
    This command starts the TrashMail application and exposes it on ports 4000 and 25 for mailserver.
 
 3. **Accessing the Application**:
@@ -123,13 +139,12 @@ Ensure you have Docker installed and running on your machine before executing th
 
 #### Docker environment variables and volume options used or can be added:
 
-
-| Option/Variable | Description |
-|-----------------|-----------------------|
-| `-e REACT_APP_API_URL=` | Sets the API URL. Leave empty or set to the backend URL if hosted externally. Example: `-e REACT_APP_API_URL=http://backendhost:4000` |
-| `-e REACT_APP_DOMAINS='["example.com", "example.org"]'` | Specifies the domains for the email service. Set to desired domains. |
-| `-v ./attachments:/React-TrashMail/mailserver/attachments` | Volume mount for attachments. Maps a local directory to a container directory. |
-| `-v /my/local/mongodb:/data/db` | (Optional) Volume mount for MongoDB data. Maps a local directory to the MongoDB data directory in the container. |
+| Option/Variable                                            | Description                                                                                                                           |
+| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `-e REACT_APP_API_URL=`                                    | Sets the API URL. Leave empty or set to the backend URL if hosted externally. Example: `-e REACT_APP_API_URL=http://backendhost:4000` |
+| `-e REACT_APP_DOMAINS='["example.com", "example.org"]'`    | Specifies the domains for the email service. Set to desired domains.                                                                  |
+| `-v ./attachments:/React-TrashMail/mailserver/attachments` | Volume mount for attachments. Maps a local directory to a container directory.                                                        |
+| `-v /my/local/mongodb:/data/db`                            | (Optional) Volume mount for MongoDB data. Maps a local directory to the MongoDB data directory in the container.                      |
 
 These options and environment variables are crucial for configuring the TrashMail application within the Docker environment, especially for handling backend API communication and data persistence.
 

mailserver/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+build

mailserver/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 150,
+  "tabWidth": 2
+}

mailserver/README.md

@@ -29,7 +29,6 @@ The mail server can be configured using the `config.js` file located in the proj
 - `smtpPort`: The port number on which the SMTP server should listen.
 - `mongoURL`: The URL for connecting to the MongoDB database.
 - `dbName`: The name of the MongoDB database to be used.
-- `collectionName`: The name of the collection in the database to store the emails.
 
 ## Usage