@ -1,9 +1,12 @@
+++
title = "Chatto - A Self Hosted E2EE Chat Applicatio n"
title = "Chatto < A Self Hosted E2EE Chat Applicati > n"
date = "2020-06-01T15:02:07+05:30"
disable_comments = true
draft = false
[sidebar]
disable = true
categories = [
"Projects"
@ -65,3 +68,30 @@ Chatto is a self hosted, end to end encrypted chat application.
* **Frontend** -
+ Server side templating - Thymeleaf
+ JS - TypeScript, Browserify (and plugins like tsify), Terser, Grunt, Yarn
* Templating using Handlebars
## Preview
### Design
+ **Full layout**
< p align = "center" > ![Preview ](/img/projects/chatto/chatto-preview-main.png )
Design adapted from [bootsnip ](https://bootsnipp.com/snippets/nNg98 )</ p >
+ **Mobile layout** < br >
The UI uses bootstrap grid system for a fully responsive layout. This is how it might look on a mobile screen -
< p align = "center" > ![chatto-on-mobile](/img/projects/chatto/chatto-preview-main-2.png)< / p >
<!-- <video autoplay loop style=" width: 100% !important;
height: auto !important;">
< source type = "video/mp4" src = "/img/projects/chatto/chatto-preview-infinite-scroll.mkv" >
< / source >
< / video > -->
### Infinite scroll
{{< apvid > }}/img/projects/chatto/chatto-preview-infinite-scroll-2.mkv{{< / apvid > }}
Decryption takes place on the fly on a background thread using the web worker API for a smooth user experience.
### E2EE Passphrase
{{< avid > }}/img/projects/chatto/chatto-preview-passphrase.mp4{{< / avid > }}
Note - passphrase is not stored on the server, or anywhere other than client's memory. The app simply checks whether decryption was successful to determine whether the passphrase is correct.
### Markdown in chat
{{< avid > }}/img/projects/chatto/chatto-preview-markdown.mkv{{< / avid > }}