Code Monkey home page Code Monkey logo

spiced_academy--p2p_chat's Introduction

P2P-Chat

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

Table of contents

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.

  1. Reichstag - a static landing page
  2. Kitty Carousel - a carousel/slideshow element that displays kitties picture
  3. Resizable Panes - an element to display before and after photos
  4. Incremental Search - search field that allows users to select matching results
  5. Connect Four - the vertical checkers game
  6. Spotify API Search
  7. Github API Search
  8. Ticker Twitter API - a sliding twitter news feed element
  9. Petition - A server-side render app for collecting signatures for a pledge.
  10. Imageboard - An app that allows users to upload images, comment, and like images.
  11. Social Network - Mock social network project for superheroes and villains.
  12. 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
React.js Node.js PostgreSQL
Redux.js Express.js AWS S3
Socket.io - client Socket.io - server
PeerJs - WebRTC
Material-UI

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

License

MIT © suddenlyGiovanni Free Software, Hell Yeah!

spiced_academy--p2p_chat's People

Contributors

suddenlygiovanni avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.