Skip to main content

GitHub repository

The Swan Banking Frontend repository, hosted on GitHub, contains two main directories: clients and server.

Clients​

Technologies​

Structure​

In the ./clients directory, you'll find two frontend clients:

  • Web Banking (banking): banking interface where users can manage their financial needs around transactions, cards, payments, and memberships
  • Onboarding (onboarding): process of opening new accounts for your users that follows specific steps to meet legal requirements

public​

The contents of the public directory are copied to the root of the application as-is. This can be useful for favicons, robots.txt files, and more.

src​

The application lives in the src directory with the following content:

  • Entry files
    • index.html: HTML entry point
    • index.tsx: TypeScript entry point
    • App.tsx: root React app component
  • Directories
    • assets: files you want to import from the TypeScript application
    • components: React components
    • graphql: GraphQL documents used in the app
    • locales: translation files (JSON)
    • pages: "root" components for pages
    • utils: files used around the codebase

Server​

In the ./server directory, you'll find the Backend for Frontend, sometimes referred to as BFF.

BFF is responsible for:

  • Handling OAuth2
  • Managing user sessions
  • Acting as a proxy for Swan's GraphQL APIs
  • Handling some business logic
  • Serving the client application

Technologies​

Structure​

src​

The application lives in the src directory with the following content:

  • Entry files
    • index.ts: server entry point
    • app.ts: server main router
    • env.ts: environment variables
  • Directories
    • api: OAuth2 and API-related functions
    • client: logic for serving and caching files based on the environment
    • graphql: queries and mutations performed by the server
🚀 Any questions? Help improve this project and the docs by opening a GitHub discussion.