jibraniqbal666 / NotifyMe

XGrid Task

NotifyMe

XGrid Task

NOTE: The task was in Angular 7, and I have mostly experience in React, So I only knew only React tools like Redux, React, Redux-persist and other React stack. But for the sack of the task and the observation that i will be needing Angular on the job. I decided to learn the thing and complete the task,

New things I learned from scratch • Angular 7 • State Management (NgRx) (I have already known redux and flux architecture, so it some what easier to understand)

Now to the introduction of the task

Things used in this project

• HTML 5 • CSS 3 • JavaScript (ES 5 / 6) and Angular 7 • Observables & RxJs • State Management (NgRx) • Nodejs/Express • MongoDB • Socket.io (to get the realtime notification as someone sends it) • Bootstrap (to make interface little bit faster)

There are two folders • my-app (containes angular webpage) • api (containes node.js apis)

APIS First in api folder you need to run these commands npm i then you need to start mongo and also node server using

mongod
nodemon server

if you might need to install nodemon as global package using

npm i nodemon -g

install mongo from here https://www.mongodb.com/

My-App Website

start the app by writing

ng server --port

there are three routes in application

• localhost:port/auth (for authentication)
• localhost:port/ (this the root where dashboard lies with notification, you will routed to /auth if not signed in for the first time)
• locahost:port/demo (this is the simulator where you can send notification to perticular user)

/auth

you need to register

all things can be dummy because there is no email verification. after registration, you will redirected to dashboard page

Dashboard

here you see popup notification and notification list which can be deleted and updated.

There are three type of popup notification

1. Red - Error
2. Green - Info - It will be disappeared in 10 seconds
3. Yellow - Warning

Update Notification Modal

Note :

to update you might change one of the fields then the update button will be enabled

/demo (the simulator to generate notification)

go to this url in a new tab.

when you add a notification here it will shown to the user immediatly thanks to socket.io

1. Email is the most important parameter, enter the email with you have registered before to see the notification.
2. All fields are required.

File Structure / Conventions:

the file struture might not be pleasing to the eye because generated by ng-cli, and NgRx sematics generator only generates in root.

popup-notification : the component starts with this name are the notifications that will be shown as popup. on right top.

notification : the component starts with this name are the notifications that are shown as list in dashboard.

auth : the component starts with this name has login and register.

dashboard : the component starts with this name has main app dashboard.

Task Not Done

1. Documentation Generate ( lack of time because current job, and Ramadan )
2. Test Cases ( lack of time because current job, and Ramadan )
3. 5 Notification Groups ( It can be easily done by restricting the number of notification in the array of popup notification in store, because the popup-notification are populated by store )