{"id":427,"date":"2019-06-11T02:26:00","date_gmt":"2019-06-11T02:26:00","guid":{"rendered":"https:\/\/khanhcode.com\/?p=427"},"modified":"2020-12-20T02:51:08","modified_gmt":"2020-12-20T02:51:08","slug":"messaging-website-project","status":"publish","type":"post","link":"https:\/\/khanhcode.com\/?p=427","title":{"rendered":"Messaging Website Project"},"content":{"rendered":"\n<p><strong>Project URL:<\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/Insignite\/MessagingWebsite\" target=\"_blank\">https:\/\/github.com\/Insignite\/MessagingWebsite<\/a><\/p>\n\n\n\n<p><em><strong>Disclosure:<\/strong>\u00a0The goal of this project is to learn how to create a general messaging website, which included log-in, sign-up, add\/remove friends, and a messaging system. It helping me being more involve with the Web Development field and familiarize myself with Angular 6, Socket IO, Json Web Token, CORS, MongoDB, etc. This is a personal project and used for Senior Design CECS 491A &amp; CECS 491B class at CSULB\u00a0<strong>(Full project link for the class, which included ASL single hand gesture recognition, python peer-to-peer video chat, and documentation can be found\u00a0<a href=\"https:\/\/github.com\/chriztaka1997\/ASL-to-hand-recognition\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>). <\/strong>The majority of code and styling of this project is from the<strong> <\/strong>following tutorial\u00a0<a href=\"https:\/\/www.udemy.com\/angular-ionic-node-build-a-real-web-mobile-chat-app\/\">Angular Ionic Node Build A Real Web Mobile Chat App<\/a>\u00a0class on Udemy. I simply modify the tutorial and add extra functionalities as needed to build this website.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Instruction<\/strong><\/h2>\n\n\n\n<p><strong><em>Note<\/em>:<\/strong> This will required 3 terminal. In my case, 2 terminal and a cmd. Try\u00a0<code>sudo<\/code>\u00a0the command if console return access errors.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Run Nodemon Server<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>cd chatApplication\/server\nnodemon server.js<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/nodemon.PNG?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Run MongoDB Server<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Make sure you have MongoDB Server install or download from&nbsp;<a href=\"https:\/\/www.mongodb.com\/download-center\/community\">here<\/a><\/li><li>I use cmd because MongoDB doesn&#8217;t work with Linux Sub-system on Windows 10.<\/li><li>In my case, I run this command:&nbsp;<code>\"N:\\Programs\\MongoDB\\Server\\4.0\\bin\\mongod.exe\" --dbpath \"N:\\Programs\\MongoDB\\data\\db\"<\/code><\/li><li>Format:&nbsp;<code>Windows 10 command format: directory_path_to_mongod.exe_file --dbpath directory_path_to_the_database<\/code><\/li><li>Follow&nbsp;<a href=\"https:\/\/docs.mongodb.com\/manual\/installation\/\">MongoDB Documentation<\/a>&nbsp;for instruction on how to run the server&nbsp;<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Run Angular Server<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>cd chatApplication\nng serve -o<\/code><\/pre>\n\n\n\n<p>The\u00a0<code>-o<\/code>\u00a0or\u00a0<code>--open<\/code>\u00a0command from Angular CLI will automatic open the browser with the address\u00a0<code>http:\/\/localhost:4200<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/angular.PNG?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sample Pictures<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/login.PNG?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/signup.PNG?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/home.PNG?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/raw.githubusercontent.com\/Insignite\/MessagingWebsite\/master\/sampleOutput\/message.PNG?ssl=1\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Project URL: https:\/\/github.com\/Insignite\/MessagingWebsite Disclosure:\u00a0The goal of this project is to learn how to create a general messaging website, which included log-in, sign-up, add\/remove friends, and a messaging system. It helping me being more involve with the Web Development field and familiarize myself with Angular 6, Socket IO, Json Web Token, CORS, MongoDB, etc. This is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-projects"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/khanhcode.com\/wp-content\/uploads\/2020\/12\/home.png?fit=1989%2C1939&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khanhcode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=427"}],"version-history":[{"count":2,"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/posts\/427\/revisions\/430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khanhcode.com\/index.php?rest_route=\/wp\/v2\/media\/428"}],"wp:attachment":[{"href":"https:\/\/khanhcode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khanhcode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khanhcode.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}