Luis Martinez Suarez, Developer in Roses, Spain
Luis is available for hire
Hire Luis

Luis Martinez Suarez

Verified Expert  in Engineering

Front-end Developer

Location
Roses, Spain
Toptal Member Since
August 10, 2022

Luis is a highly skilled front-end developer with four years of experience in front-end frameworks in the React and Vue ecosystems. He is passionate about crafting clean, well-structured code that adheres to the best practices, ensuring code reviewers can easily understand it. Luis is committed to staying up to date with industry developments and is continuously honing his skills.

Portfolio

Rolfs Flyg- & Bussresor Aktiebolag
Vue, Nuxt.js, JavaScript, Front-end, CSS, Travel, Booking Systems...
Notarize Inc - Mobile Applications
HTML5, CSS, JavaScript, React, Accessibility, WCAG 2, Selenium, UI Testing...
Passionate People
Nuxt.js, Tailwind CSS, Storybook, Node.js, Storyblok...

Experience

Availability

Part-time

Preferred Environment

React, Next.js, Firebase, Visual Studio Code (VS Code), Tailwind CSS, Mantine, Vite, Front-end Development, ECMAScript (ES6)

The most amazing...

...thing I've developed is a component library that allows non-technical content creators to create and edit landing pages using Storyblok CMS.

Work Experience

Front-end Developer

2023 - 2023
Rolfs Flyg- & Bussresor Aktiebolag
  • Streamlined the front-end Nuxt codebase, reducing component size and thus boosting the maintainability of the code.
  • Developed and instituted a best coding practices document, serving as the team's blueprint for consistent and efficient code development, thus leaving behind a more maintainable codebase.
  • Identified and rectified Vuex store misuses, transitioning inappropriate actions to getters using Vuex best practices.
  • Delivered key features, including an enhanced web search via region and campaign filters, more usable date range selection, and dynamic campaign pages, increasing site usability.
  • Expanded end-to-end testing coverage to the most critical use cases of the web search, significantly reducing bug occurrences and improving overall product quality and developer productivity.
  • Handled successfully the codebase ownership transition from a departing developer in two weeks, taking proactive ownership of the front-end code.
  • Helped onboard a new front-end developer by introducing him to the key aspects of the codebase and thoroughly reviewing his code.
  • Used Jira for task management and Slack for communication.
Technologies: Vue, Nuxt.js, JavaScript, Front-end, CSS, Travel, Booking Systems, User Interface (UI), User Experience (UX), TestCafe, APIs

Accessibility Developer

2022 - 2023
Notarize Inc - Mobile Applications
  • Improved the accessibility of a React app by identifying, prioritizing, and resolving issues, resulting in a fully accessible application with no reported issues in the final audit.
  • Completed the project successfully within the allocated time frame, meeting client needs and expectations.
  • Wrote clean and well-documented pull requests, resulting in efficient reviews and easier ticket resolution.
  • Communicated daily and effectively with the client, providing regular updates and addressing any concerns in a timely manner.
  • Identified additional accessibility issues proactively beyond the initial audit, ensuring a comprehensive resolution of all important issues.
Technologies: HTML5, CSS, JavaScript, React, Accessibility, WCAG 2, Selenium, UI Testing, TypeScript, RxJS, Sass, Jest, Front-end Development, ECMAScript (ES6), Testing, JavaScript Libraries, APIs

Front-end Developer

2021 - 2022
Passionate People
  • Maintained a Nuxt.js internal platform, using Nuxt.js 2, composition API, Tailwind CSS, Sanity, and Storybook as part of the tech stack, migrating the Options API components to Composition API, and refactoring and extending existing features.
  • Prepared the Nuxt.js-based platform for a live conference by manually testing the main user flows, finding and fixing bugs, and making small improvements to the site layout.
  • Maintained a back-end platform written in Node.js with a serverless infrastructure and integrated it with the Sanity client. Tested the existing endpoints manually and created new endpoints for reading and editing data from the database.
Technologies: Nuxt.js, Tailwind CSS, Storybook, Node.js, Storyblok, Visual Studio Code (VS Code), Vue, CSS, HTML, Vue 2, Vue 3, ESLint, Git, GitLab CI/CD, HTML DOM, HTML5, HTML4, CSS4, CSS3, NPM, JSON, Babel, YARN, Webpack 4, Lodash, Cloudflare, Linux, Ubuntu Linux, Ubuntu, UI Frameworks, Wireframing, Web UX, Flexbox, Slack, Remote Work, Sanity CMS, Front-end, Startups, UI Components, Content Management Systems (CMS), API Integration, Front-end Development, ECMAScript (ES6), JavaScript Libraries, UI Libraries, APIs

Front-end Developer

2020 - 2021
Jobsrepublic
  • Developed a Nuxt component library styled with Tailwind CSS from scratch and connected it to the Storyblok CMS. The product was used by content managers to create landing pages from scratch in a matter of days without the help of the development team.
  • Adapted components from the Tailwind UI template library to suit the design needs.
  • Audited every component of the UI in terms of accessibility, on-page technical SEO, and performance to achieve a high Lighthouse rank.
  • Obtained feedback from content managers to improve the CMS, updating existing components to include more features and releasing new components, following a weekly release cycle.
  • Performed basic operations on a PostgreSQL database, running simple queries to find and edit data.
  • Used Jira as a ticketing system and Slack as a communication tool.
Technologies: Nuxt.js, Visual Studio Code (VS Code), Vue, Tailwind CSS, Storyblok, Agile Software Development, CSS, HTML, Vue 2, Adobe Photoshop, Vue 3, PostgreSQL, ESLint, Git, GitLab CI/CD, HTML DOM, HTML5, HTML4, CSS4, CSS3, CSS Grid, NPM, Vuex, JSON, Babel, Bash, Vite, Lodash, Amazon S3 (AWS S3), Amazon Elastic Container Service (Amazon ECS), Amazon Route 53, Linux, Ubuntu Linux, Ubuntu, UI Frameworks, Web UX, Flexbox, Jira, Slack, Scrum, Remote Work, Front-end, Startups, UI Components, Content Management Systems (CMS), UI Design, API Integration, Front-end Development, ECMAScript (ES6), REST APIs, JavaScript Libraries, Responsive Layout, UI Libraries, APIs

Front-end Developer

2020 - 2020
Jobsrepublic
  • Maintained a multisite codebase built with Nuxt.js. Some of these sites were big portals with a large amount of traffic of up to 100,000 monthly visitors.
  • Evolved the codebase, adding new pages, implementing design changes, improving accessibility and performance, and creating a more SEO-friendly URL structure with crawlable pagination and performance.
  • Deployed the sites to AWS using pre-established internal protocols. The AWS services used were Amazon ECS, EC2 load balancers, Amazon Route 53, and AWS Certificate Manager (ACM).
  • Configured and deployed new sites with different branding, changing the color theme and logo. That involved adding a new entry to a PostgreSQL database and setting content in a config file in the front end.
  • Helped build the front end of a dashboard app using Vue 3 and Tailwind UI. Marketers used the app to add and edit entries to a PostgreSQL database via a custom-built form.
  • Used Jira as a ticketing system and Slack as a communication tool.
  • Created logos for new sites following customer requirements using Adobe Photoshop.
  • Maintained a Node.js and Express.js back end used to capture form submissions.
  • Performed basic operations on a PostgreSQL database, running simple queries to find and edit data.
Technologies: Nuxt.js, Visual Studio Code (VS Code), Vue, Bootstrap, Node.js, Express.js, Agile Software Development, CSS, HTML, Vue 2, PostgreSQL, ESLint, SCSS, Sass, Git, GitLab CI/CD, HTML DOM, HTML5, HTML4, CSS4, CSS3, NPM, Vuex, JSON, Babel, Bootstrap 4, Bash, Webpack 4, Lodash, Amazon S3 (AWS S3), Amazon Elastic Container Service (Amazon ECS), Amazon Route 53, Linux, Ubuntu Linux, Ubuntu, UI Frameworks, Web UX, Flexbox, Auth0, AWS Certificate Manager, Elastic Load Balancers, Jira, Slack, Scrum, Remote Work, OAuth 2, Zapier, Front-end, Startups, UI Components, API Integration, UI Testing, Front-end Development, ECMAScript (ES6), REST APIs, JavaScript Libraries, Responsive Layout, UI Libraries, APIs

Junior Front-end Developer

2019 - 2020
Jobsrepublic
  • Developed the front end of a single-page application showing data representations related to social media campaigns and landing pages, namely, KPIs of conversion funnels, plots of magnitude versus time, and tabular data.
  • Contributed to the dashboard app, a single-page application built with Vue 2, Auth0 for authentication, TestCafe for E2E tests, BootstrapVue, and multi-language, and followed coding best practices.
  • Developed integrations between tools to optimize internal tasks, including Google Apps Script, SendGrid, Trello, Zapier, lambda functions, and Serverless.
  • Coordinated with the back-end team to develop features following Scrum and Agile methodologies. Used CI/CD best practices for weekly deployments to staging and production environments.
  • Redesigned the app's front end using UI best practices and Figma as a design tool.
  • Performed basic operations on a PostgreSQL database, running simple queries to find and edit data.
  • Used Jira as a ticketing system and Slack as a communication tool.
Technologies: Vue 2, Vuex, Visual Studio Code (VS Code), Vue, Nuxt.js, Bootstrap, Figma, PostgreSQL, ESLint, SCSS, Sass, Git, GitLab CI/CD, Jest, TestCafe, HTML DOM, HTML5, HTML4, CSS4, CSS3, NPM, JSON, Babel, Bootstrap 4, Bash, Webpack 4, Lodash, Amazon Elastic Container Service (Amazon ECS), Serverless, Google Apps Script, Linux, Ubuntu Linux, Ubuntu, UI Frameworks, Spreadsheets, Wireframing, Wireframe to Product, Web UX, Flexbox, Auth0, Jira, Slack, Scrum, AWS Lambda, Serverless Framework, Zapier, Front-end, Startups, UI Components, UI Design, Data Visualization, API Integration, UI Testing, Front-end Development, ECMAScript (ES6), Testing, UX Design, REST APIs, JavaScript Libraries, Responsive Layout, Component Libraries, UI Libraries, APIs

Improving Accessibility in a React App

http://app.notarize.com
This project involved improving the accessibility of a React app for a client. After an initial accessibility audit, we identified several tickets that needed to be fixed. I worked on these tickets in a separate branch and made sure to submit pull requests that were easy to understand and review. Once the important tickets were completed, I conducted a full accessibility audit of the app to identify additional issues. I grouped these issues into new tickets and prioritized them based on their importance. Then I worked on the most important tickets to fix them. As a result, the app became fully accessible, and a second accessibility audit resulted in essentially zero issues reported. My contributions to this project helped ensure that the app was usable and accessible to a broader audience.

Habits App

https://rotations-6f39b.firebaseapp.com
A web app built with React, Firebase, TailwindCSS, and Mantine.dev and bootstrapped from my React starter template.

The server state was handled with React-Query, and the global client state was conducted with Redux Toolkit.

It allows the user to schedule habits. For example, the user may create a routine titled "water the plants" with a recurrence of one day.

Landing Page Editor

A Nuxt component library built for Jobsrepublic was integrated with the Storyblok CMS so that content managers could create and edit new landing pages from scratch.

Every component included team brainstorming with the content creators to cater to their needs, a development phase and accessibility, and performance and SEO audit to achieve a high lighthouse rank.

Changes requested by the team were implemented often within the same day. Tailwind CSS was used for styling, and the UI design was adapted from that provided by the Tailwind UI template library. Each landing page was its own multipage site.

Conversion Tracker App

A single-page application built for Jobsrepublic, with data visualization related to social media campaigns and landing pages, namely, KPIs of conversion funnels, plots of a magnitude versus time, and tabular data.

The app was built from scratch to production-ready with Vue 2, Auth0 for authentication, multi-language, and E2E tests with the TestCafe testing library. The data was consumed from a REST API built by the back-end team. The layout used a customized Vue Bootstrap theme. At the start of the project, coding best practices were established and documented.

Vue Admin Dashboard Maintenance

Contribution to the migration of an admin dashboard from Backbone to Vue 2. Maintained the project for two years.

The admin dashboard was a complex web app whose main two features were managing the landing page content where users could apply and managing the applicants themselves through multiple application stages.

Multi-site Codebase Maintenance

Maintained a multi-site codebase built with Nuxt.js. One of these sites was a big portal with a large traffic of up to 100,000 monthly visitors.

Evolved the codebase, adding new pages, implementing design changes, improving accessibility, performance, and creating a more SEO-friendly URL structure with crawlable pagination and performance.

Content Editor Dashboard

Contributed to creating a content editor dashboard powered by Vue 3 and Vite. The dashboard was used to create and edit new entries in the database and set them as "published." My main contribution was to develop the form to interact with those entries.

AthleanX Home Workout App

https://ahtleanx-home-workout.netlify.app/
Personal project.

A progressive web application for mobile devices that helps with workouts at home. The app is a static single-page application developed with Vue 2 that behaves like a native mobile app.

I designed and created the UI from scratch using Figma and Tailwind CSS.

My Personal Website

https://www.webdevluis.com
A website built in Next.js in static site generation mode, enabling loading times to speed up. The site is styled using Tailwind CSS and Storyblok CMS as a content editor, and it is deployed to Netlify.

Trello Scope Tracker

https://github.com/luismartinezs/trello-scope-tracker
A cloud function deployed on AWS with the serverless framework intercepting webhooks from Trello. When a Trello card is moved to a specific list in the Trello board, the cloud function receives a webhook that triggers a zap from Zapier. This zap appends a value to a Google Sheets spreadsheet.

React Starter Template

https://github.com/luismartinezs/react-firebase-mantine-tailwind-vite-starter
A starter template for my React single-page application projects. It has the following stack configured: Firebase, React Router, Vite, TypeScript, pre-commit hooks, commitlint, GitHub Actions, Tailwind CSS, Mantine, reCAPTCHA, and unit and integration testing.

Travel Booking Websites Improvement

Onboarded as a front-end developer, I championed major improvements in the Nuxt.js codebase of Rolfs Buss and Solresor, travel websites allowing package bookings.

I targeted large, complex components and initiated a shift towards smaller, single-responsibility modules, vastly enhancing code clarity and maintenance. I corrected Vuex store misuses, transitioned actions to getters, and strategically planned refactoring without affecting feature delivery timelines. I delivered essential features such as advanced web search filters and dynamic campaign pages, boosting user experience. I also filled gaps in end-to-end testing, solidifying the codebase against potential bugs.

The engagement culminated in an effective handover to a new developer, leaving behind a substantially improved and streamlined codebase.

Weather Wardrobe Wizard

https://weather-wardrobe-wizard.netlify.app/
The Weather Wardrobe Wizard sends users weather forecasts and corresponding clothing suggestions. Users can toggle between metric and imperial units, list and image view of clothing, and light and dark themes. Selections are locally stored for guest users, while signed-in users have persistent data stored in Firebase. Premium users enjoy AI-powered packing recommendations from OpenAI.

The application was developed with Next.js, React, TypeScript, and Zustand and combines weather forecasts with clothing advice. OpenWeather API powers the real-time data, and the UI is crafted with Chakra UI. Firebase Firestore handles real-time database updates, while Stripe facilitates payments for premium services. Multi-language support and error tracking with Sentry are other key features.

Languages

JavaScript, CSS, HTML, HTML5, CSS3, ECMAScript (ES6), TypeScript, HTML4, TypeScript 3, TypeScript 2, SCSS, Sass, CSS4, Bash, Google Apps Script

Frameworks

Tailwind CSS, Next.js, Nuxt.js, Bootstrap, Redux, TestCafe, Jest, YARN, Express.js, Serverless Framework, OAuth 2, Selenium

Libraries/APIs

Vue, Vue 2, Flexbox, React, React Testing Library, React Redux, Vuex, Lodash, Node.js, RxJS, REST APIs, Stripe API, Recharts, Playwright

Paradigms

HTML DOM, Agile Software Development, Responsive Layout, Scrum, UI Design, Testing, UX Design, Search Engine Optimization (SEO), Responsive Web Design (RWD)

Other

Storyblok, Vue 3, Remote Work, Front-end, UI Components, API Integration, Front-end Development, A11Y, Firebase Hosting, ESLint, Bootstrap 4, UI Frameworks, Wireframing, Wireframe to Product, Web UX, React Components, React Hooks, Startups, Content Management Systems (CMS), Accessibility, UI Testing, User Interface (UI), Component Libraries, UI Libraries, APIs, Storybook, Mantine, Vite, Vitest, CI/CD Pipelines, SSH, Performance, CSS Grid, Amazon Route 53, Serverless, Cloudflare, AWS Certificate Manager, Elastic Load Balancers, Sanity CMS, Data Visualization, WCAG 2, i18n, React Query, JavaScript Libraries, Full-stack, Travel, Booking Systems, User Experience (UX), Zustand, Chakra UI, OpenAI GPT-4 API, OpenAI GPT-3 API, Multilingual Websites, PWA, Progressive Web Applications (PWA), Web Accessibility, Firebase Cloud Functions

Tools

Figma, Adobe Photoshop, Git, NPM, JSX, Jira, Slack, Zapier, Sentry, Adobe Illustrator, Adobe After Effects, Blender, GitHub, GitLab, GitLab CI/CD, Babel, Webpack 4, Amazon Elastic Container Service (Amazon ECS), Spreadsheets, Auth0, Firebase Authentication

Platforms

Firebase, Visual Studio Code (VS Code), Netlify, Docker, Amazon Web Services (AWS), Linux, Ubuntu Linux, Ubuntu, AWS Lambda

Storage

Cloud Firestore, JSON, Redis, PostgreSQL, Amazon S3 (AWS S3)

2009 - 2014

PhD in Computational Chemistry

Ruhr University Bochum - Bochum, Germany

2008 - 2009

Master's Degree in Computational Chemistry

University of Barcelona - Barcelona, Spain

2003 - 2008

Bachelor's Degree in Chemistry

University of Barcelona - Barcelona, Spain

SEPTEMBER 2020 - PRESENT

Web Accessibility

Udacity

JULY 2019 - PRESENT

The Complete Junior to Senior Web Developer Roadmap

Udemy

DECEMBER 2018 - PRESENT

Front-end Development Libraries

freeCodeCamp

DECEMBER 2018 - PRESENT

JavaScript Algorithms and Data Structures

freeCodeCamp

DECEMBER 2018 - PRESENT

Responsive Web Design

freeCodeCamp

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