• Skip to about
  • Skip to testimonials
  • Skip to skills
  • Skip to projects
  • Skip to experience
  • Renato Böhler, frontend developer

    About

    A smiley Renato
    Message from RenatoHello there 👋

    What my colleagues have to say about me?

    All testimonials spontaneously provided by colleagues

    skills

    Competences

    Based on feedbacks collected from my colleagues

    Technologies

    Click each one of the cards below for more context on my experience with these technologies

    personal projects

    1.logossim

    Logossim

    An open-source logic digital simulator built for the web

    last updated November 22, 2024 at 12:52 PM UTC100 stars

    Logossim was a result of my undergraduate thesis on Computer Engineering. As the name implies, Logisim— an acclaimed logic circuit simulation software — was a big inspiration for this project.

    The simulator offers 27 base components, including I/O, logic gates, memory, plexers, and wiring utilities. With those components, it is possible to build fun circuits, like this one, that play “The Imperial March” from the Star Wars franchise.

    Every component has its own set of configurations, which can be set by the user and determine how it looks and behaves during the simulation.

    The core principle of this project is to be easily understandable by anyone with some web development background (HTML, CSS, and JS). To achieve this, I implemented a custom-built logic simulation engine.

    This engine runs on a Web Worker thread and orchestrates the simulation, handling user input, propagating signals, and communicating with the UI thread via messages.

    The user interface was built on top of react-diagrams, which was heavily customized to support bifurcations across links, right-angle links, copy & paste and undo & redo functionalities, among other customizations implemented to make Logossim look and feel like Logisim.

    Some other features of this application are:

    • Component configurator with previews
    • A welcoming and informative tour
    • Saving and loading of circuit files
    • Auto saving
    • Keyboard shortcuts
    2.what the filter?

    What the Filter?

    A visual playground to JavaScript array and object transformations

    last updated June 7, 2022 at 8:33 PM UTC153 stars

    The inspiration for this project came to me after I realized how many developers had trouble understanding functional-styled methods like map, filter, reduce or even Object.entries or Object.fromEntries on JavaScript.

    I started noticing that people would understand those concepts much faster by visualizing a flowchart that explains how data gets transformed through each method.

    Thus What the Filter? was born with a simple vision: the user inputs some code, and the application generates a diagram detailing each transformation and each value in intermediate steps.

    Before building such diagram, the application transforms the code into an Abstract Syntax Tree (AST) and detects the initial input. It then performs static analysis to determine the order in which every method would get called. After that, it executes them with their corresponding inputs to determine all intermediate values.

    What the Filter? also warns users about JavaScript methods that may have pitfalls:

    • methods that mutate the object instead of returning new ones (like splice)
    • sort, which will infamously cast numbers to strings before sorting if no comparing function gets provided

    Another convenient feature: should any error occur during a transformation, the diagram still gets generated up until the method that failed, and the output tries to explain what went wrong based on common mistakes.

    What the Filter? can be helpful for new developers trying to learn functional programming concepts, but it can also be used by experienced developers to debug and understand more complex transformations.

    Oh, and I almost forgot! You can generate URLs like this to share a specific transformation with your colleagues.

    3.redux form input masks

    redux-form-input-masks

    Input masking with redux-form made easy

    downloaded 26,012 times last month138 stars

    This was my first published open-source project and NPM library. Its goal was to make adding input masking to redux-form fields an easy task.

    Of course, with redux-form being pretty much deprecated for some time now, I haven't been devoting much time to this project lately.

    But the experience of building and publishing a library with its documentation for the first time was worthwhile, and I've learned a lot from it. It also feels good to see other developers using your library on their projects 🤩

    It was also my first time configuring a CI/CD pipeline by myself. I've used Travis CI, running semantic-release to automatically determine the version number and publish to NPM, as well as deploying the new documentation to GitHub Pages. I've also configured Codecov to automatically generate test coverage reports and Danger JS to analyze pull requests.

    4.this page

    My portfolio

    Yeah, that's a little bit meta, I know

    last updated November 22, 2024 at 12:52 PM UTC34 stars

    I wrote the first version of my portfolio in Vue.js. It was much simpler (and less beautiful) than the one you're looking at right now.

    This is the “2.0 version” of my portfolio, completely rewritten from the ground up using Next.js. It's a personal project, so everything you see here was done exclusively by myself, from design and assets through implementation and deployment.

    I decided to treat this project as my piece of art, so I'd only work on it when I felt inspired enough to do so during my free time. I rebuilt every section of this portfolio 2 or 3 times before being happy with the outcome. That might explain why it took me about two years to finish it 😅

    I'm someone who loves having fun while building beautiful stuff, and I wanted this page to be unique and reflect who I am — both professionally and personally.

    This site tells the story of my professional career, but it's also full of personal details. For instance, the footer contains a topographic map of my hometown in the background, and the “made with ❤ by” vector was hand-written by myself.

    I wanted visitors to feel like they knew me just by looking at my portfolio, and that's why I've built the About section as an interactive chat simulator, so anyone can experience how it feels talking to me. But if you're looking for the real deal, feel free to 😉

    Experience

    • Shippo

      Front end developerAugust 2023Present (1 year, 5 months)
    • Pizzeria Marketplace App*

      Front end developerNovember 2021August 2023 (1 year, 10 months)* as a consultant, I'm not allowed to disclose client information

      As a front end developer for this company, my role involves creating and maintaining the user interface of a platform that serves thousands of pizzerias across the United States, working alongside product managers, designers, and other developers based in various locations around the world.

      One of my significant achievements during my time at this company was leading the development of a React component library that has been adopted by multiple teams. I oversaw its creation, from defining core concepts and workflow to setting up the bundler (Vite), implementing automatic semantic versioning and publishing (using Auto), configuring automated Storybook deployment, and ensuring code-splitting was executed correctly (both for JS and CSS).

      In addition, I've made significant improvements to the developer experience by reworking an automated ADA compliance check, leading the migration of unit tests from enzyme to react-testing-library, and leading the migration of styling from react-fela to sass. I've also polished bundler and CI/CD configurations, migrated the pipeline from GitLab to GitHub Actions, maintained dependencies up-to-date, and refined linting rules across multiple projects.

    • Digital Mortgage & Fulfillment Solutions*

      Front end developerMarch 2021November 2021 (9 months)* as a consultant, I'm not allowed to disclose client information

      This Denver-based company provides mortgage and fulfillment software and services for banks across the United States.

      As part of my role in the project, I collaborated with the front end team to develop new features for their back office application, primarily used by loan officers. Additionally, I worked on the redesign of their white-label website, which is utilized by lenders.

      Since both applications were built using Angular, it was a great opportunity for me to utilize my Angular skills professionally again after not having used them for three years.

    • B2B Travel*

      Front end developerSeptember 2020March 2021 (7 months)* as a consultant, I'm not allowed to disclose client information

      As a corporate travel software, this app included flight and hotel booking, car rental, expense management, policies and approvals, users and groups, and more. It's a React project embedded via WebView into the biggest Colombian super app.

      Initially, this project was meant to be mobile only. During this period, apart from developing new features and fixing bugs, I was tasked with collaborating with the design team to redesign every screen to make it compatible with desktop devices. I also worked to improve the developer experience of the project, installing and configuring linting tools and improving the CI/CD pipeline.

    • Healthcare Marketplace App*

      Mobile & Front end developerMarch 2020September 2020 (7 months)* as a consultant, I'm not allowed to disclose client information

      My goal for this project was to develop the first production release of a healthcare marketplace mobile app for iOS and Android using React Native.

      The first release included guest mode, sign-up/sign-in flows, home screen, doctor and exams searching and scheduling, payment, and telemedicine using Twilio's Video API.

      During this period, I worked closely with designers and led a small team of three developers. I also helped develop new features on the front end for the back office of the project, using React.

    • Agrotis

      Full stack developerOctober 2016March 2020 (3 years, 6 months)

      Agrotis is a Brazilian-based company that develops software for the agriculture industry.

      I started as a backend engineer, developing APIs using Java EE, Hibernate, SQL Server, Kafka, and MQTT. I soon migrated to a full stack position, working with AngularJS and React.

      During my time at Agrotis, I had the opportunity to contribute to the development of several core functionalities of their enterprise web platform. For instance, I worked on a custom rich text editor (using draft-js) to generate dynamic contract documents based on system parameters. Additionally, I assisted in the development of real-time hardware integration with the web platform, which enabled users to read truck weights on the go (using MQTT). I was also involved in the development of integrations with SAP Business One through Apache Kafka.

      I was also the developer in charge of maintaining a core React components package used by another four web teams in the company.