This is an online web-chat(similar to telegram web app version) built in plain Typescript without any frameworks. It relies on Websockets under the hood to send messages.
The architecture of the project is separated according to MVC.
Model part is responsible for communication with backend API and can be found in services directory.
View and Controllers are stored together per each component in the components and pages directories.
The core Block.ts implements EventBus and dynamically re-renderes once the properties of the Block are updated. The Block is a central functional part and is inhereted by all components/pages.
The rendering is done with the help of handlebars.
All forms have a validation with regular expressions. The events are triggered on blur/focus of an input field.
A separate class to have HTTP requests based on XMLHttpRequest is introduced.
The Routing over pages uses History API.
Cookies are used to store a user session.
The project is tested with Mocha + Chai + Sinon + jsbin. Currently only the router is tested.
For CSS BEM methodoly is used.
A user can login or register on the login/registation page. After that a user is redirected to the messenger page where he can create/delete a chat. User can also click on the profile link to edit personal information or logout from the app.
- Typescript for core logic and components
- handlebars for page rendering
- Mocha + Chai + Sinon + jsbin for testing
- Docker for building an image
- WebSockets for posting messages to a chat
- Webpack for building a project
- husky to run unit tests and linting before a commit
- Clone or download this repository.
- Run
npm iin you command line interface.
npm startwill start an application on PORT 3000.
npm run devwill start an application on PORT 8080 in dev mode.
npm run build
npm test
The project has a a Dockerfile to create an image. It is deployed @heroku.