Francisco Gutiérrez Sarazá, Developer in Málaga, Spain
Francisco is available for hire
Hire Francisco

Francisco Gutiérrez Sarazá

Verified Expert  in Engineering

Software Developer

Location
Málaga, Spain
Toptal Member Since
February 7, 2020

Francisco started developing more than 20 years ago, working primarily as a full-stack developer. About five years back, he chose to focus on front-end development. He is a JavaScript evangelist comfortable with Node.js. Francisco shines in creating UX solutions and loves learning new technologies, expanding his capabilities, and sharing his knowledge and experience with colleagues.

Web DevelopmentFront-endUser Interface (UI)CSS3 AnimationFull-stackWeb UsabilityCSSJavaScriptJavaScript 6SassHTML5Unit TestingTypeScriptAgileReactPreact

Portfolio

Hatchpath
Next.js, Firebase, Cloud Firestore, Google Cloud Functions, Tailwind CSS, Redux...
Colgate-Palmolive - Main
React, NX Monorepo, Mock Service Worker (MSW), Cypress, Material UI, Three.js...
MURAL
React, Node.js, Progressive Web Applications (PWA), Mocha, Sinon.JS, Gherkin...

Experience

JavaScript 6 - 10 yearsReact - 8 yearsNode.js - 6 yearsNext.js - 3 yearsLerna - 2 yearsVue 2 - 1 year

Availability

Full-time

Preferred Environment

Git, Node.js, NPM, Bash, Unix, Visual Studio Code (VS Code), Windows Subsystem for Linux (WSL)

The most amazing...

...thing I've done was to mentor developers to continue coding despite difficulties and to remain enthusiastic about what they can achieve.

Work Experience

Technical Lead

2023 - PRESENT
Hatchpath
  • Optimized Firestore collections, migrated data, and created Cloud Functions for better customer engagement.
  • Refactored code for increased maintainability and reusability.
  • Enhanced user experience and reduced costs through the integration of React Query.
  • Mentored three developers in best practices through code reviews.
  • Transitioned the entire project to NX for cohesive development.
Technologies: Next.js, Firebase, Cloud Firestore, Google Cloud Functions, Tailwind CSS, Redux, React Query, APIs, REST, Progressive Web Applications (PWA), GitLab, Responsive Web Apps, Stripe, Figma, Redux Toolkit, PostgreSQL, Web Development, Web Usability, Unit Testing, Context API, Front-end Development

Full-stack Developer

2022 - 2023
Colgate-Palmolive - Main
  • Built the entire front-end architecture from scratch using Nx, resulting in a robust and scalable TypeScript/React application with multiple libraries.
  • Created extensive documentation for the working environment and development process, facilitating smooth onboarding and collaboration among team members.
  • Developed a 3D interactive jaw map using Three.js, allowing for the seamless rendering of 3D images and enhancing the user experience.
  • Built a Node.js microservice using Puppeteer for PDF rendering, ensuring seamless integration between the front-end and back-end systems.
  • Utilized "Mock Service Worker" to emulate the back end, enabling independent front-end development and smooth integration with the back end, effectively preventing bottlenecks in the development process.
  • Automated generation of types, fetchers, and example data using the OpenAPI definition from Django, safeguarding against compile-time type errors in the front end when back-end changes occur.
Technologies: React, NX Monorepo, Mock Service Worker (MSW), Cypress, Material UI, Three.js, Puppeteer, Microservices, Okta, Gigya, OpenAPI, TypeScript, CSS3 Animation, JavaScript, HTML, Front-end, Front-end Architecture, Full-stack, User Experience (UX), User Interface (UI), Next.js, GitHub, APIs, REST, Animation, Progressive Web Applications (PWA), Responsive Web Apps, Figma, Web Development, Unit Testing, Context API, Front-end Development

Full-stack Technical Lead

2022 - 2022
MURAL
  • Led a team to turn a legacy windows app into a PWA (after studying other solutions, such as React Native for Windows). The main target was to share a "Mural" with a big screen device (as Surface Hub mainly) without introducing sign-in data.
  • Developed the back end in Express.js for the custom endpoint. Also achieved with proper Gherkin tests.
  • Refactored the front end with POC and removed legacy libraries such as React Router/Redux, helping Mural to deliver more with less effort.
  • Developed the front-end unit (Mocha, Sinon.JS, and React Testing Library) and integration tests (Mocha, Sinon.JS, and Gherkin).
Technologies: React, Node.js, Progressive Web Applications (PWA), Mocha, Sinon.JS, Gherkin, React Native, Express.js, CSS3 Animation, JavaScript, HTML, Front-end, Front-end Architecture, Full-stack, WebSockets, User Experience (UX), User Interface (UI), GitHub, APIs, REST, Responsive Web Apps, Stripe, Figma, Docker, Redux Toolkit, Web Development, Web Usability, Unit Testing, Context API, Front-end Development

Front-end Tech Lead

2021 - 2022
Colgate-Palmolive
  • Shrank the JavaScript bundle from 10 MB to 5 MB using code-splitting, lazy loading, removing dead code, updating, and removing obsolete libraries.
  • Created integration tests from the ground (more than 15) using Mock Service Worker and Cypress. Included them in the CI using GitHub Actions.
  • Removed all the useless URL redirections and created descriptive and idempotent ones.
  • Eased multi-environment (Windows, Linux, and Mac) development for my workmates.
  • Implemented self-formatting Git hooks using Husky, Prettier, and ESLint. Also cleared 500 console errors/warnings in existing code, obfuscating the introduced errors.
  • Mentored back-end developers and junior coders to improve their skills in the front end in areas like modern JavaScript, Cypress test creations, and readable code.
  • Created a code style guide for the front-end development and the main documents in the repository to set up the environment, run all the scripts, and develop integration tests.
Technologies: React, Redux, Cypress, Create React App, React Router, CSS3 Animation, JavaScript, HTML, Front-end, Full-stack, User Experience (UX), User Interface (UI), GitHub, APIs, REST, Responsive Web Apps, Figma, Docker, Redux Toolkit, Web Development, Unit Testing, Context API, Front-end Development

Front-end Tech Lead

2021 - 2021
Synctera
  • Developed the documentation site using Next.js, with support for markdown with Mermaid code and OpenAPI documentation supported with ReDoc.
  • Built a completely static site using Next.js with a static sitemap generator and WebP images stored in Cloudflare via Wrangler.
  • Delivered these two sites within a three-month timespan as the team was learning Next.js, TypeScript, Tailwind, and all the particular requirements from the company.
Technologies: Next.js, React, SQL Server Reporting Services (SSRS), Cloudflare, OpenAPI, CSS3 Animation, JavaScript, HTML, Front-end, Full-stack, User Experience (UX), User Interface (UI), GitHub, APIs, REST, Responsive Web Apps, Figma, Redux Toolkit, Web Development, Web Usability, Unit Testing, Context API, Front-end Development

Front-end Team Leader

2019 - 2021
Gaming Innovation Group
  • Refactored an existing casino in Preact to React and made a complete map of resources to make it easy to onboard their developers, improving the SEO.
  • Used Vue, Vuex, and web components to create state-of-the-art new brand casinos.
  • Refactored another online casino with Vue and web components.
Technologies: Web Components, Vuex, React, Vue, Preact, Pixel Perfect, CSS3 Animation, JavaScript, HTML, Front-end, WebSockets, MongoDB, User Experience (UX), User Interface (UI), REST, Animation, Responsive Web Apps, Stripe, Figma, Redux Toolkit, Web Development, Unit Testing, Context API, Front-end Development

Front-end Team Leader

2018 - 2019
William Hill
  • Promoted and created a monorepository toolchain using Lerna.
  • Developed performance tests for components using Puppeteer and headless Chrome.
  • Integrated a selector-sharing system for the entire app, that can be used by UIs and QAs for testing.
Technologies: Redux, Lerna, React, Storybook, Puppeteer, CSS3 Animation, JavaScript, HTML, Front-end, WebSockets, User Experience (UX), User Interface (UI), GitHub, APIs, REST, Animation, GitLab, Responsive Web Apps, Figma, Redux Toolkit, Web Development, Web Usability, Context API, Front-end Development

Senior Front-end Developer

2017 - 2018
Addison Global
  • Developed native apps in Android and iOS using React Native.
  • Shared my knowledge about good patterns using styled components.
  • Used Redux, sagas, the NativeBase library, and overall Lerna mono repository administration.
Technologies: iOS, Android, Styled-components, React Native, Storybook, CSS3 Animation, JavaScript, HTML, Front-end, WebSockets, User Experience (UX), User Interface (UI), GitHub, APIs, REST, Responsive Web Apps, Figma, Web Development, Front-end Development

Senior Front-end Developer

2017 - 2017
Rindus (Douglas SL)
  • Served as the front-end technical lead in Spain for Rindus and Douglas.
  • Created three practice communities to teach the benefits of Redux and sagas.
  • Refactored the front-end UI's old patterns related to CSS.
Technologies: Sass, Sagas, Redux, React, Pixel Perfect, CSS3 Animation, JavaScript, HTML, Front-end, User Experience (UX), User Interface (UI), REST, Responsive Web Apps, PostgreSQL, Web Development, Front-end Development

Senior Front-end Lead

2016 - 2017
Ingenia SA (Swissquote)
  • Took charge of the front-end responsibilities turning a Flash/Flex application into a microservice HTML5 based one.
  • Mentored two junior front-end developers on React and TypeScript.
  • Developed a modular component system using (back then) new technologies like Webpack, PostCSS, TypeScript, React and Redux.
Technologies: Redux, PostCSS, BEM, React, TypeScript, CSS3 Animation, JavaScript, HTML, Front-end, User Experience (UX), User Interface (UI), REST, Responsive Web Apps, PostgreSQL, Web Development, Front-end Development

Remote Senior Front-end Developer

2016 - 2016
Slideshop
  • Created a few components using the best patterns in CSS with BEM.
  • Implemented a ducks module pattern for Redux, storing the reducer aside with the actions.
  • Properly used sagas for asynchronous actions and to avoid rerendering.
Technologies: Sagas, Redux, JavaScript, React, CSS3 Animation, HTML, Front-end, User Experience (UX), User Interface (UI), Responsive Web Apps, Web Development, Front-end Development

Senior Full-stack Web Developer

2013 - 2016
CLC World Resorts & Hotels
  • Developed complete WordPress sites with custom themes/add-ons.
  • Transformed a top sales presentation tool from Flash to HTML5 using Angular, Reveal.js, and so on.
  • Built a few small landing pages using Laravel in PHP for mailing purposes.
Technologies: WordPress, CSS, PHP, HTML5, JavaScript, SQL, CSS3 Animation, Front-end, User Experience (UX), User Interface (UI), Web Development, Front-end Development

Full-stack Developer

2011 - 2012
Atlas Informática SL
  • Developed Atlas' complete sub-brand sites based on Joomla sites with custom templates and multiple languages: Ozonegaming.com and Nox-xtreme.com.
  • Managed and created a plugin to export to Excel catalogs on the main application (Magento).
  • Synced a new brand "Versus Gaming" catalog with an Amazon shop.
Technologies: Microsoft SQL Server, PHP, Magento, Joomla, SQL, CSS3 Animation, JavaScript, Front-end, User Experience (UX), User Interface (UI), Web Development, Front-end Development

IT and Full-stack Developer

2006 - 2011
Asociación de Editores Andaluces (AEA)
  • Converted a static single-page website into a multiple-language supported site, Aea.es, using Joomla custom components.
  • Built the site and provided the full support for more than 70 editorials.
  • Installed new computers, printers, and a Linux operating system, saving the organization the cost of paying for licenses.
Technologies: Hardware, Joomla, PHP, SQL, CSS3 Animation, JavaScript, Front-end, User Interface (UI), Web Development, Front-end Development

Front-end UI Developer

2010 - 2010
Movistar
  • Launched a new eBook shop for the most important phone provider in the country.
  • Created jQuery plugins to fit the requirements from the client (Ajax functions included).
  • Implemented CSS3 new properties used with media queries and HTML5 new tags and accessibility in the whole site.
Technologies: CSS3, HTML5, jQuery, CSS3 Animation, JavaScript, Front-end, User Interface (UI), Web Development, Front-end Development

The Bait Bot

https://t.me/thebait_bot
Created this tool to use with my friend to make a podcast called Asynchronous Debates.

It registers the voice message duration and author (with alias) and generates different types of information.

FEATURES
• Duration script with a pie chart along with participation data.
• Script with every member intervention and a subtitle SRT generator.
• Ability to delete and reorder messages.

I also built a website in React to download all the media files in one zip (it is client-generated, so no processing is required for this). The bot uses Firebase functions and Firebase. I also wrote a Medium article about how to do this: medium.com/@pikilon/serverless-telegram-bot-with-firebase-d11d07579d8a

I wanted to create custom keyboards to delete the messages and use web assembly to generate a single file in the client.

Bideolist

https://pikilon.github.io/bideolist/
My sandbox to test and master new libraries and create a list of videos from multiple services. The site has undergone several iterations and improvements.

1st version: jQuery and Laravel
2nd version: Laravel and Angular 1.5
3rd version: Angular 2.0
4th version: Angular 2.0 without a back end in React
5th version: React, Redux, and Sagas
6th version: No npm vanilla JavaScript with Lit web components and PWA

Using:
• Custom pub/sub store
• Custom router
• Service workers
• Cache to work offline
• IndexDB for local storage
• Serverless firebase functions
• Web components with LitElements

Cra JSON Sass Package

I created this small package to import JSON to be used into a Create React app application without any ejections. The main target was to use this for selectors so you can safely map them for QA, SCSS, and JavaScript components.

SlingFast

https://slingfast.com/
I developed this WordPress site with a custom template for SlingFast (a dirtbike company). I advised the company to sell their products on Amazon instead of a custom shop because it's difficult for a new brand to generate confidence.

Bunquer

http://www.bunquer.com
From 2007 to 2016, I worked as a freelancer in conjunction with Juan Luis Molina (a designer) to make sites and videos. We developed state-of-the-art sites using eCommerce, Joomla, WordPress, PrestaShop, and so on while never using templates.
2014 - 2016

Higher National Diploma (HND) in Web App Development

IES Aguadulce - Almería, Spain

2004 - 2006

Higher National Diploma (HND) in Media Production

IES Angel de Saavedra - Córdoba, Spain

JUNE 2023 - PRESENT

Nextjs & React - The Complete Guide (incl. Two Paths ! )

Udemy

MAY 2023 - PRESENT

Python TOTAL - Programador Avanzado en 16 días (Advanced Programmer in 16 Days)

Udemy

MAY 2023 - PRESENT

AWS Curso Básico para desarrolladores web. (AWS Basic Course for Web Developers)

Udemy

Libraries/APIs

React, Context API, Node.js, Stripe, Preact, Vue, jQuery, Vue 2, Vuex, OpenAPI, React Router, LitElement, Sinon.JS, Puppeteer, Three.js, Gigya, React Query

Tools

GitHub, Redux Toolkit, Git, PWABuilder, Figma, GitLab, NPM, PostCSS, Lerna, Create React App, Mocha, Amazon CloudFront CDN

Frameworks

Redux, Next.js, Tailwind CSS, Material UI, React Native, AngularJS, Cypress, Vanilla JS, Express.js, Electron, Django

Languages

JavaScript, TypeScript, JavaScript 6, CSS, Sass, HTML5, HTML, PHP, Bash, CSS3, Gherkin, SQL, Python 3, Python

Paradigms

Unit Testing, Agile, Agile Software Development, Automated Testing, REST, BEM, Microservices, Testing

Storage

MySQL, MongoDB, PostgreSQL, Microsoft SQL Server, SQL Server Reporting Services (SSRS), Google Cloud, Amazon S3 (AWS S3), Cloud Firestore

Platforms

Firebase, WordPress, Joomla, Docker, Visual Studio Code (VS Code), Unix, Android, iOS, Magento, Google Cloud Platform (GCP), Amazon Web Services (AWS), Amazon EC2, AWS Elastic Beanstalk

Other

Pixel Perfect, User Interface (UI), Front-end, Web Applications, Full-stack, Technical Leadership, Leadership, CSS3 Animation, Responsive Web Apps, Web Development, Web Usability, Front-end Development, Progressive Web Applications (PWA), Storybook, APIs, User Experience (UX), Mobile Apps, Cloud, Architecture, Software Design, Startups, Front-end Architecture, CI/CD Pipelines, OAuth, Single Sign-on (SSO), WebSockets, Sagas, Styled-components, Web Components, Hardware, Cloudflare, Telegram Bots, PWA, Windows Subsystem for Linux (WSL), NX Monorepo, Mock Service Worker (MSW), Okta, Amazon RDS, Google Cloud Functions, Animation

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