10 am

 

Demo       Repository

Description
💬 Fullstack chat application built with Node, Express, React and Socket.io with integrated chat room system.

10 AM is a fullstack application which enables users to communicate with each other in real-time.
Application uses Node, Express.js, Socket.io and React.

Frontend is built with React.
Backend is powered by Node and Express.
Chat rooms, messages and users are being emitted and communicate with each other through socket.io.
Frontend utilizes lazy loading and prefetching.
Frontend uses react-router library for route handling.
On invalid path, user is redirected to Home route.
Application uses React.Suspense which displays fallback loading UI, in case components are loading.
URL is enriched by queries which are generated based on name and room with query building library query-string.
Application is responsive and mobile-friendly.
Further details about the application can be found in README here.

Table of content

• Features
• Motivation
• Installation
• Built With
• Ideas for future releases
• License
• Contact

Features

• Create room
• User can add his name
• User can join room
• Users can send messages to each other
• Numerous rooms can exist separately in real-time
• Numerous users can chat with each other at the same time
• Notifications if other users have joined/left
• Chat messages are wiped when all users exit a room
• Relaxing theme
• Responsive/mobile-friendly

Motivation

The idea behind building this application was to practice apolications which emit data in real-time, from backend to frontend and other way around. For handling this I chose WebSockets library socket.io as it seemed one of the best at doing its job. As a theme for this application I chose coffee shop/wood/city/morning theme.

Getting Started

Installation

To run application on your local machine follow these steps:

1. Clone or download the project from the repository.

2. Install both backend and frontend dependencies with this one command:

   # with npm
   npm run iall
   
   # or with yarn
   yarn run iall

3. Start development mode with command:

   # with npm
   npm run dev
   
   # or with yarn
   yarn run dev

4. Run the application in the browser with url:

   localhost:3000
   

Built With

Frontend bootstrapped with create-react-app

Backend dependencies

• node
• express
• cors
• compression
• socket.io

Frontend dependenceis

• react
• react-dom
• query-string
• socket.io-client

Ideas for future releases

• User authentication
• Messages to save to database
• Room persistance
• User avatar
• Invite links
• Add room to favorite

License

This project is licensed under the MIT License

Contact

With any ideas or questions...

You can contact me via email: [email protected]
Or fill the contact form at my personal website