Juan Francisco Marcenaro A.

Juan Francisco Marcenaro A.Juan Francisco Marcenaro A.

Full-Stack Web & Mobile DeveloperFull-Stack Web & Mobile Developer

Audio EngineerAudio Engineer

Passionate about building impactful digital solutions and creating immersive audio experiences. Bridging technology and creativity.

View My Work
Contact Me
LinkedIn
GitHub
Twitter
Scroll
Scroll

About Me

I build fast, expressive web apps and I care about the little things: motion that earns its keep, readable type, and clean data paths. My lane is React/Next.js— with enough backend to ship end-to-end.

Parallel to code, I'm an audio engineer. That sensibility shows up in my work: dynamic but balanced, opinionated without being loud. I like products that feel alive without asking for attention.

Core Principles

Accessible, responsive UI by default
TypeScript-first, predictable state
Edge-friendly where it helps performance
Animations tuned for reduced-motion users
Projects shipped
30+
Frontend focus
React / Next.js
Backend stack
Node + Firebase
Audio cred
Mix & Mastering

Audio Engineering

Professional mixing & mastering engineer with years of experience working with music producers

* Click the speaker icon to hear my audio work.

My Work

A collection of projects showcasing my skills in web development

Showing 9 projects

J-Flix React Client screenshot
React
2024

J-Flix React Client

The original React client for J-Flix with Redux state management. This client offers a seamless movie browsing experience with responsive design, user authentication, and profile management features.

ReactReduxReact BootstrapParcelJavaScript
CodeLive Demo
Loan Calculator Pro screenshot
Python
2025

Loan Calculator Pro

A Python + Flask web app for precise loan calculations with amortization schedules, principal/interest breakdowns, and payoff insights. Evolved from a console tool and deployed on Vercel.

PythonFlaskHTMLCSSJavaScript+1 more
CodeLive Demo
Berlitz Report AI Dashboard screenshot
Featured
Next.js
2025

Berlitz Report AI Dashboard

An interactive, full-stack dashboard for analyzing student performance data, featuring a conversational AI assistant powered by Google Gemini. This project transforms static spreadsheet data into a dynamic, insightful, and user-friendly web application.

Next.jsReactTypeScriptTailwind CSSGoogle Gemini+4 more
CodeLive Demo
J-Flix API screenshot
Featured
Node.js
2024

J-Flix API

A robust RESTful API powering the J-Flix platform. Built with Node.js and Express, this API handles user authentication with JWT, manages movie data, and interfaces with MongoDB for persistent storage.

Node.jsExpress.jsMongoDBMongoosePassport.js+2 more
CodeLive Demo
Meet App screenshot
Featured
React
2025

Meet App

A serverless Progressive Web App built with React that connects to the Google Calendar API. Features include offline capability, test-driven development practices, and interactive data visualizations for event analytics.

ReactPWATDDAWS LambdaGoogle Calendar API+2 more
CodeLive Demo
React Native Chat App screenshot
React Native
2025

React Native Chat App

A cross-platform mobile chat application built with React Native and Expo. Features include real-time messaging, image and location sharing, and offline access with local storage of messages.

React NativeExpoFirebaseFirestoreAsyncStorage
CodeVideo
Pokedex App screenshot
JavaScript
2024

Pokedex App

An interactive Pokedex web application that fetches and displays Pokemon data from the PokeAPI. Built with jQuery and Bootstrap, featuring responsive design, pagination controls, and detailed modal views for each Pokemon.

JavaScriptjQueryBootstrapHTMLCSS+1 more
CodeLive Demo
OnGuard Native Android App screenshot
Featured
Android Studio
2025

OnGuard Native Android App

A real-time surveillance application for Android devices, built with Kotlin. It allows users to synchronize to multiple devices with the right permissions.

Android StudioKotlinFirebaseFirestoreGoogle Maps API
Code
J-Flix Angular Client screenshot
Featured
Angular
2025

J-Flix Angular Client

A responsive movie browsing platform built with Angular. Users can create profiles, browse and search movies, and maintain a favorites list with detailed information and responsive design for all devices.

AngularTypeScriptAngular MaterialRxJSLocalStorage+1 more
CodeLive Demo
View More on GitHub

My Development Workflow

A structured approach to building exceptional web experiences

  1. STEP 01

    Discovery & Planning

    Agree on scope, constraints, and success metrics. Capture user stories and risks up-front.

    Phase 1 of 6
  2. STEP 02

    Design & Architecture

    Component map, data contracts, and navigation. Favor simple shapes and cache-aware data.

    Phase 2 of 6
  3. STEP 03

    Development

    TypeScript-first implementation with linting and previews. Small PRs, fast iterations.

    Phase 3 of 6
  4. STEP 04

    Testing & QA

    Unit where logic lives, integration where flows live. Accessibility and smoke tests.

    Phase 4 of 6
  5. STEP 05

    Deployment & CI/CD

    Optimized builds via Vercel. Preview links for every change, telemetry on production.

    Phase 5 of 6
  6. STEP 06

    Review & Iteration

    Collect signals, prioritize deltas, and ship again. Keep the release train moving.

    Phase 6 of 6

Let's Connect

Questions, collaboration ideas, or interesting problems—I'm open to them.

Available for freelance & full-time opportunities

Email Me

Direct line

LinkedIn

Connect professionally

GitHub

Check my code

Response time: Usually within 24 hours