Rafael Lopes

Inspectable Engineering

Selected Engineering

Three complementary public projects: workflow automation, defensive browser integration and frontend craftsmanship. Each links directly to inspectable source and documentation.

Browser Integration / Workflow Automation

ShopKit Product Builder

AI-assisted product-entry workflow

Problem:

Entering product information in Shopkit involves repetitive drafting and moving content between form fields.

Solution:

A Chrome extension creates an editable product draft, applies reviewed fields, and leaves final saving manual.

Rafael's Contribution:

Implemented JavaScript content scripts, a Manifest V3 service worker for OpenAI requests, local configuration, and a review-before-apply interface.

Result:

Product drafting and form entry sit inside the existing Shopkit workflow. Pricing, product status, media selection and final saving remain under the user's control.

JavaScriptManifest V3OpenAI APIBrowser APIs

View Repository

Browser Integration / Defensive Engineering

Zappy → WhatsApp

Customer-aware conversation preparation

Problem:

Salon staff need to prepare repeated messages using the customer record they already have open in Zappy.

Solution:

A browser extension checks the recipient, prepares reusable or one-off messages, and hands the conversation to WhatsApp for manual review and sending.

Rafael's Contribution:

Built a TypeScript customer-record adapter, international phone validation, recipient-change protection, configurable templates, and an optional PNG clipboard workflow.

Result:

Reproducible builds, 11 regression tests, green CI and installed-extension validation on synthetic customer pages. The checks do not claim real message delivery or compatibility with every live Zappy layout.

TypeScriptManifest V3Regression TestsGitHub Actions

View Repository

Frontend Implementation / Accessibility

NETOYETOUT

French service-business frontend

Problem:

A service-business frontend needs clear visual hierarchy, service navigation and layouts that work across screen sizes.

Solution:

A responsive React frontend with dedicated service pages, shared navigation, motion and accessibility improvements.

Rafael's Contribution:

Adapted and refined an initial Figma Make bundle into a multi-page implementation, with keyboard focus, skip navigation, reduced-motion support and truthful contact-state disclosure.

Result:

Public source, documented attribution, actual desktop/mobile screenshots and TypeScript/build CI. This is a frontend demonstration; it does not accept enquiries or claim an operational backend.

ReactTypeScriptViteResponsive UIAccessibility

View RepositoryView Live Frontend

Client Work

Live websites show the delivered experience. Client source and administration systems remain private.

Salon Management System

Vitoria’s Beauty

Business Website & Admin System

Problem:

A beauty business with three locations needed to consolidate operations, service details, pricing, team listings, and gallery displays while enabling non-technical staff to manage content dynamically.

Solution:

Built a mobile-first, high-performance business website integrated with custom secure administration tools.

Rafael's Contribution:

Designed and implemented the front-end layout, responsive pricing tables, location guides, and a password-protected admin dashboard. Set up state synchronization with Supabase, user authentication, and media upload pathways.

Result:

Enabled salon managers to update service pricing and gallery pictures in real time, bypassing manual code changes.

ReactTypeScriptTailwind CSSSupabaseVercel

View Live Project

Full-Stack Portfolio & Management

Cláudia Makeup

Full-Stack Business Website & Admin Panel

Problem:

A freelance makeup artist required an editorial-grade professional website to showcase her portfolio with filtering options, present client testimonials, and capture structured booking requests.

Solution:

Designed and deployed a responsive business website with an integrated booking-request pipeline and a private administration portal.

Rafael's Contribution:

Created dynamic portfolio filtering, structured booking forms and a secure Supabase-backed dashboard for managing requests and portfolio images.

Result:

Automated booking request logging and portfolio gallery updates, removing manual workflow friction.

ReactTypeScriptTailwind CSSSupabaseVercel

View Live Project

Project Experience