Skip to content
✔️Example application: Multi user real-time Todo list is an Jexia's Real Time Communication application using angular material
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.gitignore
README.md
angular.json
browserslist
karma.conf.js
package-lock.json
package.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

README.md

Multi user real-time Todo app.

Example application: Multi user real-time Todo list is an Jexia's Real Time Communication application using Angular CLI version 8.3.8. and material design.

Features

  • Material Design components for Angular
  • Jexia:
    • Project integration
    • Dataset CRUD operations
    • Authentication service
    • Real Time Communication

Built With

Dependencies

Name Description
[@angular/cdk] Angular Material Component Development Kit 🎨
[@angular/material] Angular Material 🎨
[@fortawesome/angular-fontawesome] The iconic font, CSS, and SVG framework 🎨
[@fortawesome/fontawesome-svg-core] Angular Fontawesome, an Angular library 🎨
[@fortawesome/free-solid-svg-icons] The iconic font, CSS, and SVG framework 🎨
[bootstrap] The most popular front-end framework for developing responsive, mobile first projects on the web. 📱
[hammerjs] A javascript library for multi-touch gestures 📚
[jexia-sdk-js] Awesome Jexia Javascript SDK 🐝
[jquery] JavaScript library for DOM operations 📚
[lodash-es] Lodash exported as ES modules. 🛠️
[moment] Parse, validate, manipulate, and display dates 📅
[ngx-moment] Moment.JS pipes for Angular (timeago and more) 🛠️
[ngx-socket-io] Socket.IO module for Angular 🛠️
[node-fetch] A light-weight module that brings window.fetch to node.js 🛠️
[popper.js] A kickass library to manage your poppers 🛠️
[process] process information for node.js and browsers 🛠️
[ws] Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js 🛠️

Development Dependencies

Name Description
[@types/lodash-es] TypeScript definitions for lodash-es 📚

Installation & Setup

Clone repository

git clone git@github.com:jexia/multiuser-realtime-todolist.git
cd multiuser-realtime-todolist

Install dependencies

npm install

Setup Jexia project

1. Create project
2. Create dataset named [todos] with these fields: 
[
  {
    "field_name": "todo",
    "field_type": "string",
    "is_required": "true"
  },
  {
    "field_name": "order",
    "field_type": "integer",
    "is_required": "true"
  },
  {
    "field_name": "completed",
    "field_type": "boolean",
    "is_required": "true"
  },
  {
    "field_name": "due",
    "field_type": "date",
    "is_required": "false"
  },
  {
    "field_name": "user_id",
    "field_type": "string",
    "is_required": "false"
  }
]
3. Create dataset named [users] with these fields:
[
  {
    "field_name": "user_id",
    "field_type": "string",
    "is_required": "true"
  },
  {
    "field_name": "first_name",
    "field_type": "string",
    "is_required": "true"
  },
  {
    "field_name": "last_name",
    "field_type": "string",
    "is_required": "true"
  }
]
4. Create RTC channel named [todo]
5. Create API-key
6. Create CRUD policy for all users and all datasets
7. Update [/multiuser-realtime-todolist/src/environments/environment.prod.ts] with your project-id, API-key and API-secret:
export const environment = {
    production: true,
      jexia: {
        projectID: 'your-project-id',
        projectURL: 'https://your-project-id.app.jexia.com',
        wsURL: 'wss://your-project-id.app.jexia.com/rtc',
        key: 'your-API-key',
        secret: 'your-API-secret'
      }
};
8. Do the same for [environment.ts]

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

License

MIT © jexia

You can’t perform that action at this time.