๐Ÿš€
Stellar Kickstart
  • ๐Ÿ•๏ธWelcome to the SCF Kickstart Week
    • ๐Ÿ’ฐFunding Overview
    • โœ๏ธDear changemakers, visionaries, and problem solvers
    • โ„น๏ธTL;DR: How to Maximize Your SCF Kickstart Week Experience
  • ๐Ÿ“šFundamentals of Integrating with Stellar
    • ๐Ÿš€Stellar For
    • ๐Ÿ—๏ธBuilding with Stellar
    • ๐Ÿ”งTools
    • ๐Ÿ‘ทResources
      • Fundamental Concepts
        • โญIntroduction to the Stellar network
        • โ›“๏ธIntroduction to blockchain technology
        • ๐Ÿ’ตIntroduction to payments in Stellar
        • ๐Ÿง‘Accounts
      • Core Features & Mechanisms
        • ๐Ÿ”Assets: Powering Digital Value Exchange
        • Assets Issuance: Manage digital assets effortlessly on Stellar
        • ๐Ÿ’ธTransactions: At Stellar Core
        • ๐Ÿ‘ฎโ€โ™‚๏ธSignatures in Stellar: Who, how much and to what is authorized
      • Payments & Transactions
        • ๐Ÿ’ฐPayments: Simplifying Transactions with Stellar
        • โ›“๏ธPath Payments: Convert Assets at Minimal Cost
        • โ›ฝFee-Bump: How to pay for other people's transactions
      • Developer & Integration Tools
        • ๐Ÿ‘ฉโ€๐Ÿ”ฌStellar Laboratory: Stellar at hand for everyone
        • ๐ŸšชFaucet: Easy Access to Free Blockchain Assets
        • ๐ŸงฐStellar Wallets Kit: A kit to handle all Stellar Wallets at once with a simple API
        • โœ๏ธSimple Signer: A wallet aggregator and transaction signer
      • Advanced Development & Testing
        • ๐ŸงชHow to Create Integration Tests Using GitHub Actions and Stellar's Docker Image
  • ๐ŸŽจDesign Sprint
    • ๐ŸŒ…Introduction
    • 1๏ธโƒฃDay 1 - Validate your problem and define your MVP's Scope
    • 2๏ธโƒฃDay 2 - Build a prototype to validate with real users
    • 3๏ธโƒฃDay 3 - Define the technical architecture
    • 4๏ธโƒฃDay 4: Develop your Go To Market Strategy & Pitch Deck
    • 5๏ธโƒฃDay 5: Compile all the information
    • ๐Ÿ‘€Sample Completed Design Sprint
Powered by GitBook
On this page
  • High-level overview: C4 Diagrams
  • Examples
  • Soroswap.finance - Automated liquidity protocol
  • FX Swap - Hedging Financial Protocol
  • Mykobo - EURC Anchor
  1. Design Sprint

Day 3 - Define the technical architecture

Define how your solution will work technically

PreviousDay 2 - Build a prototype to validate with real usersNextDay 4: Develop your Go To Market Strategy & Pitch Deck

Last updated 1 year ago

You've made it to Day 3! Well done. Today, you will focus on creating a Technical Architecture Document.

A solid technical architecture document is crucial; the Stellar Community Fund has technical reviewers who will ensure the document is clear and explains your solution in detail.

High-level overview: C4 Diagrams

C4 diagrams (short for "Context, Containers, Components, and Code"), is a visualization tool used in software system design. It provides a structured way to represent different system abstraction levels, from the high-level context to specific code details.

The C4 diagram is divided into four layers: the context, which shows how the system interacts with its environment; containers, representing the main parts of the system; components, detailing the internal pieces of the containers; and, finally, code, which focuses on detailed implementation.

This hierarchical approach makes it easy to understand and effectively communicate software architecture.

You can create the diagrams directly in your Figma file.

Here's a template to get you started:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(PersonaA, "Persona A", "Description of this persona")
Person(PersonaB, "Persona B", "Description of this other persona")

System_Boundary(MySystem, "My System Name") {
    Container(UI, "My System UI", "React with TypeScript", "Provides interface for the smart contract")
    Container(API, "My System's API", "Nest.JS with TypeScript", "The API for My System")
    ContainerDb(Database, "My System's Database", "PostgreSQL", "Stores data for my system")
    Container(AdminPanel, "My System's Admin Panel", "React with TypeScript", "Allows administrators to manage my system")
    
    Rel(PersonaA, UI, "Uses")
    Rel(UI, API, "Sends data and requests to")
    Rel(PersonaB, AdminPanel, "Uses")
    Rel(AdminPanel, API, "Sends requests to")
    Rel(API, Database, "Reads from and writes to")
}

Container_Ext(Soroban, "Soroban", "External Service", "Smart Contract Platform")

Rel(UI, Soroban, "Invokes and reads smart contracts")
Rel(API, Soroban, "Deploys smart contracts")

@enduml

Examples

Find real examples from winning SCF applications from which to draw inspiration.

Soroswap.finance - Automated liquidity protocol

FX Swap - Hedging Financial Protocol

Mykobo - EURC Anchor

Pro tip: If you want diagrams like the ones shown above, use and write PlantUML.

๐ŸŽจ
3๏ธโƒฃ
https://uml.bigger.systems/
Soroswap is an automated liquidity protocol
Mykobo is an EURC Anchor
phoenix-contracts/docs/architecture.md at main ยท Phoenix-Protocol-Group/phoenix-contractsGitHub
Phoenix DEX Smart Contracts architecture
The C4 L1 diagram does not contain implementation details of the system you are developing; everyone, should be able to understand it.
The C4 L2 diagram is a "zoom in" into your system (in this example, the Internet banking system).
The code above parsed by turns into this diagram.
https://uml.bigger.systems/
Logo