Frontend developer with a QA mindset

Projects

Four projects, each live, with its code, tests and documentation public. Moringa and Ipê have full case studies.

• 

  Moringa

  Marketplace for Brazilian makers · October 2026

  Frontend: Two panels, one for buyers and one for makers, Stripe Checkout in test mode, a live order timeline, Portuguese and English, light and dark. 100 in all four PageSpeed Insights categories, on mobile and desktop.

  QA: Test plan, 58 test cases traced to user stories, exploratory sessions and a test summary report. Found and fixed a High-severity bug (the bag could show an old price) before launch. 179 unit and integration tests, 158 end-to-end tests, axe and OWASP ZAP on every pull request.

  Stack:

  • Next.js 16
  • React 19
  • TypeScript
  • PostgreSQL
  • Stripe
  • Playwright

  • Case study · Moringa
  • Live site · Moringa
  • Code · Moringa
• 

  Ipê

  Design system for React · October 2026

  Frontend: 11 accessible React components, design tokens synced with Figma, light and dark themes and a bilingual Storybook. Published on npm as @rayssarrsilva/ipe; Moringa is built on it.

  QA: 24 test cases and 6 bug reports with before and after evidence. Every story runs in Chromium with an interaction test and an axe audit on each pull request.

  Stack:

  • React
  • TypeScript
  • Storybook
  • Style Dictionary
  • Figma
  • npm

  • Case study · Ipê
  • Storybook · Ipê
  • npm · Ipê
  • Code · Ipê
• 

  DietGreen

  Meal planner by diet profile · 2026

  Frontend: Food suggestions for 10 diet profiles and 5 goals, PDF and Excel export, Google and GitHub sign-in, Portuguese and English.

  QA: Business rules live in a domain layer with no framework code, so they are unit-tested without a database. Lint, typecheck, tests and build must pass before any merge.

  Stack:

  • Next.js
  • TypeScript
  • Prisma
  • PostgreSQL
  • Auth.js
  • Vitest

  Hosted on Render's free plan: the first visit can take about a minute to wake the server.

  • Live site · DietGreen
  • Code · DietGreen
• 

  Battleship

  The classic game, built test-first · 2026

  Frontend: Game logic (ships, boards, players) kept apart from the DOM, so the interface only draws the current state. Bundled with Webpack.

  QA: 19 Jest unit tests written before the code. GitHub Actions runs them before every deploy.

  Stack:

  • JavaScript
  • Jest
  • Webpack
  • GitHub Actions

  • Play · Battleship
  • Code · Battleship

How I work

The same process in every project, shown here with links to the real documents from Moringa.

1. Discover

   A product brief, proto-personas and a backlog with acceptance criteria before any screen. Moringa brief · backlog.

2. Design

   User journeys in FigJam, wireframes, then high-fidelity screens built only with components from my design system. Figma file.

3. Build in small steps

   Small pull requests, Conventional Commits checked by commitlint, TypeScript in strict mode and ESLint with zero warnings allowed.

4. Test at every level

   Unit tests, integration tests against a real Postgres in memory, and end-to-end tests on mobile and desktop with axe in both themes.

5. Gate every merge

   GitHub Actions runs Lighthouse CI, an OWASP ZAP scan and CodeQL on each pull request; Dependabot keeps dependencies current.

6. Run a QA cycle

   After release: test plan, traced test cases, exploratory sessions, bug reports and a summary. Test plan · bug reports · summary.

Experience and education

Contact

Email is the best way to reach me. Open to frontend and QA roles, in Brazil or abroad.

• rayssarrsilva1@gmail.com
• LinkedIn
• GitHub
• Résumé (PDF)