Diego is currently unavailable
Diego Casas de Arcega
Verified Expert in Engineering
Front-end Developer
Arapongas - Paraná, Brazil
Toptal member since June 7, 2021
Bio
Diego is a senior front-end developer with a focus on React web development who collected many tools and techniques to deliver high-quality web apps in the shortest amount of time. He developed communication apps with video and audio and built text chats on top of Twilio APIs. A logistics web application for B2B also played a major role in his career. He went the extra mile to solve performance challenges related to intense data processing on the user interface.
Portfolio
Toptal Client
React, TypeScript, Material UI, REST APIs, React Query...
Quiqup
TypeScript, React, Redux, Cypress, React Testing Library, NestJS, GraphQL...
Reviving Mind
JavaScript, CSS, HTML, React, Context API, React Query, Twilio...
Experience
- CSS - 7 years
- HTML - 7 years
- JavaScript - 7 years
- React - 5 years
- Jest - 4 years
- Cypress - 3 years
- React Testing Library - 2 years
- TypeScript - 1 year
Work Experience
Senior Front-end Engineer | React
2021 - PRESENT
Toptal Client
- Architected a new single-page application with React and TypeScript from scratch.
- Implemented the authorization flow with login, forgot password, token expiration, and refresh.
- Implemented a multiple-page form with a PDF report at the end, including front-end only.
Technologies: React, TypeScript, Material UI, REST APIs, React Query, Single-page Applications (SPAs), Code Splitting, Application State Management, Front-end Architecture, Front-end Build Tools, Front-end Development, Front-end
Senior Front-end Developer | React
2020 - 2021
Quiqup
- Developed new features and migrated existing components to React and TypeScript.
- Improved the overall architecture of the app, using code splitting to avoid unnecessary code being shipped to the user.
- Enhanced the app's quality by fixing and adding new tests and enforcing them before the app is shipped to production.
- Refactored and simplified the architecture of two apps to be more future-proof and make better use of reusable components. I also removed the unused code.
- Improved performance of the app by caching requests with React Query and updating the cache when needed, also by avoiding unnecessary render of components.
- Implemented a mechanism that saves the company money by blocking the user from making requests to the servers when the user is considered idle on the app.
- Tracked and fixed bugs by improving the error handling in the application.
- Implemented error boundaries to allow users to continue using the app even though some parts of the app may break due to an invalid API payload.
- Fixed the code quality by enforcing and linting rules, type checking, and testing in the development process.
Technologies: TypeScript, React, Redux, Cypress, React Testing Library, NestJS, GraphQL, WebSockets, React Query, Code Review, Source Code Review, Enzyme, Webpack, Styled-components, React Router, Code Splitting, Performance Optimization, SCSS, APIs, REST APIs, CSS3, Refactoring, React Hooks, Context API, GitLab CI/CD, Responsive Design, Front-end Architecture, Front-end
Front-end Developer | React
2020 - 2020
Reviving Mind
- Developed and shipped the React web application from scratch in three months, including all the DevOps and the front end's video, text chat, subscription, and dashboard.
- Improved the performance of the app by caching requests with React Query to workaround the usage of Lambda functions with a high cold start time.
- Architectured the application from the beginning and decided on most of the used technologies to launch the product as soon as possible.
- Launched the app to market three months earlier than budgeted.
Technologies: JavaScript, CSS, HTML, React, Context API, React Query, Twilio, Twilio Programmable Video, Styled-components, Material UI, Prettier, GitHub, GitHub Actions, Minimum Viable Product (MVP), SCSS, APIs, REST APIs, Code Splitting, React Router, CSS3, Refactoring, TypeScript, React Hooks, Responsive Design, Design, Front-end Architecture, Front-end
Front-end Developer | React
2019 - 2020
StriveLabs
- Joined the team to launch the product to the market as soon as possible and made it in three months.
- Developed new features, fixing issues as well as improving the performance of the app.
- Reduced the bundle size of the app by 50% and enabled the app to render 25% quicker.
- Removed unused files, code, and assets of the project.
Technologies: React, Redux, Lodash, CSS, HTML, JavaScript, Code Review, SCSS, APIs, REST APIs, Performance Optimization, Code Splitting, React Router, CSS3, Refactoring, Source Code Review, React Hooks, Responsive Design, Front-end
Front-end Developer | React
2019 - 2019
DevReady
- Developed a communication React web app that is used for connecting tutors to students.
- Joined the company to finish the project and connect the UI with the back end (REST and WebSocket).
- Served as the only front-end developer on the project, connected the entire back end and Twilio APIs to make the web app usable for the end clients.
Technologies: JavaScript, HTML, CSS, Redux, React, Context API, WebSockets, Twilio Programmable Video, Twilio, react-spring, React Hooks, Sass, Styled-components, Bootstrap, Semantic UI, Socket.IO, Prettier, ESLint, HTML5, SCSS, APIs, REST APIs, React Router, CSS3, Refactoring, Source Code Review, Responsive Design
Front-end Developer | React
2016 - 2019
Quiqup
- Built the customer react platform to track live deliveries and send the users an SMS message with the URL of the platform.
- Built the B2B react platform so that clients can create delivery orders and track them via the dashboard.
- Created processes and guidelines to allow for the app to be deployed safely to production.
- Improved and maintained the app's performance quality to allow users to interact with the interface as easy as possible.
- Created E2E tests to assure high-quality deliveries of the product to production.
- Served as a lead developer, mentoring other, less experienced developers across the development of this product.
- Improved the performance of the real-time updates by around 70%. The project became the most important front-end project of the company, used by the company's most important clients.
Technologies: JavaScript, CSS, HTML, React, Redux, Jest, Enzyme, React Testing Library, Cypress, WebSockets, Storybook, Styled-components, Immutable.js, Lodash, GraphQL, Apollo Client, Sass, Webpack, ESLint, Prettier, Git, GitLab, GitLab CI/CD, Code Review, Refactoring, Minimum Viable Product (MVP), HTML5, SCSS, APIs, REST APIs, Performance Optimization, Code Splitting, React Router, CSS3, Source Code Review, Responsive Design, Front-end, Front-end Architecture, Front-end Build Tools, Front-end Development
Front-end Developer | React
2016 - 2016
Tago.io
- Created widgets that show real-time data from IoT devices on a react dashboard.
- Improved performance of the web app when it receives new data and processes it to display the data in the widgets.
- Improved overall web app performance by avoiding unnecessary renders of components.
Technologies: React, Redux, Storybook, JavaScript, CSS, HTML, Enzyme, Jest, Highcharts, Lodash, Webpack, ESLint, Git, Socket.IO, Code Review, SCSS, APIs, REST APIs, Performance Optimization, React Router, CSS3, Source Code Review, Responsive Design
Front-end Developer
2015 - 2016
Collabo Software Ltda
- Developed the web mobile version of the application, which allowed the users to access the electronic catalog from any device.
- Created a user interface that is easy to use, removing the need for an initial tutorial of how the web application works.
- Made the landing page load faster by removing unused assets.
Technologies: AngularJS, JavaScript, HTML, CSS, Web UX, Design, Sass, Responsive Design, HTML5, Code Review, CSS3, SCSS, APIs, REST APIs, Source Code Review, Front-end Design, Front-end Development
Front-end Developer
2015 - 2015
Sagra Comunicação
- Created websites and portals for the agency's clients.
- Improved and fixed other existing products; some of them were legacy products.
- Helped designers understand better how to develop user interfaces for websites.
Technologies: Grunt, Sass, PHP, MySQL, WordPress, JavaScript, CSS, HTML, jQuery, Responsive UI, HTML5, SCSS, APIs, REST APIs, CSS3, Responsive Design
Web Developer
2012 - 2013
Agencia Sys
- Created testing procedures to verify the web app is ready for production.
- Improved the design of the interfaces by adding animations and more feedback to the user when interacting with the system.
- Assured that what developers deliver to the user is what the user is demanding from the platform by staying close to the final users of the platform.
Technologies: JavaScript, jQuery, PHP, Zend Framework, MySQL, CSS, HTML, APIs, REST APIs, CSS3, Responsive Design
Designer | Web Designer
2008 - 2011
Neviton Duarte
- Designed the company's portfolio that is presented to possible clients.
- Created the company's brand and visual communication language and everything else related to the company's image.
- Created and maintained the company's first website and blog.
Technologies: Adobe Photoshop, CSS, HTML, JavaScript, PHP, MySQL, CSS3
Project History
OpenSource | React Compose
https://github.com/diegoarcega/reactjs-composeReuse and compose your components following React's best practices.
Facebook is clear when recommending reusing components by composing components instead of using class inheritance. For that to happen, you will likely be creating some components that will enrich child components, either by passing data down via context API or by being a wrapper UI component that will work as a template or frame for the child components, such as a landing page that reuses the header and footer in different pages.
Facebook is clear when recommending reusing components by composing components instead of using class inheritance. For that to happen, you will likely be creating some components that will enrich child components, either by passing data down via context API or by being a wrapper UI component that will work as a template or frame for the child components, such as a landing page that reuses the header and footer in different pages.
OpenSource | Uniq Number
https://github.com/diegoarcega/uniq-numberGenerate unique numbers with JavaScript generators. Developed this tool that simplifies the creation of numbers in sequence and also enables starting the generation of numbers from a certain number onward.
Android React Native APP | Global Wallet
This was a personal project. Global Wallet can manage many different currencies, and it shows the current quote for that currency compared to your default currency (BRL). It also shows the total value you have in all your international wallets combined, converted to the default currency.
Track Deliveries
As the lead developer for this project, I've built a view for tracking deliveries in real time. This product is customer-facing and should work for both desktop and mobile. This web application shows a map, the order delivery status updates, the driver's position on the map, and other elements on the screen, showing the user status of the delivery.
Electronic Catalog
An AngularJS web application that shows a catalog of products the industry can have. This web application is used by Tupy, Brazil's multinational foundry company, a global leader in the cast-iron engine blocks that heads for the automotive industry.
Education
2014 - 2015
Bachelor's Degree (Coursework) in Internet Computing
University of Liverpool - Liverpool, United Kingdom
2012 - 2015
Bachelor's Degree in Systems for the Internet
Unisociesc - Joinville, Brazil
Certifications
DECEMBER 2012 - DECEMBER 2015
International English Language Testing System (IELTS)
British Council
Skills
Libraries/APIs
React, Lodash, React Router, REST APIs, React Testing Library, Context API, React Query, jQuery, Highcharts, Socket.IO, Immutable.js, Apollo Client, react-spring, Node.js
Tools
Git, Adobe Photoshop, Grunt, Webpack, Prettier, GitLab, GitLab CI/CD, Twilio Programmable Video, GitHub, Front-end Build Tools
Languages
JavaScript, HTML, CSS, Sass, HTML5, CSS3, PHP, GraphQL, TypeScript, SCSS
Frameworks
Redux, Jest, Cypress, AngularJS, Zend Framework, Bootstrap, Material UI, NestJS, React Native, Next.js
Paradigms
Refactoring
Platforms
WordPress, Twilio, Linux
Storage
Databases, MySQL
Other
Responsive UI, Responsive Design, English, Code Splitting, APIs, Enzyme, ESLint, Styled-components, Code Review, Performance Optimization, Web UX, Design, Storybook, WebSockets, React Hooks, Semantic UI, GitHub Actions, English-Portuguese Translation, Minimum Viable Product (MVP), Source Code Review, Single-page Applications (SPAs), Front-end Architecture, Front-end Development, Front-end, Front-end Design, Application State Management
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