AX1818/site-minder-email-client

This project was bootstrapped with Create React App.

Technology Stack
Folder Structure
Available Scripts
Design Oveerview

Technology Stack

This test project is based on the following technologies:

react.js
Material-UI component library
axios HTTP client
ESlint linting library
Jest & Enzyme for tests

Folder Structure

This project structure looks like this:

site-minder-email-client/
  |____.eslintrc.json
  |____package.json
  |____public
  | |____favicon.ico
  | |____index.html
  | |____manifest.json
  |____README.md
  |____src
  | |____App.css
  | |____App.js
  | |____App.test.js
  | |____components
  | | |____autoCompleteEmailInput.js
  | | |____emailAddressesInput.js
  | | |____emailSender.css
  | | |____emailSender.js
  | | |____emailSender.test.js
  | | |____emailSubject.js
  | | |____emailText.js
  | |____index.css
  | |____index.js
  | |____logo.svg
  | |____registerServiceWorker.js
  | |____services
  | | |____emailConfig.js
  | | |____emailService.js
  | |____setupTests.js

My codes are mainly under both src/components and src/services folders. In addition, the generated app.js was changed to inject EmailSender component. All the others are genereated by Create React App.

src/components - hosts email related components

site-minder-email-client/
  |____src
  | |____components
  | | |____autoCompleteEmailInput.js
  | | |____emailAddressesInput.js
  | | |____emailSender.css
  | | |____emailSender.js
  | | |____emailSender.test.js
  | | |____emailSubject.js
  | | |____emailText.js

src/service services talking to the back-end mail server

site-minder-email-client/
  |____src
  | |____services
  | | |____emailConfig.js // config for the mail server
  | | |____emailService.js // service talking to the mail server. currently it has only one put request for sending email.

Setup Env

To set up the project, you will need to have node.js installed locally. What's more, you also need to check out the mock mail server back-end.

Check out this project

git clone https://github.com/AX1818/site-minder-email-client.git
# enter the project folder
cd site-minder-email-client
# install libs and modules
npm install

Check out the mock mail server

git clone https://github.com/AX1818/site-minder-email-server.git
cd site-minder-email-server
# install libs and modules
npm install

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Design Overview

This project is a simple Single Page Application with the following requirements:

No Authentication required
No Support for attachments
Plain text support only
Work with a mock email server which can take post request from this SPA to send email

The main UI is a email-sending form, which supprots the stanard email elements, include to, cc, bcc, text.
Inside the form, there are two buttons - NEW and SEND.

Cliking SEND button will do two operations:

Check if there is no email address input or any invalid address. If so, stop sending emaila and show an error message on the page.
Send the eamil as a PUT request to the mail server and show the result on the page.

Note: the current code does not check the blank subject or email text which is easy to do though. This check and related user interactions must be done in a real product.

Clicking NEW button will clean up the form to be ready for a new email.

The to, cc, and bcc use the same EmailAddressInput component. It provides a user-friendly feature to support auto-search email address from a contact list that is curently a mock list. It supports search by partial user name.

Todo

Due to the time limit, there are a number of work to be done.

Authentication function - to authenticate users and use security token for sending emails
Use HTTPS for the communicaiton between the client and server
More user-friendly UI design & interaction, such as message dialogs, stricter checkingo.
More powerful error handling, such as showing meaningful messae depending on the error types
Support contact list function - After authentiation, a contact list can be fetched for the current user. Thus, when they input email adderss, an auto-complete function can be provided. The current solution is using a mock contact list.
More commercial mailbox features, such as inbox, outbox, sent box, junk emails, history emails etc.
More tests include integration tests
Cloud Deployment ready

AX1818 / site-minder-email-client

Table of Contents