All Projects → lucasmrl → chat-app

lucasmrl / chat-app

Licence: MIT License
A chat app built with Node.js, Socket.io, React.js, and Tailwind CSS.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to chat-app

faeshare
MERN based social media web app made with the help of Next.js, Socket.io and TailwindCSS.
Stars: ✭ 37 (+27.59%)
Mutual labels:  socket-io, tailwindcss
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: ✭ 32 (+10.34%)
Mutual labels:  tailwindcss
scriptified.dev
A weekly newsletter with insightful tips, tools, resources & more on React and JavaScript. Made with NextJS && TailwindCSS. Curated by @gupta-ji6 && @prateek3255.
Stars: ✭ 18 (-37.93%)
Mutual labels:  tailwindcss
preset-tailwindcss
DEPRECATED: Statamic 3 starts with TailwindCSS out of the box.
Stars: ✭ 23 (-20.69%)
Mutual labels:  tailwindcss
light-push-admin
推送服务控制台界面
Stars: ✭ 28 (-3.45%)
Mutual labels:  socket-io
wefootwear-store
next js footwear store e-commerce 🚀🚀🚀
Stars: ✭ 17 (-41.38%)
Mutual labels:  tailwindcss
aymaneMx.com
🎨 my personal website, built with Nuxt.js & TailwindCSS and Vue-Notion.
Stars: ✭ 26 (-10.34%)
Mutual labels:  tailwindcss
angular-boilerplate
⛩️ Angular starter for enterprise-grade front-end projects, built under a clean architecture that helps to scale and maintain a fast workflow.
Stars: ✭ 158 (+444.83%)
Mutual labels:  tailwindcss
tailwind-airbnb
A demo of how to build Airbnb's home page using Tailwind CSS
Stars: ✭ 39 (+34.48%)
Mutual labels:  tailwindcss
laravel-vue-survey
This is a full stack application of Vue 3 with Tailwindcss 3 and Laravel 8
Stars: ✭ 92 (+217.24%)
Mutual labels:  tailwindcss
notion-nextjs-blog
A starter blog template powered by Next.js, Notion and Tailwind CSS.
Stars: ✭ 25 (-13.79%)
Mutual labels:  tailwindcss
SpeQL8
Speculative GraphQL metrics for your Postgres databases.
Stars: ✭ 73 (+151.72%)
Mutual labels:  socket-io
suc-love-chat
视频会议系统前端源码
Stars: ✭ 35 (+20.69%)
Mutual labels:  socket-io
realtime-private-chat-nodejs-socketio-vuejs-laravel
Realtime Private Chat NodeJS SocketIO Vue JS Laravel
Stars: ✭ 72 (+148.28%)
Mutual labels:  socket-io
sudoku
Multiplayer concurrent sudoku. The winner is the player who fills the last cell correctly.
Stars: ✭ 15 (-48.28%)
Mutual labels:  socket-io
BlazorAndTailwind
Tips and notes about Blazor and Tailwind
Stars: ✭ 27 (-6.9%)
Mutual labels:  tailwindcss
css-to-tailwind
Convert plain CSS to TailwindCSS classes. Demo: https://transform.tools/css-to-tailwind
Stars: ✭ 19 (-34.48%)
Mutual labels:  tailwindcss
tailwindcss-snippets
Collection of animation snippets made for TailwindCSS
Stars: ✭ 98 (+237.93%)
Mutual labels:  tailwindcss
nextjs-portfolio
Source Code for my rebranded personal website and portfolio.
Stars: ✭ 23 (-20.69%)
Mutual labels:  tailwindcss
cra-tailwindcss
Integrate Tailwind CSS in a Create React App setup
Stars: ✭ 105 (+262.07%)
Mutual labels:  tailwindcss

Chat-app 🦜

A chat app built with Node.js, Socket.io, React.js, and Tailwind CSS.

View Demo · Report Bug · Request Feature

About The Project

Chat-app🦜

A real-time app to exchange messages with connected users. Built for learning purposes. This was the first time using Socket.io, so I decided to follow their tutorial to create a chat app and I added a few of the suggested features.

Built With

  • Node.js
  • Socket.io
  • React.js
  • Tailwind CSS

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

You need to have npm installed.

  • npm
    npm install npm@latest -g

Installation

  1. Clone the repo
    git clone https://github.com/lucasmrl/chat-app.git
  2. From the root, install NPM packages
    npm install
  3. From the CLIENT directory, install NPM packages
    npm install
  4. Run the project using this command:
    npm run dev

Deploy (Example using Heroku)

  • uncomment lines 10-13 from "server.js"
     // app.use(express.static(path.join(__dirname, "client/build")));
     // app.get("/*", function (req, res) {
     //   res.sendFile(path.join(__dirname, "client/build", "index.html"));
     // });

Features

  • Support for nickname
  • Message to connected users when someone connects or disconnects
  • List with online users
  • Private messages
  • Mobile friendly

Future improvements

  • Add “{user} is typing” functionality.
  • Support for changing avatar image
  • Option to create/join different "rooms"
  • Add rich text editor
  • Add support for videos, images, and GIFs.

License

Distributed under the MIT License. See LICENSE for more information.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].