P2P-Chat

A fun and easy messaging app that allows private conversations through P2P.

Context
Summary
Tech Stack
Installation
Features
Todos
Contact && License

Context

Between July and October 2017, I attend [SPICED Academy], an intensive 12-week coding program focused on Full Stack JavaScript Web Development in Berlin.
During this program, I built a portfolio of web applications.

Reichstag - a static landing page
Kitty Carousel - a carousel/slideshow element that displays kitties picture
Resizable Panes - an element to display before and after photos
Incremental Search - search field that allows users to select matching results
Connect Four - the vertical checkers game
Spotify API Search
Github API Search
Ticker Twitter API - a sliding twitter news feed element
Petition - A server-side render app for collecting signatures for a pledge.
Imageboard - An app that allows users to upload images, comment, and like images.
Social Network - Mock social network project for superheroes and villains.
Final Project - one-week coding challenge - P2P Chat

As my Final Project I was required to come up with and develop a project of my own to showcase what I had learned and to test new ideas and technologies.
The constraints were the following:

it had to be completed in just one week
it had to be substantial but also achievable.
Timeframe: One week
New Technologies:
PeerJs (WebRTC)

Summary:

Recently I’ve participated in a one-week coding challenge where I set myself to build a secure and decentralized chat application.
My goal with this application was to test the architecture and tech needed to make it happen.
The user has the ability to register, login, look up people to befriend, manage friendships, use a global chatroom, use a private chatroom or switch to a “secure” channel to protect the privacy of a conversation. To make all of this happen, I had to build a node.js backend that used WebSocket to emit real-time events to all the relevant clients while on a React/Redux frontend I had to handle the secure chat by enabling two clients to speak directly to each other through webRtc protocol (p2p connection).
I especially enjoyed how React in combination with Redux allowed me to explicitly implement the separation of concerns principle and also write clean, functional and maintainable code.

Tech Stack:

Frontend	Backend	Database

Installation

$ git clone https://github.com/suddenlyGiovanni/p2p-chat.git
$ cd p2p-chat
$ npm install
$ cd config && touch secrets.json

Secret.json

Paste in the following code and remember to configure PostgreSQL and [AWS S3] it accordingly…

{
    "psqlConfig": "postgres:postgres:postgres@localhost:5432/p2p-chat",
    "sessionSecret": "this is a secret!!",
    "bcryptSalt": "this is a secret!!",
    "AWS_KEY": "XXXXXXX",
    "AWS_SECRET": "XXXXXXX/XXXXXXX/",
    "AWS_BUCKET": "p2p-chat",
    "s3Url": "https://s3.amazonaws.com/XXXXXXX/"
}

Features:

As a user, I can register and login. If I am already login, I can skip this step.

The user can create or submit its credentials: Passwords are hashed using the bcrypt library.
Forms include CSRF protection using the csurf npm package.

![p2p_chat-register]
![p2p_chat-login]

As a user, I can personalize my profile picture.

![p2p_chat-profile_pic]

As a user, I can see who of my friends is online now.

As a user, I can find friends using the search box.

![p2p_chat-find_friends]

This Feature is implemented as an incremental search field.
Input events result in ajax requests, and the route hit does a database queries with pattern matching to find matches.

As a user, I can see a list of all of my friends. I can also manage friendship status:
I can send a friendship request,
I can cancel ann erroneous friendship request,
I can accept friends requests,
I can terminate friendships

![p2p_chat-manage_friendship]

As a user, I can use the group chat feature to chat with everyone that is online.

![p2p_chat-group_chat]

As a user, I can use the private chat to talk to other friends that can be either online or offline.

![p2p_chat-private_chat]

As a user, I can use the secure chat to talk to other friends.

This feature is achieved by enabling two clients to speak directly to each other through the webRTC protocol (p2p connection).
The messages payload are stored only locally in the redux store of each client. They are also not persistent.

Todos of additional features:

Temp:

Contact

e-mail: ravalico.giovanni@gmail.com
Twitter: @superspacezova
LinkdeIn: [/giovanni-ravalico]

License

[Spiced Academy]: https://www.spiced-academy.com
[suddenlyGiovanni]: https://github.com/suddenlyGiovanni
[/giovanni-ravalico]: https://www.linkedin.com/in/giovanni-ravalico

[Node.js]: https://nodejs.org/dist/latest-v8.x/docs/api

[Redux.js]: http://redux.js.org

[AWS S3]: https://aws.amazon.com/documentation/s3
[Socket.io - client]: https://socket.io/docs/server-api
[Socket.io - server]: https://socket.io/docs/server-api

[Material-UI]: http://www.material-ui.com/#
[suddenlyGiovanni]: https://github.com/suddenlyGiovanni

[p2p_chat-register]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-register.gif>
[p2p_chat-login]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-login.gif>
[p2p_chat-profile_pic]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-profile_pic.gif>
[p2p_chat-find_friends]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-find_friends.gif>
[p2p_chat-manage_friendship]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-manage_friendship%20.gif>
[p2p_chat-group_chat]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-group_chat.gif>
[p2p_chat-private_chat]: <https://github.com/suddenlyGiovanni/p2p-chat/blob/master/readme/p2p_chat-private_chat.gif>