{"id":18964300,"url":"https://github.com/lorransutter/fullchat","last_synced_at":"2025-12-30T19:10:32.231Z","repository":{"id":37869665,"uuid":"251714404","full_name":"LorranSutter/FullChat","owner":"LorranSutter","description":"Chat application using node.js and socket.io","archived":false,"fork":false,"pushed_at":"2022-12-11T00:37:23.000Z","size":13395,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-01T05:30:09.318Z","etag":null,"topics":["chat-application","css3","expressjs","html5","javascript","mongodb","nodejs","socket-io"],"latest_commit_sha":null,"homepage":"http://bcdv1008-fullchat.herokuapp.com/","language":"JavaScript","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/LorranSutter.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}},"created_at":"2020-03-31T19:47:48.000Z","updated_at":"2021-06-09T20:46:45.000Z","dependencies_parsed_at":"2023-01-26T11:45:35.813Z","dependency_job_id":null,"html_url":"https://github.com/LorranSutter/FullChat","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/LorranSutter%2FFullChat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LorranSutter","download_url":"https://codeload.github.com/LorranSutter/FullChat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239959950,"owners_count":19725221,"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":["chat-application","css3","expressjs","html5","javascript","mongodb","nodejs","socket-io"],"created_at":"2024-11-08T14:23:38.839Z","updated_at":"2025-12-30T19:10:32.201Z","avatar_url":"https://github.com/LorranSutter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Full Chat\n\nChat application using Node.js and Socket.IO as final Project for BCDV1008 - Full Stack Development III from [Blockchain Development](https://www.georgebrown.ca/programs/blockchain-development-program-t175/) program from [George Brown College](https://www.georgebrown.ca).\n\nThis application was developed using [Pug](https://pugjs.org/api/getting-started.html) as frontend template, but also you can check this application implemented in ReactJS [here](https://github.com/LorranSutter/FullChat-React).\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"../assets/preview.gif?raw=true\" alt=\"Preview Chat\" height=200/\u003e\n\n\u003cimg src=\"https://res.cloudinary.com/lorransutter/image/upload/v1588973266/FullChat_admin.gif\" alt=\"Preview Admin\"\u003e\n\n\u003c/div\u003e\n\n## :straight_ruler: Development pipeline and challenges\n\nDealing with anxiety during development it was something that already bothered me. It was time to start doing things in a better way.\n\n1. After watch some videos from [Rocketseat](https://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olg/featured), a tool that they always employs caught my eyes: [Figma](https://www.figma.com/): a free, powerfull and handy tool to aid designers to create, for example, wireframes for your new website. Wait a minute... I always get stuck with interface while developing, trying to create great interfaces and program at the same time. It was a great opportunity to establish a pipeline. This is the reason because Figma suits me perfectly.\n\n   You can check my wireframe made in Figma [here](https://www.figma.com/file/vnNwlNAq3iDuazxRo2eULX/Full-Chat?node-id=0%3A1) (with some changes during the development of course).\n\n2. This application did not require clearly split between frontend and backend. If it was the case, surley I would start creating the API. However, as it is not the case and I am a visual person, it decided to create the pages using HTML and CSS. Yeah... I said above I used Pug, but I was expecting use only static pages at the beginning. I had to change everything afterwards.\n\n3. Interface done, time to create the backend project using Express. I am not sure about that, but I think that after start express step I just realized that using static pages was not the best idea. Of course I had to develop the project further before finally changing that.\n\n4. Backend done, frontend done (moved to pug finally)... let's deployt to Heroku. And here it is the [deploy](http://bcdv1008-fullchat.herokuapp.com/).\n\n## :pencil2: What is Socket?\n\nA socket is an endpoint of communication between two devices. In other words, when we have two people that want to talk to each other using their mobile phones, a connection is established and each of then becomes a socket, which will be able to send and receive messages in real-time.\n\nIn this application, [Socket.IO](https://socket.io/) library was used to establish this communication and messages were able to be exchanged using events.\n\n## :runner: How to run\n\nOpen your terminal in the folder you want to clone the project\n\n```bash\n# Clone this repo\ngit clone https://github.com/LorranSutter/FullChat.git\n\n# Go to the project\ncd FullChat\n\n# Install dependencies\nnpm install\n\n# Run the project\nnpm run start\n\n# Or run using nodemon\nnpm run devstart\n```\n\nIf you want to use your own mongodb account, replace the following variable with your own mongo URL:\n\n```sh\n# Go to db/config.js\nMONGOURI = \u003cyour-url\u003e\n```\n\nThen you may populate your database using the following command:\n\n```sh\nnode populatedb.js\n```\n\n## :book: Resources\n- [Figma](https://www.figma.com/) - digital design and prototyping tool\n\n## :computer: Technologies\n\n- [Express.js](http://expressjs.com/) - web application framework\n- [Moment.js](https://momentjs.com/) - parsing, validating, manipulating and displaying dates and times\n- [Mongoose](https://mongoosejs.com/) - object data modeling (ODM) library for MongoDB and Node.js\n- [Pug](https://pugjs.org/api/getting-started.html) - template engine for Node.js and for the browser\n- [Socket.IO](https://socket.io/) - real time engine using web sockers\n- [Async](https://caolan.github.io/async/v3/) - library to perform asynchronous operations\n- [ESlint](https://eslint.org/) - pluggable JS linter\n- [Nodemon](https://www.npmjs.com/package/nodemon) - monitor and restart server after changes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Ffullchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florransutter%2Ffullchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Ffullchat/lists"}