Filip Stepien

Web Developer

About Me

I am a Toronto-based web developer focused on building applications that solve real-world problems. I work with JavaScript/React, and I enjoy mapping web dataflow, working on clear modern designs, and building in accessibility on every new project I see.

Before falling in love with coding, I worked in the chemical manufacturing industry as a PM and operations leader, optimizing processes using Lean Six Sigma, and working with stakeholders and multidisciplinary teams to deliver integrated customer solutions. These are skills I believe will serve me well as a web developer, as they are every bit as critical to building great web products that serve real business needs.

I have just graduated from HackerYous Web Development Immersive program, and I am ready to join an amazing new company as a web developer. If you are interested, I would love the chance to discuss how I can add value to your team.

You can message me at


Make Up A Gift

Design a personal make up gift with this React.js app. Simply pick three categories and your budget, while behind the scenes that app will fetch product data with batch API calls, verify product information, conduct currency conversions, and ensure the sum of the products from each category is under budget. This team project relied on planning, communication and problem solving. See the Project Plan for details on managing a slow API and sending email from a front-end application using Firebase Functions.

Live Link Project Plan
React.js Firebase Functions SendGrid JavaScript ES6 Render Props Styled Components API Wireframing Material Design Team Collaboration Git Workflow Visio Project Management

Pitch Black Marketing

Pitch Black is a static site built using Gatsby, React, Contentful, and hosted on Netlify. Content is displayed by making graphQL api calls to Contentful. In addition to the main pages, a static page is automatically created for each blog post optimizing the site for speed and SEO. To do this webhooks are set up to trigger a rebuild when a change is detected on Github or the CMS. Read lessons learned for details on deployment flow and setting up a form using Netlify and reCAPTCHA.

Live Link Lessons Learned
React.js Gatsby JAMstack Markdown GraphQL Contentful Netflify CMS Git styled-components Sass React Helmet reCAPTCHA

Shelter Watch

Shelter Watch is a React.js app part of a UX design project focusing on communication within the shelter network. The home page maps Toronto shelter locations using react-google-maps, filters them based on City of Toronto Open Data, and displays real-time shelter availability in text and graphical format using Chart.js. Operations and Admin views allow staff to update availability and capacity respectively. See lessons learned for more details about the project and data flow throughout the app and database.

Live Link Lessons Learned
React.js JavaScript ES6 react-router HOC react-google-maps Firebase Database Chart.js UX Implementation


A brainstorming tool built using jQuery and D3.js libraries. To meet the minimum viable product the app collects and organized user ideas. Using rolling wave planning and a stretch goal of tree diagram visualization d3 data management was applied. This was an upfront cost due to the nested object structure but paid off with a responsive SVG graph. Brainstorming ideas are can be stored in local storage, printed or saved to PDF. The Lessons Learned discuss keyboard accessibility and D3.js scaling.

Live Link Lessons Learned
jQuery D3.js Module Pattern Responsive Design Visualization SVG Data Structures JSON Local Storage ES6 a11y


A modern e-commerce site converted from PSD using a combination of CSS grid and flexbox to create a detailed responsive design. This project focuses on exploring new css tools to write dry code by reducing media queries, as well as creating drop downs and UI components without reaching for JavaScript. The style sheets are organized using BEM, and written using Sass preprocessor. Read lessons learned for details on cross browser testing including different css grid standard implementations.

Live Link Lessons Learned
HTML CSS Sass BEM CSS Grid Flexbox Responsive Design Overlap Layout UI Browser Testing

Shipping Documents

This React.js app generates Bill of Lading, a shipping document required by Transport Canada for all dangerous goods being transported. ERP software that usually generates this document, can be time consuming to configure and difficult to customize. I wanted to solve this problem by creating an app that can be used in both emergency situations and for shipping one time items. Firebase Database and Authentication is used to securely store product information, and CSS Grid is used to create the form that can be filled out and printed from desktop or mobile.

Live Link Github
React.js Firebase Database Firebase Authentication JSX react-router .createRef() Callbacks CSS Grid mousemove Events


Contact Me

You can email me at

Message has been sent