MEAN – using Angular 4

In this section, thought to share one of the projects, which I was trying using MEAN stack. Its a very simple project. Basically, its a dumping ground of messages with complete CRUD functionality with Authentication/Authorization via JWTs bearer token. Now, in this MEAN stack, A –> Angular 4, which is nice here.  This is how application looks

Then, for hosting, first time I tried heroku for deploying app and mlab for deploying MONGO db. Both are easy to use and then integrate in app. Below is the glimpse of the app.


As a anonymous person, you can see all messages, but can’t perform any operation. Like if you try to post any message without logging, it will flag this error.

Therefore, you need to sign-up first, like shown below.

Once completed, then you can login from sign in tab

Once inside, then you can see, that edit-delete option for that message is highlighted. Therefore, login doesn’t mean I can edit other’s message or delete the same.

Therefore, Now I can post new message, edit or delete the same. You can download the code from the below link.


I hope you would have liked this post.

Rahul Sahay
Happy Coding

339 total views, 1 views today