The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML elements are the building blocks of HTML pages.

HTML5

Sanity.io is the platform for structured content. With Sanity.io you can manage your text, images, and other media with APIs. You can also use the open-source single page application Sanity Studio to quickly set up an editing environment that you can customize.

Sanity

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

Three.js & react-fiber-three

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. 

GraphQl

Firebase Authentication aims to make building secure authentication systems easy, while improving the sign-in and onboarding experience for end users. It provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, and more.

Firebase

ASP.NET extends the .NET developer platform with tools and libraries specifically for building web apps.

ASP.NET

Serverless Functions, Made Simple.
OpenFaaS® makes it simple to deploy both functions and existing code to Kubernetes.

OpenFaaS

Prisma is a server-side library (ORM) that helps your app read and write data to the database in an intuitive and safe way.

Prisma

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

Mongoose

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It also includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away.

Redux-Toolkit

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud.

Apollo GraphQl

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

React

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

react-spring

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Express Server

Windows Active Directory (AD) authentication protocols authenticate users, computers, and services in AD, and enable authorized users and services to access resources securely. 

Microsoft Active Directory

GatsbyJS is a React-based, GraphQL powered, static site generator. 

Gatsby.js

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Context API

Kubernetes, also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications.

Kubernetes

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. 

TypeScript

PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.

PostgreSQL

Docker is a set of platform as a service (PaaS) products that use OS-level virtualization to deliver software in packages called containers.

Docker

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Github actions

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features.

Github

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Node.Js

C# is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

CSS3

The ASP.NET membership system was introduced with ASP.NET 2.0 back in 2005, and since then there have been many changes in the ways web applications typically handle authentication and authorization. ASP.NET Identity is a fresh look at what the membership system should be when you are building modern applications for the web, phone, or tablet.

ASP.NET Identity

SignalR is a free and open-source software library for Microsoft ASP.NET that allows server code to send asynchronous notifications to client-side web applications. The library includes server-side and client-side JavaScript components.

SignalR

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.Js

Microsoft SQL Server is a relational database management system developed by Microsoft. As a database server, it is a software product with the primary function of storing and retrieving data as requested by other software applications—which may run either on the same computer or on another computer across a network. 

SQL Server

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

MongoDB

The .NET Framework is a software framework developed by Microsoft that runs primarily on Microsoft Windows. It includes a large class library called Framework Class Library (FCL) and provides language interoperability (each language can use code written in other languages) across several programming languages. 

.NET

JavaScript is one of the core technologies of the World Wide Web. Over 97% of websites use it client-side for web page behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on the user's device.

Javascript

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

Sass

Xamarin extends the .NET developer platform with tools and libraries specifically for building apps for Android, iOS, tvOS, watchOS, macOS, and Windows.

Xamarin

Entity Framework is an open-source ORM framework for .NET applications supported by Microsoft. It enables developers to work with data using objects of domain specific classes without focusing on the underlying database tables and columns where this data is stored. 

Entity Framework

Building a MVP messaging central with realtime UI-updates between client interfaces. 

To create a scalable APP some important architectural choices were made that are described below.


The application state is handled by Redux. Instead of dispatching actions directly from components, the state flow is interceptet by the SignalR Hub. This means the UI events (drawing, writing) that needs to update all connected clients will be sent with SignalR to the ASP.Net API hub. The client application then has a dedicated SignalR component that listens to the hub endpoints and dispatches the data to redux, which is binded to and updates the client(s') UI(s). The flow is described in the artefact below.

Thanks to enforced types by C# and Typescript the application has shared types between data dispathed from Client to the Hub, and Hub to the Client. The C# models are generated with an extension to TypeScript interfaces which makes the workflow safer and faster while building new Realtime functionality. 

Post It!

The cube archive is a vintage clothing archive currently developing their digital portal aiming at delivering high quality images and renting out services to their customers. While engaged in developing their very extensive backend and staff/admin client side my goal was to develop a minimum viable product prototype of the client side UI. 

The site is created with React, and the data provided with Sanity headless CMS. Since the final product only had the purpose of testing the attainability of the graphical design requested by the client, no further architectural design decisions were made  concerning deployment, SEO, performance, etc.

The Cube

University project, to build a minimum viable product/appfor an imaginary startup company. Kangaroo is an app that aims at providing curated notifications and articles for parents. 

Since we had to incorporate React components into a pre-existing SPA app built with pure vanilla javascript DOM manipulation, we were limited to using React without any frameworks to accomplish our client-side UI . The server is built with express-graphql, Prisma (ORM) and type-graphql hooked to a postresQl databased running on a docker image, for user data storage. Type-graphql provides type safety, and one source-of-truth-approach when defining the graphQl resolvers. With Prisma a solution to the n+1 problem is guaranteed out of the box and is an easy to use ORM together with a postgresQl database. Authentification with firebase Auth.

Kangaroo

Home page made for italian bakery Flaviano Dolci. The project focused on aesthetics and serves as a vitrine, and a communication portal for the company. 

The site is built with a static site generator (SSG) and a headless content manager system (CMS), creating a Jamstack solution. Acquiring this with Gatsby.js and Sanity.io has created a fluid and effective workflow, with good SEO and overall good lighthouse scoring. It is worth mentioning that usage of parallax effects and animations has had a cost on performance, but being a "static data only" vitrine site I would argue that this is an affordable compromise.  The site has no user specific content and therefore lives without any database or other external data storage. 

The project is in continuous integration, using webhooks and deploying through Gatsby Cloud.

UI design was made in Figma by Daiana Bucciano.

Carl Anthon Wellsjö

bio

skills

social