hc07180011/auto-mail

Pigeons Mail

Motivation

For organizations or activity holders, there are frequent needs to send a larger number of emails with a similar format to members or participants. However, sometimes PR wants to customize mail contents according to the receiver's personal information (e.g. name, student id, etc), so they have to send the emails one by one. To deal with the problem, we decide to build an automatic email sending service and share the service with others.

Service

Login

• Sign up
• Login
  • Username and Password
  • Google Account

Editor Page

1. Choose an email account as email-sender

2. Upload an excel file with receiver information

3. Add tags to email

• Tag content will be copied to clipborad when a tag is clicked.
• Recipients, cc, bcc: Add tags through plus button

• Subject, Email content: simply paste (ctrl+v, cmd+v, etc)

4. Content will be saved automatically afted sending

5. Received mail

6. Add new mail or use the old one as template

Frontend

Environment

• OS: MacOS, Ubuntu, Vercel
• Latest version of React
• npm 6.14.4

Packages

• "@agney/react-loading": "^0.1.2": provides loading animation
• "@material-ui/core": "^4.11.2": variance design themes
• "@material-ui/icons": "^4.11.2": variance icons
• "axios": "^0.21.1": promise based http client
• "braft-editor": "^2.3.9": mail editor generating html text
• "react-google-login": "^5.2.2": login tool for google accounts

Deployment

You have three options, two stable versions along with one beta version

Prerequisition

1. Get a google login api credential. (see here for more details)
2. Replace the clientId with your own id
3. Setup rediredtUrl with the domain you are going to use
4. Make sure you are using https

MacOS, Ubuntu

0. Make sure the web server is availabe

1. Clone the repo

git clone https://github.com/hc07180011/auto-mail.git
cd frontend/

2. Install dependencies

yarn

3. Build the service

yarn build

4. Deploy on a server

cp -r build/* ${webServerBaseDir}/

Vercel

0. Register an account

1. Follow the instructions and enjoy! 🎉

Beta: desktop app (electron.js)

1. Clone the repo

git clone https://github.com/hc07180011/auto-mail.git
cd frontend/

2. Install dependencies

npm install

3. Build the application

npm run build
npm run build-app

4. Open the app generated by electron.js

Backend

Environment

• OS: Ubuntu, Heroku
• MongoDB Atlas
• node v10.19.0
• npm 6.14.4

Packages

• "cors": "^2.8.5": provides CORS option for backend
• "crypto": "^1.0.1": supports md5() asymmetric encryption
• "dotenv-defaults": "^2.0.1": keeps MONGO_URL secret
• "express": "^4.17.1": fast, unopinionated, minimalist web framework for Node.js
• "google-auth-library": "^6.1.4": Google authentication library
• "googleapis": "^67.0.0": Google official apis
• "mongoose": "^5.11.12": mongoDB connection
• "multer": "^1.4.2": enable file uploading
• "nodemailer": "^6.4.17": send email using smtp protocal
• "nodemon": "^2.0.7: backend management

Deployment

You have two options.

Prerequisition

1. Visit MongoDB Atlas official website and create a cluster
2. Keep the login url, which is going to be used later
3. Change the redirectUrl to the domain you want to use
4. Change clientId and clientSecret to your GCP keys

Ubuntu

1. Clone the repo

git clone https://github.com/hc07180011/auto-mail.git
cd backend/

2. Install dependencies

npm install

3. Start the service

npm run server

Heroku

0. Register an account

1. Follow the instructions and enjoy! 🎉

Contribution

• 趙允祥, B06902017, CSIE, NTU
  • Frontend: welcome page, API template
  • Backend: MongoDB, Node.js, API
  • Deployment
• 邱于賓, B06902096, CSIE, NTU
  • Frontend: Flow tesing, UI optimization
  • Backend: API testing
• 陳彥 , B06902047, CSIE, NTU
  • Frontend: UI tesing, packages research
  • Backend: API testing

外掛

• 陳若婕, B08902009, CSIE, NTU
  • Design an original logo for us
  • Because our group members have no art talent

Website Link

• Pigeons