Social App Template

The Social Application Template (SAT) is an example client app that demonstrates how to use Gateway Services.

📗 Table of Contents

• 📖 About the Project
• 🔍 Arch Map
• 🛠 Built With
  • Tech Stack
  • Key Features
• 🚀 Live OpenAPI Docs
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Deployment
• 🤝 Contributing
• ❓FAQ
• 📝 License

The Social Application Template (SAT) is an example client app that demonstrates how to use [Gateway Services](https://github.com/AmplicaLabs/gateway).

📖 Social Application Template (SAT)

The Gateway Services are a suite of services designed to make interacting with Frequency easy for applications integrating with DSNP. The SAT is an example client that shows you how to use Gateway.

Gateway enables web2 companies to use a simple gateway into web3 using tooling they are accustomed to. It aims to let service providers self-serve with minimal help outside of docs and tools, rather than interacting with Frequency directly. Providers no longer need to fully understand blockchain tooling to build on DSNP over Frequency.

🔭 Arch Maps

Overview of the Social App Template in relation to Gateway Services.

flowchart LR
  subgraph SAT["SAT Endpoints"]
    A((("social-app-template")))
  end
  subgraph Interface["Gateway OpenAPI Endpoints"]
    B("Gateway Open API")
    BA("Accounts/Auth API")
    BG("Graph API")
    BC("Content API")
    BB("Broadcast API")
    BAS("Assets API")
    ASW("Account Service Webhook")
    GSW("Graph Service Webhook")
    CWW("Content Watcher Serive Webhook")
  end
  subgraph GHCH["Gateway Handlers"]
    GH[["Graph Handlers"]]
    CH[["Content Handlers"]]
    GC[("Graph Cache")]
    PC[("Post Cache")]
  end
  subgraph GMS["Gateway Micro Services"]
    AS["Account Service"]
    GS["Graph Service"]
    CPS["Content Publishing Service"]
    CW("Content Watcher")
  end
  A -- /auth/siwf\n/auth/account\n/auth/logout\n*/auth/login\n*/auth/handles\n*/auth/delegate\n*/auth/provider --> BA
  A -- /profiles/msaId --> BA
  A -- /graph/msaId/following\n/graph/msaId/follow\n/graph/msaId/unfollow --> BG
  A -- /content/\n/content/discover\n/content/msaId\n/content/create\n/content/type/contentHash\n/content/msaId/conentHash --> BC
  A -- /broadcasts --> BB
  A -- /assets --> BAS
  ASW -. /webhooks/account-service .-> A
  GSW -. /webhooks/graph-service .-> A
  CWW -. /webhooks/content-watcher/announcements .-> A
  BG --> GH
  BA --> AS
  BC --> CH
  BB --> CH
  BAS --> CH
  GH ==> GC
  GH --> GS
  CH ==> PC
  CH --> CPS
  CW <==> FC(("Frequency Chain"))
  AS ==> FC
  GS ==> FC
  CPS ==> FC
%%{
        init: {
            'theme': 'base',
                'themeVariables': {
                'primaryColor': '#ECECFF',
                'primaryTextColor': '#000',
                'primaryBorderColor': '#9999FF',
                'lineColor': '#858585',
                'secondaryColor': '#FFFDF0',
                'tertiaryColor': '#fff'
                }
        }
    }%%
style A stroke:#FFD600,fill:#FFF9C4
style B stroke:#FFD600,fill:#FFF9C4
style BA stroke:#00C853,fill:#C8E6C9
style BG fill:#FFE0B2,stroke:#FF6D00
style BC fill:#BBDEFB,stroke:#2962FF
style BB fill:#BBDEFB,stroke:#2962FF
style BAS fill:#BBDEFB,stroke:#2962FF
style GH stroke:#FF6D00,fill:#FFE0B2
style CH stroke:#2962FF,color:#000000,fill:#BBDEFB
style GC stroke:#FF6D00,fill:#FFE0B2
style PC color:#000000,fill:#BBDEFB,stroke:#2962FF
style AS stroke:#00C853,fill:#C8E6C9
style GS fill:#FFE0B2,stroke:#FF6D00
style CPS fill:#BBDEFB,stroke:#2962FF
style CW stroke:#AA00FF,fill:#E1BEE7
style FC stroke:#FFD600,fill:#FFF9C4
linkStyle 0 stroke:#00C853,fill:none
linkStyle 1 stroke:#00C853,fill:none
linkStyle 2 stroke:#FF6D00,fill:none
linkStyle 3 stroke:#2962FF,fill:none
linkStyle 4 stroke:#2962FF,fill:none
linkStyle 5 stroke:#2962FF,fill:none
linkStyle 6 stroke:#00C853,fill:none
linkStyle 7 stroke:#FF6D00,fill:none
linkStyle 8 stroke:#2962FF,fill:none
linkStyle 9 stroke:#FF6D00,fill:none
linkStyle 10 stroke:#00C853,fill:none
linkStyle 11 stroke:#2962FF,fill:none
linkStyle 12 stroke:#2962FF,fill:none
linkStyle 13 stroke:#2962FF,fill:none
linkStyle 14 stroke:#FF6D00,fill:none
linkStyle 15 stroke:#FF6D00,fill:none
linkStyle 16 stroke:#2962FF,fill:none
linkStyle 17 stroke:#2962FF,fill:none
linkStyle 18 stroke:#AA00FF,fill:none
linkStyle 19 stroke:#00C853,fill:none
linkStyle 20 stroke:#FF6D00,fill:none
linkStyle 21 stroke:#2962FF,fill:none

Loading

Key: * = coming soon

(back to top)

🛠 Built With

Tech Stack

Frontend

• Framework: React
• Language: Typescript
• Testing Library:
  • Jest
  • Testing Library
• UI Library: Ant Design

Backend

• Framework: Node.js with Express
• Language: Typescript
• Testing Library:Vitest
• API Documentation:
  • Swagger
  • OpenAPI

Key Features

• Sign in with Frequency
• Create a post
• Create a comment on a post
• View a feed
• View other users' profiles
• Follow a user

(back to top)

🚀 Live Docs

• Gateway Live Docs
• Open Api docs coming soon...

(back to top)

💻 Getting Started

• Frontend

  See Frontend Readme

• Backend

  See Backend Readme

Prerequisites

In order to run this project you need to become a provider. To do so, visit the Provider Dashboard!

Setup

Clone this repository to your desired folder:

Example commands:

  git clone [email protected]:AmplicaLabs/social-app-template.git
  cd social-app-template

Deployment

You can deploy using containers. Check the docker-compose.yaml file for more details.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

• Contributing Guidelines
• Open Issues

(back to top)

❓FAQ

• Who is the Gateway built for?

• Developers wanting a better understanding of how DSNP/Frequency works.

• Developers wanting an example of integrating Gateway Services.

• Who is a provider and how do you become one?

  • Visit the Provider Dashboard!

• Do I need Web 3 experience?

  • Nope! The Gateway is an open source suite that enables Frequency integrations without web3 programming skills. The Gateway makes building/integrating a social network on the DSNP/Frequency stack as easy as a Web2 API integration.

• Do I need to know anything about cryptocurrency?

  • Nope! The Gateway has a coinless user interface that does not require using cryptocurrency tokens.

(back to top)

📝 License

This project is Apache 2.0 licensed.

(back to top)