{"id":18964305,"url":"https://github.com/lorransutter/fullchat-react","last_synced_at":"2025-12-30T20:16:20.420Z","repository":{"id":37883005,"uuid":"256258292","full_name":"LorranSutter/FullChat-React","owner":"LorranSutter","description":"Chat application using node.js, socket.io and ReactJS","archived":false,"fork":false,"pushed_at":"2022-12-22T15:38:09.000Z","size":1840,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-01T05:30:11.485Z","etag":null,"topics":["chat","expressjs","javascript","jwt","mongodb","nodejs","reactjs","socket-io"],"latest_commit_sha":null,"homepage":"","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-04-16T15:40:30.000Z","updated_at":"2023-10-03T10:31:12.000Z","dependencies_parsed_at":"2023-01-30T12:46:28.068Z","dependency_job_id":null,"html_url":"https://github.com/LorranSutter/FullChat-React","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-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FFullChat-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LorranSutter","download_url":"https://codeload.github.com/LorranSutter/FullChat-React/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","expressjs","javascript","jwt","mongodb","nodejs","reactjs","socket-io"],"created_at":"2024-11-08T14:23:39.704Z","updated_at":"2025-12-30T20:16:20.391Z","avatar_url":"https://github.com/LorranSutter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Full Chat - React JS\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Chat application with message and events history using Node.js, Socket.IO and ReactJS as final Project for BCDV1017 - Full Stack Development IV from \u003ca href='https://www.georgebrown.ca/programs/blockchain-development-program-t175/'\u003eBlockchain Development\u003c/a\u003e program from \u003ca href='https://www.georgebrown.ca'\u003eGeorge Brown College\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  This application was developed using \u003ca href='https://reactjs.org/'\u003eReact\u003c/a\u003e as frontend, but also you can check this application implemented using Pug template \u003ca href='https://github.com/LorranSutter/FullChat'\u003ehere\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href='#straight_ruler-Development-pipeline-and-challenges'\u003eDevelopment and challenges\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#runner-how-to-run\"\u003eHow to run\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#book-Resources\"\u003eResources\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#computer-Technologies\"\u003eTechnologies\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#cookie-Credits\"\u003eCredits\u003c/a\u003e\n\u003c/p\u003e\n \n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://github.com/LorranSutter/FullChat/blob/assets/preview.gif?raw=true\" alt=\"Preview Chat\" height=200/\u003e\n\n\u003cimg src=\"https://res.cloudinary.com/lorransutter/image/upload/v1589245407/FullChat_React_admin.gif\" height=200 alt=\"Preview Admin\"\u003e\n\n\u003c/div\u003e\n\n## :straight_ruler: Development pipeline and challenges\n\nThis project is an extension from this [another project](https://github.com/LorranSutter/FullChat) implemented using Pug. You may check the whole development pipeline there if you want. Here I will just talk about the differences and new challenges.\n\n1. As mentioned in the previous project, I have started creating a wireframe in [Figma](https://www.figma.com/). Just add another page for admin login and you can check the result [here](https://www.figma.com/file/vnNwlNAq3iDuazxRo2eULX/Full-Chat?node-id=0%3A1).\n\n2. One of the main differences between use a frontend framework or libray such as React, Angular or Vue instead of a template like Pug, is that you must turn your backend into a API properly. What I mean with that? Using Pug you send a rendered HTML from backend to the client, something like that:\n\n    ```js\n    exports.index = async (req, res, next) =\u003e {\n        const roomsList = await room.find();\n        res.render('rooms',\n        {\n            title: 'Rooms',\n            roomsList: roomsList\n        });\n    }\n    ```\n\n    In the code above, a view called *index* will get *roomsList* data and render to the client. Using React, things get easier to the backend, which is resposible only to send data in JSON format, like as follows:\n\n    ```js\n    exports.index = async (req, res, next) =\u003e {\n        const roomsList = await room.find();\n        res.send({ roomsList });\n    }\n    ```\n\n    As you can imagine, detaching of backend and frontend becomes clearer and easier to manage. It was time to turn all controllers from backend into \"data emitters\".\n\n3. Due to admin login to access messages and events history, I have decided to use a new and better way to manage authentication than my previous projects. This [article](https://stormpath.com/blog/token-authentication-scalable-user-mgmt) helped me a lot to understand how token authentication works, specially [JWT](https://jwt.io/). So I was able to implement token authentication in the backend and, in frontend development step, I was able to manage tokens using [React-cookie](https://www.npmjs.com/package/react-cookie).\n\n4. Backend done and having pug template from previous project, I have started to convert all interface to React. It was the first time I was working with React to build a bigger project, so I admit that I did not took the best practices to build reusable components. Indeed, all pages were actually made simply with a single or a few components.\n\n    Although I have employed few components, it did not prevent me to learn better and apply modern tools such as hooks and react navigation. Also, after build most of the project, I discovered a fantastic project called [Scrimba](https://scrimba.com/), where I was able to took a free [React Hooks Course](https://scrimba.com/course/greacthooks). It allowed me to learn more about hooks and React.memo, which made it possible to optimize my code.\n\n\u003c!-- Continue here? I do not know if I have something else to talk about --\u003e\n\n## :runner: How to run\n\nOpen your terminal in the folder you want to clone the project\n\n```sh\n# Clone this repo\ngit clone https://github.com/LorranSutter/FullChat-React.git\n\n# Go to the project\ncd FullChat-React\n\n# Go to each folder and install dependencies\ncd backend\nnpm install\n\ncd ../frontend\nnpm install\n```\n\nNow you will need two opened terminals to run the project. One for the backend and another one for the frontend or mobile.\n\nBackend will run on http://localhost:5000/\n\nFrontend will run on http://localhost:3000/\n\n```sh\n# Go to backend\ncd backend\n\n# Run the project\nnpm start\n\n## In the another terminal ##\n\n# Go to frontend\ncd frontend\n\n# Run the project\nnpm start\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 backend/db/config.js\nMONGOURI = \u003cyour-url\u003e\n```\n\nThen you may populate your database using the following command:\n\n```sh\ncd backend\n\nnode populatedb.js\n```\n\n## :book: Resources\n\n- [React auth](https://medium.com/@faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0#beb6) - understanding JWT with React and Express\n- [Token Authentication](https://stormpath.com/blog/token-authentication-scalable-user-mgmt) - understanding JWT\n- [Figma](https://www.figma.com/) - digital design and prototyping tool\n- [Scrimba](https://scrimba.com/) - platform for learning how to code\n- [Learn React Hooks](https://scrimba.com/course/greacthooks) - scrimba course\n\n## :computer: Technologies\n\n- [ReactJS](https://reactjs.org/) - frontend library\n- [React navigation](https://reactnavigation.org/) - routing and navigation for react apps\n- [React Icons](https://www.npmjs.com/package/react-icons) - icons library\n- [React-cookie](https://www.npmjs.com/package/react-cookie) - cookie interaction for React applications\n- [JWT.IO](https://jwt.io/) - JSON Web Tokens to allow, decode, verify and generate JWT\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- [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\n## :cookie: Credits\n- [Chat example](https://medium.com/dataseries/how-to-build-a-chat-app-with-react-socket-io-and-express-190d927b7002)\n    - [Repo](https://bitbucket.org/hauyeung/react-chat-tutorial-app/src/master/)\n- [JavaScript Mastery video](https://www.youtube.com/watch?v=ZwFA3YMfkoc)\n    - [Repo](https://github.com/adrianhajdin/project_chat_application)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Ffullchat-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florransutter%2Ffullchat-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Ffullchat-react/lists"}