/coder-chat

A real-time chat application built with React, TypeScript, Express and WebSockets 🚀

Primary LanguageTypeScript

Coder Chat

Running the application

  1. Clone the repo
git clone git@github.com:ryancharris/coder-chat.git
  1. Change directories
cd coder-chat/
  1. Install Node modules
npm install
  1. Run the webpack-dev-server and Express
npm run start

System requirements

  • Node 10+
node --version
  • NPM 6+
npm --version

New dependencies

react-toastify

This library handles rendering toast notifications for users whose browsers don't support or deny permissions for the Notification API. In production, I may opt for building a custom notification system, however, for the purposes of this project it saved me significant amounts of time. I chose this library specifically because it had over 6,000 stars on GitHub and great documentation.

react-hook-form

To save time, I opted to use this library for handling client-side form validation and error messaging in JoinForm and ChatInput. I chose this specific library due to its simple API, but could easily swap it out for a similar option like Formik.

prettier

In order to consistently format the code in the repository and enforce coding conventions in my editor, I installed Prettier. This is the most commonly used code formatter in the JS/TS ecosystem, which is why I chose it.

css-loader / style-loader

I had to add these webpack plugins in order to load the CSS for react-notify in App.tsx.

Progress

Standard goals

  • Write clear, concise code
  • Implement wireframes
  • Add basic styles
  • Handle server errors, API call failures
  • Client-side validation for usernames and messages

Stretch goals

  • HTML5 notifications
  • Go all out on styling
  • Custom feature: notifications for non-HTML5 users
  • Persist username between sessions by storing it in localStorage
  • Rate limiting user input in ChatInput to prevent spamming

Improvements I'd make with more time

Refactor

  • Generalize UserMessage and GuestMessage components into a singular ChatMessage component
  • Abstract notification functionality and permission checking into its own hook
  • Add proper user authentication
  • Add error handling for WebSocket errors

Code consistency

  • Add unit tests
  • Add ESLint
  • Run unit tests and code linting in CI pipeline
  • Lint and prettify each commit locally using git hooks