*Made this back in 2017 to learn React.
- 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)
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
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
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.
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.
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.
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.
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.