Skip to content

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

I buildsoftware forthe real world.

From code to production: I build web and mobile experiences that reach the hands of the people who use them.

See the work Get in touch

About Me

Brazil

I work on products that were already big when I arrived: my code runs in pharmacy, school, digital banking and health apps.

My ground is React Native and React with TypeScript, from architecture to delivery, through code review, BFF, GraphQL and the dull part nobody posts about: tests, broken builds and a production bug at six in the evening.

I like an interface that is properly resolved and a technical decision someone can still defend six months later. I write for whoever maintains it next.

Portrait of Erika Lopes

Skills

01 / 07

01Web interface development with React and Next.js
02Mobile application development with React Native
03TypeScript applied to scalable and type-safe code
04Component architecture and reusable design systems
05Integration with REST and GraphQL APIs (BFF)
06Focus on performance, accessibility and user experience
07Automated testing (unit and e2e) and code quality

Contributions

00 / 05

RD Saúde: Drogasil & Droga Raia Apps

RD Saúde: Drogasil & Droga Raia Apps

CORE team on the Drogasil and Droga Raia apps, on features critical to conversion and user experience.

React Native, TypeScript, GraphQL, Node.js (BFF), MVVM, SOLID

App Store Google Play

01 / 05

Agenda Edu and Agenda Edu - School Team

Agenda Edu and Agenda Edu - School Team

Three fronts at once: the student app, the school app and the component library.

React Native, TypeScript, Jest, Storybook, Component Library, Testes Automatizados

App Store Google Play

02 / 05

Repassa Platform - Backoffice

Repassa Platform - Backoffice

A Next.js backoffice that retired the spreadsheet.

React, Next.js, TypeScript, Tailwind CSS, SCSS, NextAuth, Keycloak

03 / 05

Sewa Kenko: Digital Health Platform

Sewa Kenko: Digital Health Platform

Institutional site and Android app for a digital health platform.

React, React Native, JavaScript, TypeScript, APIs REST, Web & Mobile Integration

Google Play Website

04 / 05

Martins Sales Force Management

Martins Sales Force Management

Internal sales force app in React Native and TypeScript.

React Native, TypeScript, Redux, Context API, Jest, CI/CD, Azure DevOps

App Store Google Play

05 / 05

Conta Simples: App

Conta Simples: App

Microfrontends applied to mobile, which is where the idea gets hard.

React Native, Expo, TypeScript, Microfrontends, Componentização, Design System

App Store Google Play

Technologies

Tools and technologies I use in development

Frontend: React
Next.js
TypeScript
JavaScript (ES6+)
Styled Components
Tailwind CSS
SCSS / SASS
HTML5
CSS3
Design Systems
Mobile: React Native
Expo
TypeScript (Mobile)
Mobile Performance
Backend / APIs: Node.js (BFF)
GraphQL
REST APIs
Tools: Git
Redux
Context API
Zustand
Axios
Storybook
Jest
Maestro
CI/CD (Azure DevOps)
Vite
NPM
Yarn
Figma

Contact

Let’s work together?

Direct

EmailOpen contact

caluerika@gmail.com

WhatsAppOpen contact

+55 88 92193-5000

Open conversation

LinkedInerika-lopes-calu
GitHubxterikatx

V1.0 REV.A

booting erika.lopes

locale en

mounting interface

ready