Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

bestChat

Fast and full featured chat application in the browser.

Progress:

  • Instant Chat.
  • Modern design.
  • Fast initial paint on 4G devices (<1.5s)
  • Smart chat-bot.
  • Fast initial paint on 3G devices (<2.5s)
  • WebRTC audio and video calls.
  • Miit: Venue recommendations for groups, using Google Maps API.
  • Small bundle size. (<60kb)

Rationale

As an aspiring developer, I needed a project that would challenge me. I decided on a chat application for the web because of the ability to add new features (video communication, google maps integration, games and more) would make this a potentially large and complicated project.

I tried to follow several best practices outlined in the these articles for developing progressive web applications:

Progressive Web Apps with React.js: Part I

Progressive Web Apps with React.js: Part 2

Constraints

Following the approaches as listed in the articles above, this project needed to:

  • be perfomant across a range of devices
  • be feature rich
  • make use of the latest web APIs (WebRTC, userMedia, etc..)
  • remain reasonably lightweight

Structure

The basic architecture for the app is this:

  • Firebase handles data storage (users, online status, messages, location data, etc..)
  • React for the complex UI
  • Node.js to serve the static bundle files as well as redirecting to https.

Chat things

This project started as a way to learn how to create a chat client on the web. A common library, like Socket.io, makes this process straighforward. With some added abstraction you can create a chat application relatively quickly. And that's just what I did for the first iteration. Further into development, I figured Firebase was a good alternative to Socket.io. It allowed me to come up with a simpler, more elegant solution leveraging Firebase's bi-derectional event-based driven communication.

Frontend

The design is heavily influenced by Facebook's Messenger. In the previous iteration, Material-ui was used. But I settled for using no CSS libraries in an attempt to keep the application as light as possible.

backend

Seeing as all routes and communications are handled client-side, there isn't much for Node.js to do other than serve static content and redirect all non-scure traffic to HTTPS.

CHANGELOG

v0.5

  • Performance improvements v0.4
  • Replaced WebSockets with Firebase. v0.3
  • Replaced Socket.io with plain WebSockets. v0.2
  • Basic Styling v0.1
  • Basic messaging with Socket.io.

This project was bootstrapped with Create React App.

Releases

No releases published

Packages

No packages published