Below is my portfolio of professional projects built as a team at previous employers and side projects constructed by myself. (The professional projects are slightly vague and do not contain links for legal reasons)

Mobile Point of Sale System with React Native and Stripe

Regional Franchised Salon Business Project

TLDR Summary:

This project aimed to enhance the salon employee experience by creating an in-store Point of Sale system through a mobile payment app for iOS and Android, along with physical card readers. The app integrated with Stripe API, utilized React Native for cross-platform development, and employed Location and Bluetooth APIs for card reader pairing. However, due to the 2019 pandemic, the launch was halted. The app allowed employees to handle transactions, while the client received a fee. The system was designed for seamless onboarding, integrating with an existing web app, providing analytics, and offering customer payment features. Responsibilities included requirement documentation, UI design, error tracking, analytics implementation, and more. Challenges included consistent branding, tonal alignment, and catering to various user roles. The project benefited from clear requirements, meticulous documentation, efficient design cycles, and experienced team collaboration. The app was well-received, improving employee and admin experiences and boosting business revenue.


Project Description:

My employer and I had already rebuilt a new front-to-back business system for this long-term, ongoing Client. They planned to improve their salon Employee experience by providing an in-store Point of Sale system. This would include payment transaction mobile apps for iOS and Android and physical card readers to connect to their phones and interface with the app. The previous business model included Employees handling their own payment transactions, and this new system would be optional and included a small fee from which the business profited. This was a phase two feature addition as part of a more significant rebranding and redesign of the entire business and marketing push to increase Employee and Customer engagement. We were ahead of schedule at every stage and had a faster beta testing period than we thought. Ultimately the feature was never launched due to the global pandemic in 2020 and the Client being forced to make hard business decisions.


System Requirements: The app would be responsive on iOS and Android, supporting up to 5 and 4 versions, respectively. The app would use React Native, Stripe API for account creation, management, transaction processing, and Stripe client-side components to handle client credentials. The app would work with the phone's Location and Bluetooth Devices API to detect, pair to, and monitor a Bluetooth card reader. The app would automatically detect and pair to the card reader whenever it was near, making it an almost frictionless onboarding process as long as the device was powered on and the app was open. This system was intended to integrate into the existing business management web app, and stylists could opt-in to the service. The app would always be available on the App Stores, so a verification was implemented to guide the user from the web app to Stripe for account creation and back to the web app for an interim waiting period while Stripe verified bank account credentials. This could be expected to take anywhere from 5 minutes to 24 hours, so a notification system running on a NodeJS server was implemented to email the user about their verification status to be redirected back to the web app to view their Stripe account page and a link to their appropriate mobile App Store listing. Once the app was installed, the user was verified in our system as being 'Stripe account ready' and logged in. They could then view all their upcoming and past appointments as an invoice. They could initiate a payment from the invoice based on the booking fee for the Client, the appointment service price, taxes, and a small processing fee. The user experience was then intended to be passed over to the Client to input their card details, input tip amount, and confirm their email for a receipt. An employee could use the app to view a complete history of transactions in the mobile app and web app and be linked back to their Stripe page for more in-depth analytics and account management. There was already a Report system for employee and admin business analytics in the web app, so a new Report was added to monitor transaction statistics, income earned, and fees paid, and transaction analytics by employees, locations, and regions added to the administration side web app.


Technical Requirements: All documentation, design, and prototyping were done with Figma. The mobile app was built with the following:

  • - React Native
  • - Metro and Expo for building and testing
  • - TypeScript
  • - React Context for all state and physical device state management
  • - Stripe API
  • - Material UI and Axios for React Native
  • - NodeJS server interfacing with Stripe and an existing proprietary SQL database.
  • - Sentry for error tracking, beta testing feedback, and user feedback at production.
  • - Google Analytics 4

Changes for system integration to the Employee and Admin web apps, as well as the public-facing site involved:

  • - React
  • - Redux and Redux Saga
  • - Material UI
  • - Axios
  • - AWS Cognito and Amplify for user pools, permissions, and authentication
  • - A current NodeJS server and proprietary SQL Database

And public-facing changes included:

  • - A WordPress site with:
    • - account management system
    • - booking and down payment system
    • - locations and stylist search system
    • - Stylist business and services presentation
  • - Figma for asset design and site design updates

Role and Responsibilities: I was to document all business requirements into technical/system requirements, design UI's for a brand new Mobile App using Material UI, develop all React and React Native user interfaces, document and implement custom error tracking using the Sentry API, and document and implement the Mobile Payment App analytics events tracking and monthly usage reports. The project leads had already met with the Client, who had worked out all legal, business, and terms-based requirements. I worked with one of the leads to discuss their discovery; I compiled the initial Design and Tech requirements documentation and went through a round of approval and editing. This was followed by diagramming the individual parts of the project:

  • - The Employee Stripe onboarding flow
  • - The Mobile App onboarding and transaction flows
  • - The Client and Employee (Stylist) notification flows
  • - The Customer booking and payment flow

As well as high-level views of the project:

  • - The in-store interaction between the Client and the Employee (Stylist)
  • - The Employee experience flow (all onboarding to Stripe account verification and mobile app access, including integration between the web app and mobile app and Stripe)
  • - The entire Customer/Client experience, from booking online to receiving an emailed receipt at the end of the appointment.

After the flows were approved, and project leads, designers, and developers were on the same page, design began on the Mobile App page layout and UI, followed by the web app pages and UI updates. Once initial UI designs were approved, I started working on the React Native setup. I set up the Expo project, built the navigator, set up the global state and transaction state, and built the entire UI. My senior developer handled the server-side programming, front-end Bluetooth code, and state management for interfacing with the physical card reader. When the mobile app was finished and tested, I built the UI and Stripe integration with the Employee web app. At the same time, my senior developer worked on the server-side code to support the new transaction analytics reports for the Employee and Admin web apps. Once all UI was complete and tested manually, I began designing each App Store's marketing assets and icons. The business already had a logo, so this payment app used the same mark with a different color and a small credit card icon overlay. Next came UI design for public-facing changes to the WordPress site. Once completed, the project lead updated the booking process and any other UI changes. While the finishing touches were taking place on the back-end and WordPress systems, I could write articles and record screencast tutorial videos to be released for product launch. We were then able to test the product starting with the clients, then a small group of Employee volunteers to beta test the system. I implemented a beta bug reporting system using Sentry for custom messaging and labeling in our Sentry project.


Materials Testing Online Ordering System

International Materials Testing Laboratory

Project Description: a client approached my employer about rebuilding their proprietary ordering system into a modern web application. The existing system was a desktop app built in the 90s in C# and was very difficult to use, on top of being highly specialized. This laboratory provides technical testing and analysis for materials and coatings used in aerospace machinery. Some challenges faced included restructuring and reorganizing the entire process to be more modern, easier to understand, and faster and more efficient than the existing desktop app. The high-level project goals were similar to an e-commerce site but were drastically different in all the details. Only two labs in the world do this testing, so usability and efficiency were more of a concern than increasing revenue or traffic. The system would remain private like the existing one, where users have to register their lab's credentials and then, if approved, gain access to the web app ordering system.


System Requirements: Users of the system would be Materials Scientists, who would order particular types of tests to be conducted on various material coatings. Users would then ship their coated materials to be tested, the Testing laboratory (our client) would then run the tests and record the results in their database, and the results would be returned in the ordering web app, email, as well as paper mail (Paper mailing was handled by their offices). Before an order can be placed, users would have to input all the specifications of their coating, their own test results, and expected deviations in results. All specifications and allowable deviations would be validated against the client's database in real time. By the end, all systems included:

  • - Registration system
  • - User account and permissions system
  • - Test results system
  • - Coating Forms, order forms, results forms, deviation forms
  • - Order and payment system
  • - Notification system
  • - Nightly updates system

Technologies and Tools: React, React Router, React Context for state management, JWST and protected routes for authentication, Material-UI, React-Forms, and Stripe for payment processing and acceptance. Back-end technologies would include a NodeJS server, the client's existing SQL database, and a proprietary middleman SQL database.


Role and Responsibilities: My overall role in the project was UI/UX Designer and Front-End Developer. Initial tasks involved surveying the existing, very minimal, documentation of the current ordering system, the system itself, and new requirements documentation. I then met one-on-one with the clients to discuss the registration process and the complicated forms users would fill out when putting together their orders. We were then able to specify the various systems. I then interpreted these findings into a sitemap, user and system flow diagrams, UI designs, and a working prototype. Meetings and approval processes would occur at various stages to approve and verify user flows. Once the designs were finalized, I documented the API based on the front-end requirements using Jira Confluence, and then development could commence.


Challenges and Solutions: The coating specification forms were brutal to understand and required unique solutions like dynamic and conditional API calls to validate spec selection and calculate expected test result deviations. The highly specialized nature of the information allowed for creative solutions like element and card nesting to better communicate complex form element relationships and form section hierarchies. The color was straightforward and pragmatic, often employed to emphasize the nested states of hierarchy and to guide the user seamlessly through the highly asynchronous nature of the forms. Users would be returning to the web app for a long time to continue checking updated records of their coatings and test results, view expiration dates and re-testing information, and re-submit coatings for testing. This called for only a few pages to support this functionality but a large amount of complex code to coordinate many states of information and highly conditional and crucial information. Higher order functions and keeping a map of expected results made it much easier to reuse conditional UI logic within those tables and forms.


Personal Learnings: Working with these clients was a slower process than usual because of the density and complexity of the information involved. The initial design's auditing, analysis, and discovery portions took longer than expected. Because of scheduling and traveling issues, the UX/UI interviews and design reviews were conducted with a different team member each time. This made things more complex and eventually led to the discovery of some pretty deep miscommunications. We don't blame the clients, so adjustments were made to meeting notes templates to include who-said-what-when. The React Context API worked great in a functional paradigm, where each state context was considered a feature and came with a hook ('useFeature'). This led to highly organized code and functionality that was easy to understand. This project was the first time I'd conducted interviews and a complete design process, and this became a great learning opportunity. I learned to communicate design needs better throughout the discussions, to ask the right questions, and when something is genuinely complicated, taking the time to diagram and document the App requirements became invaluable when approving designs before development could start.

Business Administration and Management Applications

Regional Franchised Salon Business

Project Description: My employer and a previous team had built an entire administration and business management system and a public-facing website for a regional salon franchise. The company was rebranding and completely redesigning physical locations, including a digital presence redesign and new applications. This would also include a new Stylist business management web app built with React, an email and notifications system and a booking system on the new public-facing website. The project was estimated for 18 months of work but was delayed three months due to extraneous circumstances.


System Requirements: A Stylist business management web app that contains the following systems:

  • - Calendar
  • - Booking
  • - Profile management
  • - Availability
  • - Personal webpage
  • - Services and products
  • - Social account integration
  • - Email and text campaigns
  • - Client management
  • - Help articles and video tutorials
  • - Authentication
  • - Error Tracking

An administration management system that contains the following systems:

  • - Employee and locations management
  • - Employee account managment
  • - Employee payments management
  • - Admin account management
  • - Log in as...
  • - Revenue Tracking and Analysis

A public facing WordPress website that would contain the following systems:

  • - Location listings and information
  • - "Nearest to you" locations
  • - Location search
  • - Stylist listngs and search
  • - Stylist profiles, services, and availability
  • - Appointment booking and notifications

Technologies and Tools: React (class-based components), Redux, Redux-Saga, Re-Charts, React Router, AWS Amplify, and AWS Cognito for authentication and user pools, Adobe XD, React-Calendar, and Axios.


Role and Responsibilities: My overall role in the project was UI designer and Front-End Developer for the Stylist web app. The UI theme was already decided on, so I would continue building on the existing design system and the freedom to tweak styling here and there. My employers had already conducted interviews and knew the project well, so I could complete the Stylist page UI designs and the whole administration app UI designs with only a few in-house meetings. When page designs were complete, I was tasked with architecting the front-end codebase, building the router and pages, and designing and implementing the front-end authentication scheme. Some systems I was responsible for the building of the "Availability," "Profile Management," "Services and Products," and "Social Account Integration" systems. I then built the administration app in the same vein and wrote and recorded all the help articles and tutorials. As the project progressed, I began designing UX, UI, and marketing assets for the public-facing website.


Challenges and Solutions: The project was built on older versions of React and Redux that made the codebase so modular and verbose that feature development was later halted so the Redux and Redux-Sage code could be reconstructed into the "Ducks" architecture. This paid dividends and saved much development time in the long run.


Personal Learnings: This was my first attempt at project architecture and was a 'learn-on-the-job' situation, so there were choices that would have been different had there been more time for research. CSS in JS was implemented and grew so much faster than anticipated that we eventually had to rework some component subdirectories to accommodate new style files and functionality.

Side Projects

Reddthat

Reddit clone - web application - Unfinished

This project is a client clone of Reddit built with React, Redux-Thunk, TypeScript, and Ant Design. The project aims to demonstrate the planning of project requirements and app features and to interpret those into technical needs, design requirements, a custom theme, a Figma prototype, and the final web app. The UI uses Reddit's existing design patterns but applies a custom theme. The following links are to the Figma prototype and file, the planning, technical, and design documentation, and a link to the codebase. The project is ongoing, and the documentation is updated as the project progresses.

Tinyhouse

AirBnb clone - web application

This full-stack AirBnb clone is built with React, TypeScript, GraphQL, Node.js, and MongDB. It is a web app that allows users to view and book listings, and create an account to host their own listings. The app uses Google GeoLocation API, Google OAuth, Stripe API to process payments, and Cloudinary to handle image upload and retrieval. The UI is built with Ant Design.

This website!

Personal Development Portfolio - static website

This site serves, first and foremost, as a portfolio for my work. It also demonstrates foundational web development skills, advanced styling, project architecture, and Object Oriented Programming.

Jammming

Spotify clone - web application

This is a Spotify clone built with React. The application allows users to log in to their Spotify accounts, search songs and assemble playlists, and save them to their accounts. This project demonstrates Object Oriented Programming, asynchronous programming, and efficient error handling and UI feedback.

*Project not yet mobile responsive

Catch Of The Day

Fictional Seafood Store - web application

This is a single-page CRUD stack web application built using React. This project uses React Router client-side routing, PropTypes for code resiliency, CSSTransitions, and Firebase for data storage and retrieval and account authentication.

*Project not mobile responsive

Let's work together

I'm excited to learn more about your opportunity and how I might help you!

Ravenous

Yelp clone - web application

This web application built with React utilizes the vanilla JavaScript fetch API to interact with the open-source Yelp API. Users can search for a restaurant or style of food in any city. They can filter these searches through 'Best Match,' 'Highest Rated,' and 'Most Reviewed.'

*Project not mobile responsive

Clear View Escapes

Fictional travel business - website

This fully responsive and interactive single-page website was created using Html, SCSS, and JavaScript. The SCSS is written to incorporate BEM methodology: taking advantage of reusable and scalable code. The site is built with GulpJS and Webpack, utilizing Babel to transpile modern JavaScript.

Game Of Life

Non-Interactive game - web application

The Game Of Life is a non-interactive game built using React. This game focuses on JavaScript logic. The game sets a few rules: cells are first populated with color, and when the game starts, squares are filled or emptied based on their location to other cells. The game is scalable with multiple grid sizes and feature buttons for control over simple aspects of the game.

*Project not yet mobile responsive