{"id":19794622,"url":"https://github.com/code-crash/real-time-notificaion","last_synced_at":"2026-05-11T09:08:21.856Z","repository":{"id":97043174,"uuid":"117972356","full_name":"Code-Crash/real-time-notificaion","owner":"Code-Crash","description":"This project is an example of real time notification system by using LoopBack, FireLoop and Angular 2","archived":false,"fork":false,"pushed_at":"2018-01-18T11:10:45.000Z","size":2181,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T04:44:16.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pravin-notification.herokuapp.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Code-Crash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-18T11:10:19.000Z","updated_at":"2020-06-01T06:57:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"6c868e99-5604-4bd7-aa4d-e83a2306a444","html_url":"https://github.com/Code-Crash/real-time-notificaion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Crash%2Freal-time-notificaion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Crash%2Freal-time-notificaion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Crash%2Freal-time-notificaion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Crash%2Freal-time-notificaion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Code-Crash","download_url":"https://codeload.github.com/Code-Crash/real-time-notificaion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241136844,"owners_count":19915999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T07:13:44.824Z","updated_at":"2026-05-11T09:08:16.816Z","avatar_url":"https://github.com/Code-Crash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Real Time Notification System\n\n## Description\n\nDemonstration of real time notification system.\n\n### Project Details\n\n#### Technology Stack\n\n##### API Server:\n\n * [Node.js](https://nodejs.org/en/) (7.10.0)\n * [NPM](https://www.npmjs.com/) (5.5.1)\n * [LoopBack](http://loopback.io/) (3.x)\n * [FireLoop](http://fireloop.io/) (1.x)\n * [Socket.io](https://socket.io/) (2.x)\n\n##### Client Server:\n\n * [AngularJS](https://angular.io/) (5.x)\n * [MaterialUI](https://material.angular.io/) (5.x)\n * [Socket.io-client](https://socket.io/) (2.x)\n\n##### Database:\n\n  ```\n  Note: We can decide which datasource we need to use, more details are below.\n  ```\n\n * Memory\n * [MongoDB](https://www.mongodb.com/)\n\n\n#### Requirements:\n\n * Should have NodeJS/NPM installed.\n * Should have MongoDB installed.\n\n#### Development Environment:\n\nI have made sure that the project behaves similarly on all the platforms.\nBut, I have used macOS Sierra system (10.12.6) and tested on Google Chrome(62.0.3202.89)\n\n#### Project Setup:\n\n##### Setup api-server:\n\n* The api-server is responsible for storing and generating the data along with the required API's and storage features.\n* To start the ```api-server``` we need to follow the below steps.\n\n```\n$cd api-server/\n\n$npm install\n\n$npm start\n```\n* ``` npm start ``` will run the server once, and if we do any modification in ```api-server code``` we need to run the server again to reflect the changes. So we can also run the server by ``` nodemon ``` by using the command as below.\n\n```\n$npm install -g nodemon \u003crun if you don't have nodemon\u003e\n$nodemon\n```\n* You can decide if you want to use ``` npm start ``` or ``` nodemon ```.\n* Right now we are using the memory datasource, you can see the datasource configuration in ```server/datasources.json```\n* If you want to switch the datasource to MongoDB, then you can copy and paste the content from ```server/datasources.json.example``` to  ```server/datasources.json``` , and you also need to copy the content from ```server/model-config.json.example``` to  ```server/model-config.json``` and in order to work after doing this changes, you need to run the MongoDB.\n* If everything is fine, you will see the ```api-server``` is running on ```http://localhost:3000```.\n\n\n##### Setup web-server:\n\n* The web-server is responsible for showing and provide the good UI/UX to the user and also it will provide the control over data to manipulation.\n* To start the ```web-server``` we need to follow the below steps.\n\n```\n$cd web-server/\n\n$npm install\n\n$npm start\n```\n* If you face any issues with ```npm start```, then check if you have installed ```@angular/cli``` or not, you can install by using the command as follow:\n\n```\n$npm install @angular/cli -g\n```\n* If ```npm install``` is running for a long time, use control+c and then see if there is any error or not, and also try running ```npm start``` if it works.\n* If everything is fine, you will see the web-server is running on ```http://localhost:4200/```.\n* In order to run the application, you need to run both the server ```(web and api)``` simultaneously.\n\n\n#### How it works?\n\n* When the ```api-server``` start, it creates 5 users and 6 notifications by default, you can find the code in ```server/boot/install.js```.\n* After that, the ```api-server``` will generate the random notification from the random user in every 30 seconds, you can find the code in ```server/scripts/auto-generator.js```.\n* Initially we are showing only 5 notifications at a time in the drop-down, if you want to see all the notifications you can go to the tab namely ```All Notifications``` or you can also jump to all notifications from Notification drop-down by clicking the button ```See All```.\n\n#### What is Notification Playground?\n\n* The Notification Playground is the place where you can do add, edit, update and delete operations on the Notification.\n\n#### More Details:\n\n* I have deployed the application on Heroku for the demo, try the link [first-link](), if this does not work then try [second-link](http://notification.pravintiwari.com/)\n\n```\nNote: On Server version of the application, I have written two CRON job as below.\n\n1. To Generate the Notifications in every 30 seconds.\n2. To Delete all the notifications in every 5 minutes.\n```\n\n```javascript\n// CRON job code to delete all the notifications\n\n    var k = schedule.scheduleJob('ClearNotificaions', '*/5 * * * *', function () {\n        console.log('************* CRON JOB STARTED FOR CLEAR **************');\n        Notification.destroyAll({}, function (err, notifications) {\n            if (err) {\n                console.log('CRON ERROR:', err);\n                console.log('************* CRON JOB FOR CLEAR FINISH **************');\n            }\n            console.log('notifications destroyed');\n        });\n    });\n\n```\n* This is a [video link](https://drive.google.com/file/d/18YubA_7Gc_g9yso62vsCi0KMUpU63lnd/view?usp=sharing)\n* Some More Screenshots:\n* * ![Notificaion Dropdown](https://i.imgur.com/0D2LC5p.png)\n* * ![Notification Playground](https://i.imgur.com/CzAFFT1.png)\n* * ![Search Profile](https://i.imgur.com/nvBGiXz.png)\n* * ![Search Notification](https://i.imgur.com/THPDx4z.png)\n* * ![All Notificaitons](https://i.imgur.com/S2U3H3u.png)\n\n#### Author:\n\n* Pravin Tiwari\n* Mail:  pravintiwari1992@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-crash%2Freal-time-notificaion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-crash%2Freal-time-notificaion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-crash%2Freal-time-notificaion/lists"}