adapter-design-pattern builder-design-pattern chain-of-responsibility-pattern design-patterns facade-design-pattern oop-principles singleton-design-pattern web-application filter-design-pattern angular spring-boot

Email-Server

A simple web-based email program developed using Angular Framework and Spring Boot.

Contributers:

Frameworks and technology used:

For the frontend part (view part), we used HTML, CSS, and typescript through angular framework.
For the backend (model and controller), we used Java language through spring framework.

How to run:

Note: Make sure you have downloaded NodeJs and Angular-CLI.
extract the compressed project folder.

Back-end part:

Open the EmailBackend folder using IntelliJ IDE, and run the EmailBackendApplication.java class on port 9080. you can change the port from the project resources at application.properties (server.port = …..) if the 9080 port was already used in your device but in this case, you will need to change it in all http requests in the angular folder.

Front-end part:

open the emailfrontend folder using visual studio IDE, then open the terminal of the IDE, and write:
npm install in the terminal.
npm install jquery
npm install@types/jquery
ng serve --open in the terminal to open the project, on port “http://localhost:4200/”-. Note: if you needed to change port 4200 as it was already in use then you will need to change it in the EmailBackend folder in the controller class.
If you want to open more than one server to use the email application between multiple users at the same time, all you should do after running the first server is to go back to the emailfrontend folder in visual studio IDE and open a new terminal then write ng serve --open and it will ask you for another port enter Y (yes) and copy the opened port link from your browser.Then go back to the backend folder in IntelliJ and open EmailBackendApplication.java then add the port to the following line:

Used design patterns:

1- Filter Design Pattern:

We used this Design pattern to help us filter emails that meet the criteria that the user chose and get all the e-mails containing or having the same characteristics as user input, here’s the part of this design pattern in the UML:

2- Builder Design Pattern:

to make the client separated from the complex steps to create a profile, we’ve used the builder design pattern to build the whole user profile attributes like the user’s username, password, trash folder, etc.

3- Singleton Design pattern:

In order not to consume the memory and for the sake of reusability, we used this design pattern to build the huge classes that we only need just one instance of them then this instance is used again and again.

4- Chain of responsibility:

This design pattern is used to organize the server requests to specify which handle it should operate by making all the handlers implement a certain interface and then passing the concern as a string to the first handler and if it is not the first handler’s responsibility then the concern is passed to the second handler and so on till the request is fulfilled by the very specific handler.

5- Façade:

to simplify the processes for the client furthermore, we used this design pattern by creating a class called creator and the concern of this class is to make use of the builder design pattern and then create different files for the user profile like the inbox file, etc.

6- Adapter Design Pattern:

In order to sort the Emails according to something, the view layer sends the emails in Array List Form which we pass to the class which converts it to Array form to be able to sort the list easily, then we return it in Array list form, to view the sorted emails or contacts.

UML class diagram:

link to the uml class diagram

Snapshots of our UI and a user guide:

signup page: first sign up if you don’t have an account.

The username should have at least 4 characters/symbols.
The password should have at least 8 characters/symbols.

Login page: if you have already an account go to the login page

After signing up/logging in: the home page loads which shows your inbox folder by default

To send an email: click on the compose button and the following window will appear:

Write the user name of the profile to which you want to send an email in the “To” field, you can insert multiple receivers by clicking simply on “+ receiver” button.
Write the subject of the email in the “Subject” field.
Choose the priority from the drop-down list.
Add attachments if you want, you can send multiple attachments.
And if you need to edit or delete the attachments or you need to do is to click on the button again and choose the files you want or choose nothing.
Then write the body of the email.
To complete sending the email, press send E-mail button.
If you want to save the email to your draft, press move to draft button.
If you clicked on the (x) button to close the window before sending it, the email will be directed to the draft.

To check for new emails press on the refresh button, and here is the email in “atteia” inbox:

To show the details of the email, just click on it:

Press on the attachment file, and the browser will download it to your device and you can open it after that. Here is the email in “mohassan” sent folder:

You can save the email in the draft instead of sending it, and if you clicked the x button without sending the email, it will also be saved in your draft automatically:

To select an email for example to delete it, just check the box next to it.

Note: you can select multiple emails and delete them simultaneously.

You can delete an email by sending it to the trash folder:

You can create a new folder by clicking on + add folder and enter the name of the folder then pressing create:

You can find your folders by clicking on folders in the menu and selecting it from the drop-down list:

Any time you want to add an email in certain folder such select the email/emails and press move to folder and enter the name of the desired folder:

When you select a folder you have 3 choices:

Delete the folder.
Rename the folder.
View emails that are in the folder.

You can rename the folder:

search: you can search in inbox, sent, draft, trash, contacts, and new folders by entering the search key in the search field then hit the search icon and it will show the matches of that search key.
sort: you can sort your emails in any folder by date/priority/sender/receivers/subject/body/attachment size by selecting the option from the list, then choose the order: ascendingly or descending then finally hit the button sort and then BOOM the emails are sorted as you wish.
Move To Folder: If you’ve created a folder already, you can select the emails you want to move and then click on move to folder and enter the name of the folder you want to move to:

filter: you can filter the emails in any page of emails (Inbox, Sent, Trash, Draft, and emails in the folders page) according to the subject or the sender:

To add a contact: click on add contact button and enter contact name and any number of emails you want the create.

You can view contact information by clicking on it:

You can edit the contact information by clicking on the edit button and rename, add or/and delete emails: here we renamed the contact and remove the second email and add 2 more new emails.