Björn Ruberg, Developer in Oranienburg, Brandenburg, Germany
Björn is available for hire
Hire Björn

Björn Ruberg

Verified Expert  in Engineering

Front-end Developer

Location
Oranienburg, Brandenburg, Germany
Toptal Member Since
August 28, 2020

Björn is an expert in building React front ends with additional experience in full-stack development and team management. He has worked and specialized in React for six years with a great understanding of its paradigm and has also focused on JavaScript and TypeScript for the same amount of time. Björn is also familiar with all other parts of the tech stack of a web application.

Portfolio

Tad Slaff Consultancy Services
React, REST, OAuth, Single Sign-on (SSO), Responsive Layout...
About You
TypeScript, React, Performance, Web Development, Mobile Web...
Diconium
React, TypeScript, GraphQL, Web Development, API Integration...

Experience

Availability

Part-time

Preferred Environment

Amazon Web Services (AWS), React, JavaScript, GraphQL, TypeScript, Linux, Node.js, CSS, Website Performance, Server-side Rendering (SSR)

The most amazing...

...thing I've developed was a framework that created specific JavaScript code to put video buttons on product pages of hundreds of web shops during page load.

Work Experience

React Developer

2023 - 2023
Tad Slaff Consultancy Services
  • Created a dashboard application running serverless on AWS Lambda, S3, and CloudFront using the Remix framework.
  • Implemented data analysis visualization using Cube.js and Recharts.
  • Integrated OAuth 2 authentication using AWS Cognito.
  • Delivered a visually stunning and responsive dashboard that delighted the customer.
Technologies: React, REST, OAuth, Single Sign-on (SSO), Responsive Layout, Amazon Web Services (AWS), TypeScript, Remix, Amazon Cognito, Recharts, Tailwind CSS, GitHub, Amazon S3 (AWS S3), CSS, JavaScript, HTML5, Front-end, AWS Lambda, Responsive Design, HTML, Architecture, Content Delivery Networks (CDN), JSX, Mobile Web, Front-end Development, Full-stack Development, Server-side Rendering (SSR), CI/CD Pipelines

Front-end Developer

2021 - 2022
About You
  • Enhanced About You's performance with a focus on core web vitals.
  • Developed large parts of the new sidebar navigation for mobile devices, which allowed the removal of a large chunk of legacy application code.
  • Reduced the number of logged client-side JavaScript errors by approximately 90%.
Technologies: TypeScript, React, Performance, Web Development, Mobile Web, Server-side Rendering (SSR), Front-end Architecture, Styled-components, ECMAScript (ES6), CI/CD Pipelines, User Interface (UI), APIs, Jest, YARN, Webpack 4, CSS, JavaScript, Website Performance, HTML5, Front-end, Responsive Design, HTML, Webpack, eCommerce, Cypress, Content Delivery Networks (CDN), JSX, Storybook, Front-end Development, Responsive Layout

Senior Front-end Developer (Freelance)

2020 - 2021
Diconium
  • Contributed to the One.Shop project, which powers the web shops in the VW group.
  • Improved developer experience by increasing build time speed by approximately 50%.
  • Additional details are covered under an NDA.
Technologies: React, TypeScript, GraphQL, Web Development, API Integration, Front-end Architecture, Next.js, Styled-components, ECMAScript (ES6), CI/CD Pipelines, User Interface (UI), APIs, Jest, Webpack 4, CSS, JavaScript, HTML5, Front-end, Responsive Design, HTML, Webpack, JSX, Storybook, Mobile Web, Front-end Development, Responsive Layout

Full-stack Developer

2019 - 2020
Yara International GmbH
  • Rewrote an application far ahead of schedule with a modern tech stack (React/TypeScript).
  • Demonstrated exceptional developer prowess in GraphQL.
  • Developed the application's front end and took over the Node.js back end.
Technologies: Babel, ECMAScript (ES6), Architecture, Apollo, Website Performance, Material UI, React, JavaScript, GraphQL, TypeScript, CSS, HTML, PostgreSQL, Front-end, Back-end, Node.js, Web UI, Cypress, Webpack, Web Development, API Integration, Full-stack, Front-end Architecture, CI/CD Pipelines, User Interface (UI), APIs, Jest, GitHub, Webpack 4, Firebase, HTML5, Responsive Design, Content Delivery Networks (CDN), JSX, Front-end Development, Full-stack Development, Responsive Layout, Koa

Front-end Developer and Team Lead (Freelance)

2018 - 2019
Thdata GmbH
  • Revised the complete codebase of an existing application introducing a scalable data fetching layer (using GraphQL), removing code duplicates, reducing code size, applying advanced React patterns, and improving performance.
  • Created a fork of unmaintained vis.js and optimized its performance, enabling the application to stay responsive while adding more features.
  • Rewrote and extended an interactive planning timeline. Added a logic engine that allows task planning within the front end, considers the capacities of machines and personnel, and immediately displays planning conflicts without delays.
  • Implemented a highly responsive and touch-enabled component of the software intended for being used on tablets in an industry environment.
  • Boosted the performance of the whole front-end team after taking over team leadership.
Technologies: Babel, ECMAScript (ES6), Architecture, Apollo, Website Performance, Vis.js, D3.js, Material UI, React, JavaScript, GraphQL, Redux, CSS, HTML, Front-end, Web UI, Webpack, Web Development, REST APIs, Front-end Architecture, CI/CD Pipelines, User Interface (UI), APIs, GitHub, Amazon S3 (AWS S3), Webpack 4, HTML5, Responsive Design, React Redux, JSX, Storybook, Mobile Web, Front-end Development, Responsive Layout

Front-end Developer (Freelance)

2018 - 2018
Mobile.de GmbH
  • Analyzed an existing jQuery-based legacy application codebase and reimplemented its functionality with React.
  • Implemented a method for using A/B testing technologies to switch between old and new applications dynamically.
  • Helped increase conversion rates by working with the product management/UX teams and providing a much more resilient software.
Technologies: Babel, jQuery, ECMAScript (ES6), Architecture, Website Performance, React, JavaScript, Redux, CSS, HTML, Front-end, Web UI, Web Development, API Integration, REST APIs, User Interface (UI), APIs, GitHub, Webpack 4, HTML5, Responsive Design, React Redux, JSX, Mobile Web, Front-end Development, Responsive Layout

Senior Full-stack Developer

2014 - 2018
DemoUp GmbH
  • Developed and maintained an integration framework that builds specific script files for connecting hundreds of online shops to the DemoUp video network.
  • Implemented the DemoUp interface for customers and interns for uploading videos, mapping videos to products, statistics, connecting to the payment service, and showing a live stream of currently watched videos.
  • Implemented the invoicing and payment system supporting customer-specific tariffs.
  • Implemented the DemoUp homepage as a server-side-rendered React application long before you could use frameworks that provide that feature.
  • Implemented a Preact (3 KB React alternative)-based tiny video player of 23 KB (gzipped, minified) in size, including styles, icons, and telemetry that provided superior cross-browser functionality compared with the default solutions of that time.
  • Implemented integration snippets with custom placements of video buttons for hundreds of eCommerce shops.
Technologies: Babel, Content Delivery Networks (CDN), jQuery, Video Streaming, Architecture, eCommerce, Website Performance, D3.js, React, JavaScript, Redux, CSS, HTML, MySQL, Preact, Linux, Front-end, Back-end, Node.js, Amazon Web Services (AWS), Web UI, Docker, Kubernetes, Webpack, Web Development, Web Scraping, API Integration, Server-side Rendering (SSR), REST APIs, SQL, MariaDB, Full-stack, Front-end Architecture, Third-party Integration, User Interface (UI), NoSQL, APIs, Video Codecs, Amazon S3 (AWS S3), Webpack 4, HTML5, Responsive Design, React Redux, JSX, Front-end Development, Full-stack Development, Responsive Layout, Recharts

Solution Engineer

2014 - 2014
Mobizcorp Europe Ltd
  • Understood the development of Demandware customizations.
  • Helped launch a new shop system for Columbia sportswear.
  • Utilized React and Node.js to develop complex pages.
Technologies: Bootstrap, Demandware, eCommerce, jQuery, JavaScript, CSS, HTML, Front-end, Web UI, Web Development, User Interface (UI), APIs, Responsive Design, Front-end Development

Web Developer

2010 - 2013
Brand-Catcher GmbH
  • Developed a system for automatically managing order returns and issuing refunds.
  • Developed an inventory system that allocated incoming or stored ware to customers and generated lists of products for reorder.
  • Worked on the online shop's front end and back end using JavaScript and PHP.
Technologies: Architecture, PHP, eCommerce, jQuery, JavaScript, CSS, HTML, MySQL, Linux, Front-end, Web UI, Web Development, SQL, MariaDB, Full-stack, User Interface (UI), APIs, Front-end Development

Serverless Data Analysis Dashboard

https://qzwr.qloc-cloud.de/s/KfzHbJpiKySPM2f/download/dashboard.png
The project is an MVP for a data analysis dashboard built on a powerful architecture that provides a foundation for future growth. It utilizes the modern React framework, Remix, and operates without traditional servers. Instead, it is deployed serverlessly using AWS stack-based Lambda functions. This approach offers clients the advantage of minimal ramp-up costs while ensuring excellent scalability. Connecting a CloudFront CDN allows the dashboard to be delivered globally for optimized performance.

Data visualization was powered by a Cube.js instance, serving as a speedy replacement for a custom back end. The front-end styling utilized Tailwind with Tremor and Flowbite UI libraries. OAuth 2 authorization was implemented using AWS Cognito. I received a perfect customer rating of 10 out of 10 stars for my work.

Pricora | Privacy-enabled, Touchless, Paperfree, and Self-administered Attendance List

https://github.com/bjruberg/pricora
During the COVID-19 pandemic, the authorities in Germany mandated the maintenance of attendance lists for all types of gatherings. However, managing these lists posed significant challenges for hosts and proved to be an inconvenience for attendees. The manual process of filling out paper lists was time-consuming, raised data protection concerns, and often hindered effective contact tracing due to illegible handwriting. Although digital solutions emerged, they often required the installation of apps and raised questions about data protection.

To address these shortcomings, I developed an open-source software called Pricora. The software was designed to be installed on self-hosted servers with minimal hardware requirements. Pricora implemented strong asymmetric encryption, utilizing the host's password to encrypt personal data before writing it to disk. This ensured the data remained encrypted and unreadable without the host's password.

Attendees were asked to scan a QR code, which opened a web page in their browser. They could then enter their personal data using the browser's form auto-completion feature. The data was encrypted using a pubkey. In case authorities required it, hosts had the ability to export guest lists.

Planeus Production Planning | Gantt Diagram

https://www.youtube.com/watch?v=KmnWIxqpBSE
As part of Planeus's production planning system, I assumed responsibility for implementing substantial components. A significant focus of my work involved reviving the interactive Gantt timeline chart, which played a pivotal role in providing a comprehensive overview of the production process. At that time, the original implementation of vis.js had been left unmaintained. To address this challenge, I took the initiative to fork vis.js and its timeline module, enabling me to effectively customize it and meet the project's specific requirements. Importantly, it is worth noting that the development of vis.js was later resumed after my involvement.

KEY ACHIEVEMENTS
• Seamlessly integrated the Gantt timeline into the React application by developing a robust bridge between React and vis.js.
• Optimized performance by streamlining the vis.js codebase, eliminating unnecessary features, and enhancing its speed.
• Implemented a sophisticated collision detection algorithm in the front-end, facilitating efficient task scheduling.
• Devised client-side algorithms that enabled smooth item movement and resizing.
• Introduced comprehensive styling mechanisms, significantly enhancing the system's visual appeal and usability.

Preact-based Video Player in 23KB

As a senior developer for a video deployment service, I built a lightweight cross-browser video player to deliver our videos to browser users. Available video player solutions like "video.js" and "media elements" had limitations, including bloated code and browser bugs.

To address these issues, I chose Preact (a 3KB alternative for React) as the foundation for the player, ensuring a lightweight design while benefiting from front-end rendering. The resulting video player was only 23KB in size, enabling fast fetching by browsers within two TCP roundtrips.

The improved video player significantly enhanced the user experience. It reduced video startup time by approximately one second, providing a seamless viewing experience for over 99% of users. Furthermore, the player resolved issues with pausing, resuming, and full-screen toggling, resulting in a bug-free experience.

Overall, my work on the video player contributed to a better user experience, faster video startup, and resolved compatibility issues, making video playback more enjoyable for most users.

Planeus Responsive Workbench

https://www.youtube.com/watch?v=YCO8lKVmjtA
The Planeus Workbench serves as the front-end of the Planeus production planning software, specifically designed for use by production workers on their mobile devices. Its purpose is to provide an intuitive interface for workers to interact with the Planeus system, allowing them to report progress and receive task instructions seamlessly.

To cater to mobile devices and establish an interface with the Planeus production plan, the Workbench was developed as a separate front-end system. In terms of technology, I opted for a similar stack as used in the main Planeus application, including React, MaterialUI, and Redux.

Leveraging my senior engineering experience, the Workbench benefitted from a cleaner and more streamlined codebase. This not only facilitated faster development but also enabled the successful implementation of modern UX patterns, resulting in excellent user acceptance.

By building upon a solid foundation and incorporating modern technologies, the Planeus Workbench provided an efficient and user-friendly solution for production workers. Its development and implementation were characterized by faster iterations, improved user experience, and widespread user adoption.
2005 - 2013

Master's Degree in IT, Systems, and Engineering

Hasso-Plattner-Institut - Potsdam, Germany

Libraries/APIs

React, jQuery, React Redux, Preact, Node.js, REST APIs, D3.js, Vis.js, WebRTC, Recharts

Tools

JSX, Webpack, Babel, GitHub, Webpack 4, Amazon Cognito, Rollup

Frameworks

Material UI, Redux, YARN, Cypress, Bootstrap, Tailwind CSS, Remix, Next.js, Cube.js, Jest, Koa

Languages

JavaScript, TypeScript, CSS, HTML, ECMAScript (ES6), HTML5, GraphQL, SQL, Python, C++, PHP

Platforms

Linux, Docker, Firebase, Amazon Web Services (AWS), Kubernetes, AWS Lambda, Demandware

Paradigms

REST, Responsive Layout

Storage

MySQL, MariaDB, Amazon S3 (AWS S3), PostgreSQL, NoSQL, Databases, SQLite, Redis

Other

Front-end, Web UI, Responsive Design, Website Performance, APIs, Web Development, Front-end Development, Styled-components, Third-party Integration, User Interface (UI), Code Architecture, Back-end, eCommerce, Apollo, Architecture, Video Streaming, Encryption, Storybook, API Integration, Server-side Rendering (SSR), Full-stack, Front-end Architecture, Gatsby, Content Delivery Networks (CDN), Performance, Mobile Web, Software, Full-stack Development, Web Scraping, CI/CD Pipelines, Video Codecs, OAuth, Single Sign-on (SSO), TypeORM, Data Encryption, Asymmetric Encryption

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring