[keremkazan]

Hi everyone! This is Kerem Kazan ( @MechanicalKazan), founding engineer @Matter_HQ. I’m here to shed some light on questions coming from the engineers among you. Here's a brief overview of how we built Matter:

Matter is a web app, written in NodeJS. For about 50% of our app, we use ES6 and compile it down via Babel. The more recent parts of our app is written in TypeScript, and we are in the process of migrating the rest to TypeScript as well. We also depend heavily on eslint & tslint for a consistent code style. We have a fairly large code base, with 9 standalone packages that together comprise Matter. We use yarn workspaces to orchestrate how these packages depend on each other.

If I had to break down our app into its most fundamental parts, we’d have 4 sections:

a) @matterapp/matter-ui: Our frontend component library. Written in React, developed with Storybook. We use styled-components along with grid-styled to manage our css.

b) @matterapp/web-client: Our web app’s frontend code. At its core, it’s a create-react-app project. It combines and composes the components in @matterapp/matter-ui. We use Redux for local state management, and Redux-form for our forms. We use Recompose for maintaining our higher order components. Also, ReactRouter for client-side routing. For remote state management, we use apollo-client. All of our user-facing api is written in GraphQL, (and yes, it’s been amazing). We use CypressJS for automated end-to-end testing of our entire app.

c) @matterapp/graphql-server: Our web app’s user facing api server. At the bottom of the stack, we have Koa. Our Koa server connects to our MariaDB sql database via KnexJS & Objection. We’re in the process of picking another ORM, (something more typescript friendly). We’ll either go with TypeORM or Sequelize-Typescript. Our server has one endpoint for user-facing api calls, and that’s our GraphQL endpoint. Because Matter needs a bunch of 3rd party integrations, we also use Grant for OAuth solutions. Authentication is handled via the beloved jsonwebtoken library.

d) @matterapp/lambdas: Our background jobs system. We use serverless-framework to interface with aws. This coebase is written purely in TypeScript. The users never directly invoke calls on this part of our stack. This is strictly for background jobs like batch processes or cron jobs. Usually, our graphql-server puts something to an SQS queue, and the lambdas pick it up. Sometimes the graphql-server sends direct api-calls via api-gateway. We use inversify-js on our lambdas for inversion of control.

So, there you have it :) A brief overview of Matter’s tech stack. Let us know what you think. Feel free to give some feedback, ask questions, or provide criticism. Looking forward to learning from you!

[onurozkan]

You might want to check website with uBlock open, nothing able to initialize hence only blank page displayed.

[keremkazan]

thanks for the feedback onur. i just installed the uBlock chrome extension, and i could not reproduce the blank screen. Could it be another extension that you are using? Device/browser details would be appreciated as well. thank you!