Duplex

A dual identity messenger supporting instant text messaging, video call, and voice chat.

Docs

• Contributing
  • Codebase
    • Technologies
    • File Structure
    • Code Style
  • Pre-dev setup
  • Local development
• Technical
  • Deployment

Contributing

Codebase

Technologies

General:

• Full-stack TypeScript: We use TypeScript for both frontend and backend.
• Node.js: Server runtime.

Frontend:

• React: Frontend PWA.
• Simple-Peer: Core of video call and voice call.
• Styled-Component: CSS-in-JS library.
• Material-ui: Material Components for some general UI.

Backend

• Express: Framework for building API.
• MongoDB: Data storage, with mongoose to perform interaction.
• Socket.io: Core of real time functions e.g. text messenging, video call, voice call.
• JsonWebToken: for user authentication.

File Structure

duplex/
├── client          # React PWA
├── electron        # Desktop version powered by electron
├── server          # API and Web server
├── .eslintrc.js    # eslint config
├── .gitignore      # git ignore
├── .prettierignore # prettier ignore
├── .prettierrc.js  # prettier config
├── package.json    # Meta data of this project
└── yarn.lock       # dependencies

Code Style

Prettier and Eslint is used for code formatting. Formatting rules are defined in .eslintrc.js and .prettierrc.js Below is the setup precess on VSCode.

1. Install Prettier extension on VSCode
2. Set Prettier as default formatter(ctrl + shift + p ">format document" and choose prettier as default fomatter)

In general, CamelCase is used for filename and variable naming. Reusable constants are capitalized and in snake_case.

ExampleFileName
let exampleVariable
const EXAMPLE_CONSTANT

Pre-dev setup

1. clone this repository to local

git clone https://github.com/IamMrandrew/duplex.git

2. install Node.js

3. install Yarn

4. setup AWS S3 Bucket for image uploading

5. install project dependencies

cd client
yarn install

cd server
yarn install

cd electron
yarn install

6. setup environment variables, create .env in ./server with the following config

PORT=port-for-the-app-to-listen
DB_URL=mongodb-url
JWT_TOKEN=self-define-token
NODE_ENV=production-or-development
S3_BUCKET_NAME=aws-s3-bucket-name
AES_KEY = self-define-key

Local development

client

To develop client PWA run

cd client
yarn start

Please read README.md for more details about frontend.

server

To develop the API and Web server run

cd server
yarn start

Please read README.md for more details about backend.

electron

To develop the desktop version run

cd electron
yarn start

Please read README.md for more details about electron.

Technical

Deployment

• API & Web server is deployed on Heroku. Tutorial
• MongoDB cluster is deployed on AWS via Atlas.
• Image storage is deployed on AWS S3. Tutorial

In order to deploy a Typescript MERN stack application on Heroku, we can add the following script in package.json

To determine how to start your app, Heroku first looks for a Procfile. If no Procfile exists for a Node.js app, we will attempt to start a default web process via the start script in your package.json.

 "start": "node server/index.js",
    "heroku-postbuild": "YARN_PRODUCTION=false yarn --cwd client install && yarn --cwd server install && yarn --cwd client build && yarn --cwd server build"