Leonso Medina
Verified Expert in Engineering
Full-stack Developer
Zapopan, Mexico
Toptal member since November 9, 2020
Leo is a full-stack developer with a strong emphasis on the back end and DevOps. He has over five years of experience learning cutting-edge technologies while building great products. He tried different paths along his journey and found himself in the mastery of modern full-stack web app development. As an adept developer, Leo has created great products using SPA, microservices, cloud native computing, OAuth, A/B testing, E2E tests, observability, monitoring, and alerting.
Portfolio
Experience
- JavaScript - 10 years
- React - 7 years
- Node.js - 7 years
- Amazon Web Services (AWS) - 6 years
- TypeScript - 5 years
- MongoDB - 5 years
- GraphQL - 3 years
- Next.js - 3 years
Availability
Preferred Environment
Zoom, Miro, Office 365, Visual Studio Code (VS Code), GraphQL, GitHub, Jira, Slack, MacOS
The most amazing...
...CI/CD pipeline I've worked on deployed on-demand releases for a large corporation made up of hundreds of services and apps.
Work Experience
Front-end Engineer
Netflix
- Developed an analytics dashboard app to measure the performance of title lists (movies and shows).
- Started the research and development of an analytics dashboard app to measure the performance impact of different languages on titles of movies and shows.
- Initiated an effort to document the lifecycle of apps in terms of design and architecture changes. This aids the team by providing the necessary context for the decisions made during the app's lifetime.
Senior Software Engineer
Coastline Academy
- Led the migration from a CSR React app using Firebase and Redux to an SSR Next.js app on Vercel using Apollo GraphQL.
- Refactored the platform architecture to introduce Event Sourcing to manage the state for purchases, credits, and reservations, effectively improving data integrity.
- Led a small team of three entry-level developers. My responsibilities included coaching, code reviewing, architectural decisions, and unblocking team members.
Senior Front-end Developer
Yana
- Fixed Facebook login integration bugs on a React Native app.
- Integrated error reporting to a React Native app with Sentry and established on-call schedules and responsibilities for team members.
- Added a feature flag integration to a React Native app, allowing the team to decouple feature releases from development.
Senior Front-end Developer
Luxoft
- Built a microservice to manage entities related to booking reservations. The service was configured in a CI/CD pipeline and fully tested, launching a new feature on the company dashboard.
- Created a GraphQL module in Node.js with Apollo Server to centralize actions with orchestration from different microservices. This allowed several projects to reuse the module and reduce development time.
- Developed a GraphQL back-end integration for a React Native mobile app for Android and iOS, allowing hosts to request reviews from travelers.
- Improved the photo upload process, reducing users' average upload time by 300% and lessening the project's code complexity.
- Built an internal CLI tool to automate the development team's tasks, allowing them to centralize and automate flows, as well as aid in the new members' onboarding process.
- Developed a Kafka integration in a Node.js app, consuming a topic that published messages when users signed up to the platform. The users were enrolled in a segmentation group for a future app version.
- Contributed to the migration of a legacy Java app to a Next.js app.
- Designated a code reviewer to help coach the organization on the new tech stack.
- Assigned an interviewer for new developer positions in the organization.
Full-stack Developer
Orderhero
- Led the migration of an app to a modern React stack, enabling online food ordering.
- Migrated a MongoDB replica set from a custom self-maintained AWS EC2 setup to a fully managed cloud solution. This increased the database's reliability and allowed the team to focus on development instead of database administration tasks.
- Improved a Node.js app's deployment strategy by migrating to a containerized cloud deployment with AWS ECS. This helped effectively scale the deployment and reduce costs.
- Added a CI/CD pipeline to several apps to automate cloud deployments, allowing the team to release on demand and incrementing their delivery speed.
- Built an integration to accept credit card payments from several merchant account providers. Payments were associated with online orders and enabled refund and void operations. This allowed the company to release an MVP to production.
- Developed an integration to submit ACH payments to bank accounts. Payments were associated with restaurant billing statements and supported cancel and retry operations. This allowed the company to adopt a commission-based business model.
- Created a custom IVR or phone call flow for restaurants, encouraging customers on hold to order online instead of via phone.
- Built a reporting dashboard to track internal KPI metrics.
Full-stack Developer
Tap to Eat Inc.
- Assisted in developing a highly available, scalable, and distributed web application that provides the platform with a RESTful API and gives thousands of clients access to the API through web and mobile apps. Used Node.js, MongoDB, NGINX, and AWS.
- Added global time zone support to an API, fixing critical bugs.
- Resolved a critical bug in the app's payment checkout flow, helping users continue with the checkout process and payment submission.
- Migrated a MongoDB replica set to a new major version, including code refactoring for the API and keeping the service updated with security fixes and new features.
- Led the development of a web app's major features, including creating custom IVRs for telephone systems that connect to a FreePBX server. This product replaced a third-party provider and allowed the company to save thousands of dollars per month.
- Migrated an outdated Express app (API) to the latest dependencies. This included code refactoring for major breaking releases and updating the service with new features from the tech stack.
Full-stack Developer
Ripe Media
- Assisted the team in developing a static website for the University of Southern California within four weeks.
- Developed a custom dashboard for monthly employee work tracking reports. This allowed project managers to communicate more efficiently with clients during status meetings.
- Created a video streaming cache feature for an Android app, reducing the number of network resources consumed by users.
- Fixed critical bugs on a hybrid Cordova mobile app, unblocking the release to production within the expected timeframe.
- Updated a custom CMS plugin to support a use case that was not provided by the original version; my work reduced the team's development time.
- Developed a web app for kids to help them acquire reading habits.
Experience
Netflix Title Performance Dashboard
https://www.netflix.com/Orderhero – Online Food Ordering
https://app.orderhero.us/mammothThe app auths an authentication layer based on email password combination, as well as an authorization layer based on phone number confirmation. The payment gateway integration was via service API, product catalog discovery, and order placement. The app mainly consisted of a product catalog section, a shopping cart section, a checkout flow, and several account pages, such as order history, profile settings, and payment methods.
The UI/UX designer provided Figma files, and the whole team was involved in recurrent sessions with the stakeholder and designer to provide feedback and ideas for features in the app.
Rapify Library
https://github.com/leonsomed/rapifyMobile Game for Android
Orderhero API
I added role-based authorization to the API, since the original creators did not add a security layer. I approached this by introducing a configuration file for API endpoints that described the behavior of the API in a declarative way. In a way, implementing an Open API spec was a naive approach.
The API was created with a hard dependency on crane.js, which was no longer maintained after the employees left the company. I led the effort to set the dependence on crane.js in favor of express.js.
Orderhero Restaurant Admin Panel
The panel allows store owners and Orderhero employees to manage all business aspects, including the store product catalog, prices, open hours, delivery settings, etc.
Orderhero – Static Site V2
Orderhero IVR Telnyx integrations
The integration uses Telnyx (a telecom company), similar to Twilio, but cheaper. They offer a Call Control API that works via webhooks messages to receive real-time events about the lifecycle of the call while allowing them to control its behavior via their all Control API. The implementation was done in a Node.js service. The architecture of that module was to create an abstract class to represent the lifecycle of a call via its methods. Behind the scenes, there was a manager module that routed events to the respective methods for each class instance.
Orderhero Notifications Systems, SMS, Email, & Fax
The implementation consisted of a background job running on a short interval to get the status of the in-flight notifications and adding the status to the database under the entity notification receipt. We scheduled a new notification when a failure was detected, but only if the failure reason allowed a retry.
For example, an email bounce due to email address not found will not be retried, but it will be retired if the notificationfailsd due to a network error.
Orderhero Comission Business Model
I worked with stakeholders to understand the business goals and derive their requirements. After a few sessions, I created and shared a couple of approved UI wireframes and process diagrams with the team. The design created high-fidelity UI designs, and we devised a plan to work as a team to deliver the back-end and front-end work.
Each of the following features was crucial for the delivery of the new business model:
• Pricing schemes: A data structure that describes the behavior of the pricing model.
• Pricing packages: A set of pre-defined pricing schemes to be reused.
• Payout profiles: A data structure to define where to send store payouts and the schedule.
• Payout events: A data structure that uses the current payout profile of the store to describe a single payout event for all orders on a data range.
• Card Payment gateway: A new payment gateway provider to process credit card transactions for all orders under the new business model.
Orderhero Containerization of Services in AWS ECS
Costs and complexity started to increase since the work was manual. I decided to approach a container-based architecture to allow us to reuse instances while using their full capacity and enable us to set up horizontally scalable policies.
For that, I decided to use AWS ECS. This managed container service relies on task and service definitions that need to be configured once. It allows updating the underlying container image as new versions need to be deployed.
Since ECS uses a pool of automatically scaled instances, the number of instances was reduced significantly since the capacity utilization for each was optimized by the ECS clients.
Expedia Group Welcome Guide App
Expedia Group Image Uploader
Then, we registered webhook listeners provided by AWS to be notified of the uploads, process the image, make it available in the different variants we need, and push an event to notify consumers that the image is ready.
Expedia Group App Migration with Kafka
We wanted to roll it out to all new users first, and then introduce it to users who were Vrbo employees for internal testing, and finally to all existing users of the Legacy app.
To accomplish this, we used Launch Darkly to set up a feature flag that would determine which version of the app they will see, legacy or new.
One of the tricky parts was to determine which users were new versus existing. The way I approached this was to register a Kafka consumer client on our Node.js app to read new user registration events and add those user IDs to the corresponding segmentation group. This required lots of research within the company and reaching out to external teams.
Expedia Group Micro-service Reservation Access Instructions
I created a Node.js service with Happi.js to take advantage of the company's rich internal tooling and plugin systems. The service was a simple CRUD API for access instructions, with an auth layer to ensure proper access only by property owners or users who booked the reservation.
I also created a GraphQL module to abstract consuming the service and provided an abstraction to fetch global and reservation-level access instructions. This allowed all sorts of apps to consume the module via the standard GraphQL clients used across the company. This module used an internal technique called partials that essentially were composable GraphQL modules that could be imported and mounted on servers for different teams.
I know the approach differs from the single graph Apollo Server recommends, but this is due to the internal partial standard within the company.
Expedia Group Reviews
The main feature of that app was to rewrite queries to support several filters for both the web app and the upcoming mobile apps. Filtering by unrated reservations, rated reservations, star rating, text versus star rating, etc. All those features were new, so I was in charge of writing GraphQL queries capable of returning those results. I demoed the new app on our QBR.
Expedia Group React Native Reviews Mobile Apps
The core mobile team maintained the app in Java but allowed external teams to add new screens by mounting a React Native app instead of having to implement the whole screen in Java. There was an entire build pipeline to ensure the React Native app was built and compatible with being mounted in the host app. Therefore, I was in charge of setting up the app and hooking up the Android code to open the React Native app.
Care.com Childcare Booking Flow
https://www.care.com/The app was a standalone micro-frontend, which allowed us to deploy in quick cycles and avoid the slow process of the monolith app that hosted all the products in the company.
The new app consumed a GraphQL Apollo service that provided all the data and operations for the app. The app was built with Next.js using TypeScript. The state management was handled with React Context API and apollo client. Notable library mentions include day.js for data management, apollo CodeGen to create type definitions for all GraphQL operations, and Formik to handle forms in React.
To integrate experimentation, the app made use heavy use of Launch Darkly. We used it for both feature flagging and for orchestrating A/B tests. The feature flagging integration allowed us to decouple feature releases from deployment cycles. The A/B test integration allowed us to orchestrate experiments by segregating users into groups and providing them with variations of the app specifically for the experiment.
Coastline Academy Web App
https://coastlineacademy.com/I developed all the missing features to reach feature parity with the legacy system. I was also charged with integrating new features, such as introducing a new product system, an updated purchase log system, and introducing support for new observation lesson types.
Care.com – Day care leads flow
https://www.care.com/This integration required consuming an API service that managed and provided external day care centers available given the user constraints, such as location, budget, age of the child, and other special requirements.
Care.com Pricing Flow
https://www.care.com/This project had similar requirements to the initial child care flow project. We needed to migrate it to a new tech stack for faster product iteration and experimentation. I created a new micro-frontend app to decouple it from the existing monolith and followed the same practices as in the other projects. The main change was that we needed to integrate with the monolith experimentation framework instead of Launch Darkly.
This required us to introduce new modules to sync the state of experiments in Launch Darkly for all the other micro-frontend apps to the state in the experimentation framework in the monolith. This was the most challenging aspect of the project since it required me to contribute changes to the monolith, which was hard to develop and test.
Forage Platform API
https://shopforage-next-xybkj744iq-uc.a.run.app/The server is connected to a MySQL database in Google Cloud. The front-end was only a set of prototypes, and I was delivered a modern app to replace the prototypes. I decided to make this service an API only and start a new project for the front-end app.
The platform allows customers to place orders from multiple vendors, enabling each vendor to accept or reject the order before the customer is charged. This required an asynchronous process to wait until all vendors had responded to the order request and allowed the user to determine whether they wanted to continue with the order. A single order can result in a payment distribution between multiple vendors. For example, vendor A gets paid for a bread bag, and vendor B gets born for organic cheese. The user only gets charged once. This integration was achieved using the Stripe Connect API to distribute payments between multiple accounts.
Forage Admin Panel & Customer Web App
https://shopforage-next-xybkj744iq-uc.a.run.app/The web app is a Next.js app using TypeScript and CSS modules. It used Apollo Client to consume the Platform API, and I used CodeGen to create type-safe operations on the client side.
BookMage Web API
https://bookmage.com/Image Service
The API features an image service to manage all aspects of image management. It uses Google Cloud Storage to host all image data and uses pre-signed URLs to enable fast uploads, resulting in low traffic to our services. The API offers image variants and discovery to avoid storing full URLs within the database. Instead, table relationships simply store the image ID and can use a client-side or server-side SDK to resolve the full URL based on the variant of the image. The service relies on Storage Pub/Sub notifications to process images and create variants, as well as to populate the DB Image table with the results.
Account verification via Twitter API
The site offers a feature to verify authors are who they claim to be. It does this by asking authors to publish a tweet with a special message only known to the other, and the API schedules a task on Google Cloud Task to verify that the Twitter account does publish the tweet. This implementation supports a retry mechanism built-into Cloud Task.
BookMage Admin Panel and User Facing Web App
https://bookmage.com/Yana React Native App
https://play.google.com/store/apps/details?id=com.yanaapp&hl=es&gl=USI introduced feature flags to allow the team to decouple deployments from feature releases. This was especially useful because iOS and Android deployments are under the control of the individual store reviewers. This allowed the team to ship changes faster without syncing deliveries across platforms.
I introduced a fix to the Facebook login integration, which contained several bugs that did not validate all the documented edge cases.
I also integrated error reporting to a React Native app with Sentry and established on-call schedules and responsibilities for team members.
Storyline Online
https://www.storylineonline.net/School Management System
Administrators can create new classes in the admin area, edit existing classes, add students to classes, and remove students.
I was a full-stack developer in this project, and I developed it to help my university in the student enrollment process.
Booking Admin Dashboard
Education
Bachelor's Degree (Partially Completed) in Computer Science
Tijuana Institute of Technology - Tijuana, BC, Mexico
Skills
Libraries/APIs
Node.js, React, API Development, REST APIs, jQuery, Chai, Stripe, Web3.js, Socket.IO, Moment.js, Puppeteer, OpenAPI, Apollo Client, Stripe API, X (formerly Twitter) API
Tools
Slack, GitHub, Webpack, Mongoose, Jira, Babel, React Apollo, Amazon CloudFront CDN, Mocha, Sentry, PostCSS, Miro, Zoom, NGINX, Optimizely, Figma, Amazon Simple Email Service (SES), AWS ELB, Amazon Elastic Container Service (ECS), Apache Avro, LaunchDarkly, Mailchimp, Kibana, Prisma, FreePBX
Languages
JavaScript, CSS, HTML, ECMAScript (ES6), Less, GraphQL, Sass, HTML5, TypeScript, SQL, PHP, Python 3, C#, Java 8, Java, Python
Frameworks
Express.js, Redux, Next.js, React Native, Jest, JSON Web Tokens (JWT), Material UI, Flux, tRPC, Bootstrap, LibGDX, Cypress, Hapi.js, Yarn, Tailwind CSS, Swagger, Jakarta Server Pages (JSP), Loopback
Platforms
MacOS, Web, Visual Studio Code (VS Code), Amazon Web Services (AWS), Android, iOS, Docker, Apache Kafka, WordPress, Firebase, Mapbox, Salesforce, Cloud Run, Vercel, Google Cloud Platform (GCP)
Paradigms
Continuous Integration (CI), Continuous Delivery (CD), Agile, DevOps, Modular CSS, Microservices
Storage
MongoDB, NoSQL, Redis, MySQL, Google Cloud, Druid.io, PostgreSQL, Amazon S3 (AWS S3), Amazon Simple Workflow Service (SWF), Elasticsearch, Google Cloud SQL, Google Cloud Storage
Other
Full-stack, Front-end, Web Development, Back-end, Apollo Server, ESLint, MERN Stack, eCommerce, APIs, Office 365, Payment APIs, Web Programming, Game Development, Styled-components, CI/CD Pipelines, Lambda Functions, Storybook, Data Visualization, Forte REST API, Payeezy, Background Jobs, Cloud Tasks, Cloud Storage, Vite, Monorepos
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
Share your needs
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring