me

Portfolio

February 18th, 2022 • 6 mins read

In this article I will talk about the projects I’ve worked and my role in them, ordered by relevance, some are personal projects others are professional.

Proximus Pickx

Proximus is the largest of Belgium's three mobile telecommunications companies. Proximus along-many products offers Pickx, a streaming platform that aggregates multiple content for their clients to watch.

I'm currently working in a team to deliver a new version of the web app, which involves:

  • Maintaining and developing components for the design system.
  • Delivering multiple new features from scratch such as:
    • navigation experience
    • features related to the authentication
    • multi-step forms for settings pages
    • search experience
    • features related to the player experience

This project gave me a very good developer experience thanks to the following technologies:

  • React, react-query, storybook, classnames.
  • Next.js, with css modules and typescript.
  • Monorepo, with nrwl/nx for managing the monorepo solution.

TubeLab (previously YTrank)

TubeLab is my pet-project since 2013. The main goal of the web application is to track the position of a video on the search result list of Youtube. All the solutions were paid and I decided to make my solution, ends up +5K (monthly) other users also needed this.

You can read more about this history of the app here.

The published version of this app has the following implementation:

This is a SaaS and to make it possible there were multiple integrations including:

TVG

Television Games Network is an American sports-oriented digital cable network dedicated to horse racing. In this project my role was to integrate multiple teams which maintained, improved and developed features being delivered to the web and iOS platforms. There were multiple projects which I was part of, such as:

  • Delivering a new authentication flow (cross-platform): login, sign-up and credentials recovery.
  • Developing a new design system from scratch for multiple platforms (web & iOS) currently being used by 30+ developers, this increased DX and allowed for a faster and higher quality development cycle for an already existing product.
  • Actively writing documentation: frontend onboarding guides, contribution guidelines and other technical documentation.
  • Developing a CLI that helped developers initialize, develop and maintain TVG packages and libraries (monorepo). It assisted in multiple ways, including scaffolding libraries, packages and design system components. The main goal was to improve the developer experience making it more efficient and standardized.

This project allowed me to apply a various range of solutions (frameworks, libraries, patterns):

  • React, react native, react-native-web, redux, apollo, axios, styled-components, etc;
  • Typescript and flow;
  • Jest with enzyme and the testing-library;
  • Babel and webpack.

And others, such as development flows, debugging, communication between apps, good code practices, problem solving and soft skills.

Editor - Custom CMS for the University of Aveiro

The Editor was one of the most challenging projects I’ve worked on. I was responsible for the research and development of a visual and personalized CMS with features such as:

  • The authentication flow, including roles and permissions;
  • Visual, editable and modular pages with live preview and challenges such as:
    • a custom rich text editor;
    • dynamic forms;
    • image gallery with all features (search, upload and edit);
    • multi-language (portuguese and english).
  • Collaborative edition of pages with version control, history, multiple environments (scratch, saved and published) and an auto-save functionality;
  • Implementation of a menu editor, made with drag and drop and inline edition.

The main technologies behind this were React with redux (redux toolkit) and styled-components, immer, formik and draft.js.

One of the major challenges was performance (virtualizing long lists, memoization) with the end-goal of avoiding unnecessary re-renders. This allowed me to be more conscious about good practices and possible pitfalls.

References: https://www.ua.pt/pt/portal/editor

Sawgrass Network

This was a short-term freelance work for Frontedge Digital, delivering features for an e-commerce marketplace for Sawgrass Ink. My main role in this project was to improve the developer's workflow and develop components and pages.

  • Implemented pages and components:
    • the search page containing multiple filters with dynamic results;
    • a configurable dashboard menu and other quick wins.
  • Configured linters to improve the overall quality of the code and contribution patterns.

This was developed using Vue with Vuex and Tailwind CSS. As for the tools configured: eslint, prettier and lint-staged.

Github Dependencies

This is a simple web tool that you can use to find your most used dependencies in github repos.

You can login with github and it will fetch all your repositories dependencies, parsing that data and creating a chart of your most used dependencies which you can customize and download as an image.

Main technologies and challenges:

  • React and next with next-auth;
  • Typescript;
  • Github authentication flow;
  • Used @graphql-codegen to automatically create the services and type-definitions for Github’s GraphQL API;
  • Parsing the multiple package managers npm and composer;
  • Creating an editable and downloadable chart;
  • Should be documented, tested and easy to contribute.

Try it here and here’s the repo.

Voluntários (Volunteers)

Voluntários is a platform with the aim to help connect causes with volunteers. The main goal is to have an index of people willing to volunteer and a way for them to be contacted by causes/projects.

The main challenges were:

  • The registration flow of a new volunteer, inspired by Typeform, where I implemented from scratch a paginated form with transitions and distinctive interactions while being keyboard accessible;
  • A list of all the volunteers, ordered by closest to you (location) and filterable, the major challenge here was on the backend. Made with MongoDB.
  • Customizable illustrated avatars, with the option of uploading one.

You can check the repo here.

Stack and patterns:

  • React with next and next-auth and styled-jsx;
  • Apollo server and MongoDB (mongoose);
  • Storybook to develop components in isolation with the atomic-ui pattern;
  • Jest.

You can check the website here.

Shootsgud Major League

Designed and implemented by me (frontend and backend), this was an e-sports website for a tournament. The goal was to allow tournament managers to easily add the results of the tournament with in-depth statistics per player and team. It also required the tournament content creators to create and share articles.

This was possible with:

  • Integration with PUBG’s API for player and team statistics;
  • Integration with an headless CMS, in this case sanity.io.

Here’s the repo.

The technical stack was:

  • React with Next.js and styled-components;
  • Headless CMS with Sanity.io.

Caldeira Surf Camp - Guesthouse

This is a simple website for a guesthouse. Designed and developed by me.

  • Multi-language (english and portuguese);
  • Statically generated with Gatsby.;
  • Contact form with formik and an serverless function.

You can check the website here.

Open source contributions

I’ve contributed to some open source packages, one of my goals is to contribute more:

;