CodeShibaGo/Tobicord

A website combined Toby and Discord

Tobicord

Tobicord provides individuals and groups with browser tab management, classification, and editing. Tabs can be easily and quickly dragged to different collections and save in the online database. Tobicord also provides multi-user collaborative editing and group chat rooms, making it easier for teams to communicate and collaborate.

🖥️ Website URL : https://moonightowl.com/

🧰 Chrome Extension : https://reurl.cc/OVjE2X

📃 API Doc : https://app.swaggerhub.com/apis-docs/TOM54699_1/Tobicord/1.0.0

Test account and password : test@gmail.com / 123456

Demo

Chrome Extension and Organize Browser Tabs Feature

• Get all browser tabs by extension and easily organize、save、edit browser tabs by drag and drop. Users can create a URL and share their bookmark collection with others.

Multi-users Online Interaction

• Invitation system, Permission system and Chat-room system. Invite friends or team-members to collaborative organizing browser tabs.

Table of Contents

• Main Features
• Backend Technique
  • Deployment
  • Environment
  • Cloud Service
  • Database
  • Networking
  • Third Party Library
  • Version Control
  • Key Points
• Architecture
  • Server Architecture
  • Socket Architecture
  • Extension Architecture
• Database Schema
• Frontend Technique
• API Doc
• Contact

Main Features

• Setup CI/CD with GitHub Actions, Docker Hub and AWS CodeDeploy.
• Member System
  • User authentication with JWT.
  • Automatically refresh access token with axios-interceptors.
  • Redis is used to block attempts to refresh tokens by logged out users.
• Build my own chrome extension and push it to the Chrome Web Store.
  • When the extension is activated, it can detect changes in the browser tabs at any time, retrieve tabs information and send it to Redis.
• Organize the tabs from the extension.
  • Users are able to create various organizations, spaces, and collections to classify, edit, and store different tabs.
• Invitation system and Permission System.
  • User can invite other members to organization and owner can grant different permissions to members.
• Use socket.io for real-time invitation notification and organization chat-room.
• Shared system and export function.
  • Users can create a URL and share their bookmark collections with others.
  • User can export collections with different format(json、html、txt).
• Tutorial system with step-by-step guidance and beginner guideline cards.
• Using the MVC design pattern and normalize MySQL database in 3NF.

Backend Technique

Deployment

• Docker
• docker-compose

Environment

• Node.js/Express.js

Cloud Service

• EC2
• RDS
• Cloudflare R2
• CodeDeploy

Database

• MySQL
• Redis

Networking

• HTTP & HTTPS
• DNS (Route 53)
• NGINX
• SSL (Let's Encrypt)

Third Party Library

• Socket.IO
• bcrypt
• helmet (Prevent XSS attacks)
• sequelize
• aws-sdk
• jsonwebtoken
• cors

Version Control

• Git/GitHub

Key Points

• socket.io
• MVC Pattern

Architecture

Server Architecture

Socket Architecture

• Real-time invitation

• Chat-room

Extension Architecture

Database Schema

Frontend Technique

• HTML
• JavaScript
• CSS
• Third Party Library
  • axios
  • vanta.js
  • bootstrap
  • driver.js
  • sortable.js

API Doc

API Doc

Contact

👨‍💻 廖梓兆 ZIH-JHAO LIAO

📪 Email : tom54699@gmail.com