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.
Created a full working startup project with the team team of 4 developers, enhancing productivity by implementing modular workflows and a clear development strategy.
Tech stack added to the project:
Next.js (Vercel deployments) for scalable frontend solutions.
Firebase ecosystem, incorporating:
Firestore for a dynamic database with real-time subscriptions, enabling responsive chat features.
Cloud Functions with hooks to seamlessly update coach and program reviews.
Firebase Authentication with social login support for simplified user onboarding.
NX multi-repo for structured code modularity and improved library reuse.
React Query for efficient data fetching and state management.
Tailwind CSS for streamlined UI design.
Dyte for seamless online video meeting integration.
Stripe for payments
Established robust CI/CD pipelines using GitLab, incorporating Cypress integration tests executed during deployment on Vercel, ensuring reliability and minimizing regressions.
Spearheaded the development of three flagship applications critical to Hatchpath's success:
Marketplace: Empowered coaches to sell programs and workshops with integrated video calling capabilities.
Admin Panel: Provided the CEO and marketing team with tools to analyze data, curate content, and manage user interactions effectively.
Corporate Portal: Enabled NGOs and corporations to register employees and provide tailored programs to address individual needs.
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.
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.
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).
React
Node.jsProgressive Web Applications (PWA)
MochaSinon.JS
GherkinReact NativeExpress.js
CSS3 Animation
JavaScriptHTMLFront-end
Front-end Architecture
Full-stack
WebSockets
User Experience (UX)
User Interface (UI)
Synctera
Front-end Tech Lead
Present (2025 years)
, Remote
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.
Next.jsReact
SQL Server Reporting Services (SSRS)
CloudFlareOpenAPI
CSS3 Animation
JavaScriptHTMLFront-end
Full-stack
User Experience (UX)
User Interface (UI)
Rindus (Douglas SL)
Senior Front-end Developer
Present (2025 years)
, Remote
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.
SASSSagasReduxReact
Pixel Perfect
CSS3 Animation
JavaScriptHTMLFront-end
User Experience (UX)
User Interface (UI)
Slideshop
Remote Senior Front-end Developer
Present (2025 years)
, Remote
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.
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-d11d07579d8aI wanted to create custom keyboards to delete the messages and use web assembly to generate a single file in the client.
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 Laravel2nd version: Laravel and Angular 1.53rd version: Angular 2.04th version: Angular 2.0 without a back end in React5th version: React, Redux, and Sagas 6th version: No npm vanilla JavaScript with Lit web components and PWAUsing:• Custom pub/sub store• Custom router• Service workers• Cache to work offline• IndexDB for local storage• Serverless firebase functions• Web components with LitElements
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.
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.
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.
Education
Higher National Diploma (HND) in Web App Development
